JavaScript HTML DOM 导航
使用 HTML DOM，您可以使用节点关系在节点树中导航。
DOM 节点
根据 W3C HTML DOM 标准，HTML 文档中的所有内容都是节点
- 整个文档是一个文档节点
- 每个 HTML 元素都是一个元素节点
- HTML 元素中的文本是文本节点
- 每个 HTML 属性都是一个属性节点（已弃用）
- 所有注释都是注释节点
使用 HTML DOM，所有节点树中的节点都可以通过 JavaScript 访问。
可以创建新节点，所有节点都可以修改或删除。
节点关系
节点树中的节点之间存在层次关系。
术语父节点、子节点和兄弟节点用于描述这些关系。
- 在节点树中，顶层节点称为根（或根节点）
- 每个节点只有一个父节点，除了根（没有父节点）
- 一个节点可以有多个子节点
- 兄弟节点（兄弟或姐妹）是具有相同父节点的节点
<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 第一课</h1>
<p>你好，世界！</p>
</body>
</html>
从上面的 HTML 中，您可以看到
<html>是根节点<html>没有父节点<html>是<head>和<body>的父节点<head>是<html>的第一个子节点<body>是<html>的最后一个子节点
并且
<head>只有一个子节点：<title><title>只有一个子节点（一个文本节点）："DOM 教程"<body>有两个子节点：<h1>和<p><h1>只有一个子节点："DOM 第一课"<p>只有一个子节点："你好，世界！"<h1>和<p>是兄弟节点
在节点之间导航
您可以使用以下节点属性来使用 JavaScript 在节点之间导航
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
子节点和节点值
DOM 处理中的一个常见错误是期望一个元素节点包含文本。
例子
<title id="demo">DOM 教程</title>
元素节点 <title>（在上面的例子中）不包含文本。
它包含一个文本节点，其值为 "DOM 教程"。
可以通过节点的 innerHTML 属性访问文本节点的值
myTitle = document.getElementById("demo").innerHTML;
访问 innerHTML 属性与访问第一个子节点的 nodeValue 相同
myTitle = document.getElementById("demo").firstChild.nodeValue;
访问第一个子节点也可以像这样完成
myTitle = document.getElementById("demo").childNodes[0].nodeValue;
所有 (3) 个以下示例都检索 <h1> 元素的文本，并将其复制到 <p> 元素中
例子
<html>
<body>
<h1 id="id01">我的第一个页面</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>
</body>
</html>
自己尝试 »
例子
<html>
<body>
<h1 id="id01">我的第一个页面</h1>
<p id="id02"></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
在本教程中，我们使用 innerHTML 属性来检索 HTML 元素的内容。
但是，学习上面的其他方法对于理解 DOM 的树结构和导航很有用。
DOM 根节点
有两个特殊的属性允许访问整个文档
document.body- 文档的主体document.documentElement- 整个文档
例子
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>显示 document.body</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>
</body>
</html>
自己尝试 »
例子
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>显示 document.documentElement</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>
</body>
</html>
自己尝试 »
nodeName 属性
The nodeName property specifies the name of a node.
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 是属性名
- 文本节点的 nodeName 始终为 #text
- 文档节点的 nodeName 始终为 #document
例子
<h1 id="id01">我的第一个页面</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>
自己尝试 »
注意： nodeName 始终包含 HTML 元素的大写标签名。
nodeValue 属性
The nodeValue property specifies the value of a node.
- 元素节点的 nodeValue 为
null - 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
nodeType 属性
The nodeType property is read only. It returns the type of a node.
例子
<h1 id="id01">我的第一个页面</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>
自己尝试 »
最重要的 nodeType 属性是
| 节点 | 类型 | 例子 |
|---|---|---|
| ELEMENT_NODE | 1 | <h1 class="heading">W3Schools</h1> |
| ATTRIBUTE_NODE | 2 | class = "heading" (已弃用) |
| TEXT_NODE | 3 | W3Schools |
| COMMENT_NODE | 8 | <!-- 这是一条评论 --> |
| DOCUMENT_NODE | 9 | HTML 文档本身（<html> 的父节点） |
| DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
类型 2 在 HTML DOM 中已弃用（但仍然有效）。它在 XML DOM 中没有被弃用。
