javascript中DOM本质及操作(4)_建站学-个人建站指南,网页制作,网站设计,网站制作教程

　　访问DOM节点

　　假设我们有一个包含了一个段落和一个无序列表的基本XHTML文档:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">   
    <head>   
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
            <title>JavaScript!</title>   
    </head>   
    <body>   
         
        <p id="intro">My first paragraph...</p>   
        
        <ul>   
            <li>List item 1</li>   
            <li>List item 1</li>   
            <li>List item 1</li>   
            <li>List item 1</li>   
            <li>List item 1</li>   
        </ul>   
        
        <script type="text/javascript">   
        // <![CDATA[    
          
       // ]]>   
        </script>   
        
    </body>   
</html>

　　在第一个例子中我们将使用’getElementById’这个DOM方法访问我们的段落。

　　var introParagraph = document.getElementById('intro'); / 我们现在访问了一个DOM节点，这个DOM节点代表intro段落。

　　变量’introParagraph’现在指向DOM节点，我们现在可以在这个节点上做很多事情，我们可以读取它的内容和属性，也可以控制它的任何方面。我们可以删除它、克隆它或将它移到DOM树的其它位置。

　　我们可以使用JavaScript和DOM接口访问现在文档中的任何东西。所以，我们可能希望用类似的方式访问文档中的那个无序列表，但唯一的问题就在于它并没有ID。你可以给它一个ID属性并使用同样的方法访问它或者使用’getElementsByTagName’方法访问它。

　　var allUnorderedLists = document.getElementsByTagName('ul'); // 'getElementsByTagName' 返回当前存在的节点集合/列表 // 它除了那一点微小的差别外其实和数组很相似。

　　getElementsByTagName

　　getElementsByTagName方法返回当前存在的节点集合/列表，它和数组的相似之处是它也有length属性。需注意的重要一点是这些集合是’即时’的，如果你在DOM中添加了一个新元素那么这个集合将自动自我更新。由于它和数组类似，所以我们可以使用索引来访问其中的每个节点，从0到这个集合的总长度(减1)。

// 访问单个无序列表: [0] index    
var unorderedList = document.getElementsByTagName('ul')[0];    
        
// 将UL中的列表项创建为节点列表:    
var allListItems = unorderedList.getElementsByTagName('li');    
       
// 现在我们可以使用for循环遍历列表项:    
for (var i = 0, length = allListItems.length; i < length; i++) {    
    // 提取其文本节点并alert它的内容:    
    alert( allListItems[i].firstChild.data );    
}

(责任编辑：admin)

搜索

热门标签:

javascript中DOM本质及操作(4)