|
|
通过 HTML DOM，您能够使用节点关系来导航节点树。
根据 W3C HTML DOM 标准，HTML 文档中的所有事物都是节点：
有了 HTML DOM，节点树中的所有节点都能通过 JavaScript 访问。
能够创建新节点，还可以修改和删除所有节点。
节点树中的节点彼此之间有一定的等级关系。
<html> <head> <title>DOM 教程</title> </head> <body> <h1>DOM 第一课</h1> <p>Hello world!</p> </body></html>
从以上的 HTML 中您能读到以下信息：
同时：
通过 JavaScript，您可以使用以下节点属性在节点之间导航：
DOM 处理中的一种常见错误是认为元素节点中包含文本。
<title id="demo">DOM 教程</title>
（上面例子中的）元素节点 <title> 不包含文本。
它包含了值为 "DOM 教程" 的文本节点。
文本节点的值能够通过节点的 innerHTML 属性进行访问：
var myTitle = document.getElementById("demo").innerHTML;访问 innerHTML 属性等同于访问首个子节点的 nodeValue：
var myTitle = document.getElementById("demo").firstChild.nodeValue;也可以这样访问第一个子节点：
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;以下三个例子取回 <h1> 元素的文本并复制到 <p> 元素中：
<html><body><h1 id="id01">我的第一张页面</h1><p id="id02">Hello!</p><script> document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;</script></body></html><html><body><h1 id="id01">我的第一张页面</h1><p id="id02">Hello!</p><script> document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;</script></body></html><html><body><h1 id="id01">我的第一张页面</h1><p id="id02">Hello!</p><script> document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;</script></body></html>在本教程中，我们使用 innerHTML 取回 HTML 元素的内容。
不过，学习以上其他的方法有助于理解 DOM 的树结构和导航。
有两个特殊属性允许访问完整文档：
<html><body><p>Hello World!</p><div><p>DOM 很有用！</p><p>本例演示 <b>document.body</b> 属性。</p></div><script> alert(document.body.innerHTML);</script></body></html>
<html><body><p>Hello World!</p><div><p>DOM 很有用！</p><p>本例演示 <b>document.documentElement</b> 属性。</p></div><script>alert(document.documentElement.innerHTML);</script></body></html>
nodeName 属性规定节点的名称。
<h1 id="id01">我的第一张网页</h1><p id="id02">Hello!</p><script>document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;</script>注释：nodeName 总是包含 HTML 元素的大写标签名。
nodeValue 属性规定节点的值。
nodeType 属性返回节点的类型。nodeType 是只读的。
<h1 id="id01">我的第一张网页</h1><p id="id02">Hello!</p><script>document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;</script>最重要的 nodeType 属性是：
| 节点 | 类型 | 例子 |
|---|---|---|
| ELEMENT_NODE | 1 | <h1 class="heading">W3School</h1> |
| ATTRIBUTE_NODE | 2 | class = "heading" （弃用） |
| TEXT_NODE | 3 | W3School |
| COMMENT_NODE | 8 | <!-- 这是注释 --> |
| DOCUMENT_NODE | 9 | HTML 文档本身（<html> 的父） |
| DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
Type 2 在 HTML DOM 中已弃用。XML DOM 中未弃用。