访问DOM节点2——getElementsByTagName()

getElementsByTagName()

使用上一节介绍的getElementById()的方法，一次只能访问一个节点，原因很简单，它是以HTML中的id来作为选择条件的。DOM中提供了另一种选中批量节点的方法——getElementsByTagName()则。它以标签作为选择的条件，例如，下面的JavaScript代码将会选中当前网页中的所有段落。

document.getElementsByTagName("p")

根据上一节的经验，我们似乎可以马上对这些段落进行一些操作了。不过，getElementsByTagName()返回的并不是一个节点，而是一个节点列表。所以如果我们想对上面代码取得的所有段落进行操作，方式也会有所不同。还是来看一个例子吧。

使用getElementsByTagName()的实例

<script type="text/javascript">
function allPara(){
//paras存储所有段落
paras = document.getElementsByTagName("p");
//paraNum循环变量，用于选中每个单独的段落
var paraNum;
//从零开始循环，paras.length是段落节点的个数
for (var paraNum=0;paraNum<paras.length;paraNum++)
 { 
  //操作：给段落设置边框。
  paras[paraNum].style.border = "1px dashed pink";	
 }
}
</script>

关于这段代码的解释，已经写在注释里了。点击下面的按钮试验一下吧。

结合使用getElementById()和getElementsByTagName()

有时候我们可能不希望选中网页中的所有的段落，而是选中特定部分的段落(或者是其它元素)。其实我们可以借用以上两个函数来实现，例如如下的代码就会先找到id为content的元素，再进一步选中它内部的段落。

cparas = document.getElementById("content").getElementsByTagName("p");
    

点击一下下面的按钮，就可以看到都选中的哪些段落。留意本页左上角那个有边框而没有设置背景颜色的段落。由于它没有在id为content的div内，所以没有被选中。