设为首页
添加收藏HTML DOM 访问节点
通过HTML DOM，我们可以访问HTML文档中的任何一个节点node。
访问节点nodes
你可以通过以下三种方式访问一个节点node：
- getElementById() 方法
- getElementsByTagName() 方法
- 通过节点树导航，应用节点之间的关系node relationships
getElementById()方法
getElementById()方法返回指定ID的元素。语法如下：
node.getElementById("id");
下面的实例获取id为"intro"的元素：
document.getElementById("intro");
注意：getElementById()方法在XML中不支持。
getElementsByTagName() 方法
getElementsByTagName() 方法返回指定标签名tag name的所有元素。语法如下：
node.getElementsByTagName("tagname");
下面的实例返回文档中所有的<p>标签节点列表nodeList。
document.getElementsByTagName("p");
下面的实例返回一个<p>标签的节点列表nodeList，<p>标签必须是id为"main"的元素的子元素descendants。
document.getElementById('main').getElementsByTagName("p");
DOM 节点表node list
getElementsByTagName() 方法返回一个节点列表node-list。node-list是一个数组元素为节点的数组。
下面的代码从一个document中选择所有的<p>节点，返回node-list。
x=document.getElementsByTagName("p");
这样每个节点就可以通过数组的下标索引值index number来访问了。比如要访问第二个节点，就可以用y=x[1];
注意：索引下标是从0开始的。在教程的后面章节中我们将了解更多关于node-list的知识。
DOM 节点列表的长度 Node List Length
length属性定义了一个节点列表node-list中的节点数量。
通过使用length属性，你可以循环遍历整个节点列表node-list。举例如下：
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
</div>
</body>
</html>
在上面的实例中：
- 1. 获取所有的 <p> 元素节点nodes
- 2. 循环遍历 <p> 元素, 输出它的文本节点text node的值
节点关联导航
在一个文档中，根据文档结构，parentNode, firstChild, 和 lastChild 这三个属性允许短距离的访问。看下面的HTML代码：
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
</div>
</body>
</html>
在上面的HTML代码中，第一个<p>元素是body元素的第一个子节点child node(firstChild)，div元素是body元素的最后一个子节点child node(lastChild)。第一个p元素和div元素的父节点parent node (parentNode)是body元素。在div元素里的p元素的父节点parent node是这个div元素。
firstChild属性同样可以用来访问一个元素的文本text。看下面的实例
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
DOM 根节点Root Nodes
有两种特殊的document属性允许访问标签tags。
- document.documentElement - 返回document文档的根节点 root node
- document.body - 直接访问 <body> 标签。
HTML DOM 节点信息