JavaScript DOM学习笔记4——访问指定节点

DOM中访问指定节点主要需要用到以下几个函数：

 1.getElementsByTagName(tag):

(1)用来返回一个包含指定标签的节点列表NodeList。然后可以通过前面博客中提到的数组语法（方括号）或者item(pos)来取得该NodeList中具体的那个元素。看下面的代码片段：

//获得img元素列表  
var oImgs = document.getElementsByTagName("img");  
//获取其中的第二个img标签对应的元素  
var secondImg = oImgs[1];  
//获取第三个img标签对应的元素  
var thirdImg = oImgs.item(2); 

(2)如果需要获取某个指定标签下面的所有特定标签，比如说我们需要找到第一个ul下面的所有li元素。那么可以这么使用：

var oUls = document.getElementsByTagName("ul"); 
var oLis = oUls[0].getElementByTagName("li"); 

(3)该方法还可以通过通配需进行匹配：

document.getElementsByTagName("*"); 

这种情况下，会获取到页面所有的元素。但是需要注意，IE6中这么使用是无效的，需要使用下面的方法：

document.all; 

2.document.getElementById():

    根据标签的id属性获取页面中的标签对应的元素。这个方法非常有用。由于id属性整个页面必须是唯一的，因此这是最有效的获取单个特性节点的方法。

document.getElementById("id"); 

3.document.getElementsByName():

    这个方法主要是为了获取name属性相同的一系列元素。非常典型的例子是radio button控件。

<form method="post" action="...."> 
    <input type="radio" name="radioSex" value="male"/> 
    <input type="radio" name="radioSex" value="female"/> 
</form> 

  

document.getEementsByName("radioSex"); 

 

参考书目：

《JavaScript高级编程》Nicolas C. Zakas著， 曹力 张欣 等译。