javascript 美术馆

比眉伴天荒 2022-08-20 15:11 119阅读 0赞

1.  childNodes属性 从给定的节点树把任何一个元素的所有子元素检索出来，返回一个数组

function countBodyChildren(){ 
    var body_element=document.getElementsByTagName("body")[0];//检索到body
    alert(body_element.childNodes);//检索到body的所有子元素
    alert(body_element.childNodes.length);//查看包含的元素的个数
    }

在页面加载时执行函数 window.οnlοad=countBodyChildren;  
2. nodeType 调用语法 node.nodeType  
alert(body\_element.nodeType);//输出每个节点的属性  
元素节点的属性值是1；属性节点的属性值为2；文本节点的属性值为3.  
3. nodeValue 可以用来改变某个文本节点的值

Choose an image.

alert(description.childNode\[0\].nodeValue);  
4. firstChild 和lastChild  
firstChild与childNodes\[0\]完全等价

//点击图片时，在指定位置显示图片后，在描述区显示图片的标题
    <p id=”description”>Choose an image.</p>
    
    function showtitle(whichpic) { 
        var text=whichpic.getAttribute("title");
        var description=document.getElementById("description");
        description.firstChild.nodeValue=text;
        }

5.整个小页面的源码  
pic.html

<html>
    <head>
    <title>Image Gallery</title>
    <script type="text/javascript" src="showPic.js"></script>
    <link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen">
    </head>
    <body>
    <h1>Snapshots</h1>
    <ul>
        <li><a href="image/1.jpg" onClick="showPic(this); return false;" title="a fireworks display">fireworks     </a>//鼠标点击时，不在另一个页面显示，而是在显示区域显示。点击返回false，则不会跳转
        </li>
        <li><a href="image/2.png" onClick="showPic(this); return false;" title="a cup of black coffee">coffee</a>
        </li>
        <li><a href="image/3.png" onClick="showPic(this); return false;" title="a red rose">rose</a>
        </li>
        <li><a href="image/4.png" onClick="showPic(this); return false;" title="the famous clock">bigben</a>
        </li>
    
    </ul>
    <img id="placeholder" src="image/4.png" alt="my image gallery" />
    //点击图片时，在指定位置显示图片后，在描述区显示图片的标题
    <p id=”description”>Choose an image.</p>
    </body>
    </html>

layout.css

/* CSS Document */
    body{ font-family:Arial, Helvetica, sans-serif; color:#00CCCC; background-color:#CC3300; margin:1em 10%; }
    h1{ color:#CC3366; background-color:#CCCC99; }
    a{ color:#CCCC99; background-color:#3366FF; font-weight:bold; text-decoration:none; }
    ul{ padding:0; }
    li{ float:left; padding:1em; list-style:none; }

showPic.js

function showPic(whichpic) {   var source=whichpic.getAttribute("href");//首先检索到图片的地址
        var placeholder=document.getElementById("placeholder");//找到被替换图片的位置
        placeholder.setAttribute("src",source);//替换 另一种方法 placeholder.src=source;
        var text=whichpic.getAttribute("title");
        var description=document.getElementById("description");
        description.firstChild.nodeValue=text;
    }// JavaScript Document