JS访问DOM节点方法详解
本文实例讲述了JS访问DOM节点方法。分享给大家供大家参考，具体如下：
查找并访问节点
你可通过若干种方法来查找您希望操作的元素：
通过使用getElementById()和getElementsByTagName()方法
通过使用一个元素节点的parentNode、firstChild以及lastChild属性
getElementById()和getElementsByTagName()
getElementById()和getElementsByTagName()这两种方法，可查找整个HTML文档中的任何HTML元素。
这两种方法会忽略文档的结构。假如您希望查找文档中所有的<p>元素，getElementsByTagName()会把它们全部找到，不管<p>元素处于文档中的哪个层次。同时，getElementById()方法也会返回正确的元素，不论它被隐藏在文档结构中的什么位置。
这两种方法会像您提供任何你所需要的HTML元素，不论它们在文档中所处的位置！
getElementById()可通过指定的ID来返回元素：
getElementById()语法
document.getElementById("ID");
注释：getElementById()无法工作在XML中。在XML文档中，您必须通过拥有类型id的属性来进行搜索，而此类型必须在XMLDTD中进行声明。
getElementsByTagName()方法会使用指定的标签名返回所有的元素（作为一个节点列表），这些元素是您在使用此方法时所处的元素的后代。
getElementsByTagName()可被用于任何的HTML元素：
getElementsByTagName()语法
document.getElementsByTagName("标签名称");
或者：
document.getElementById('ID').getElementsByTagName("标签名称");
实例1
下面这个例子会返回文档中所有<p>元素的一个节点列表：
document.getElementsByTagName("p");
实例2
下面这个例子会返回所有<p>元素的一个节点列表，且这些<p>元素必须是id为"maindiv"的元素的后代：
document.getElementById('maindiv').getElementsByTagName("p");
节点列表（nodeList）
当我们使用节点列表时，通常要把此列表保存在一个变量中，就像这样：
varx=document.getElementsByTagName("p");
现在，变量x包含着页面中所有<p>元素的一个列表，并且我们可以通过它们的索引号来访问这些<p>元素。
注释：索引号从0开始。
您可以通过使用length属性来循环遍历节点列表：
varx=document.getElementsByTagName("p");
for(vari=0;i<x.length;i++)
{
//dosomethingwitheachparagraph
}
您也可以通过索引号来访问某个具体的元素。
要访问第三个<p>元素，您可以这么写：
vary=x[2];
parentNode、firstChild以及lastChild
这三个属性parentNode、firstChild以及lastChild可遵循文档的结构，在文档中进行“短距离的旅行”。
请看下面这个HTML片段：
<table> <tr> <td>John</td> <td>Doe</td> <td>Alaska</td> </tr> </table>
在上面的HTML代码中，第一个<td>是<tr>元素的首个子元素（firstChild），而最后一个<td>是<tr>元素的最后一个子元素（lastChild）。
此外，<tr>是每个<td>元素的父节点（parentNode）。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript替换操作技巧总结》、《JavaScript传值操作技巧总结》、《javascript编码操作技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。