文章目录
JavaScript HTML DOM 导航
使用 HTML DOM，您可以使用节点关系导航节点树。
DOM 节点
根据 W3C HTML DOM 标准，HTML 文档中的所有内容都是节点：
整个文档都是文档节点
每个 HTML 元素都是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性都是属性节点（已弃用）
所有注释都是注释节点
DOM HTML 树
使用 HTML DOM，JavaScript 可以访问节点树中的所有节点。
可以创建新节点，并且可以修改或删除所有节点。
节点关系
节点树中的节点彼此具有层次关系。
使用父级、子级和兄弟级术语来描述关系。
在节点树中，顶部节点称为根节点（或根节点）
每个节点只有一个父节点，除了根节点（没有父节点）
一个节点可以有多个子节点
兄弟节点（兄弟姐妹）是具有相同父节点的节点
<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 第一课</h1>
<p>Hello world!</p>
</body>
</html>
节点树
从上面的 HTML 中您可以看到：
<html> 是根节点
<html> 没有父节点
<html> 是 <head> 和 <body> 的父节点
<head> 是 <html> 的第一个子节点
<body> 是 <html> 的最后一个子节点
并且：
<head> 有一个子节点：<title>
<title> 有一个子节点（文本节点）：“DOM 教程”
<body> 有两个子节点：<h1> 和 <p>
<h1> 有一个子节点： “DOM Lesson one”
<p> 有一个子节点：“Hello world!”
<h1> 和 <p> 是兄弟节点
在节点之间导航
您可以使用以下节点属性通过 JavaScript 在节点之间导航：
parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling
子节点和节点值
DOM 处理中的一个常见错误是期望元素节点包含文本。
示例：
<title id="demo">DOM Tutorial</title>
元素节点 <title>（在上面的示例中）不包含文本。
它包含一个值为“DOM Tutorial”的文本节点。
可以通过节点的 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">My First Page</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">你好！</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 属性
nodeName 属性指定节点的名称。
nodeName 是只读的
元素节点的 nodeName 与标签名称相同
属性节点的 nodeName 是属性名称
文本节点的 nodeName 始终为 #text
文档节点的 nodeName 始终为 #document
示例
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>
注意：nodeName 始终包含 HTML 元素的大写标签名称。
nodeValue 属性
nodeValue 属性指定节点的值。
元素节点的 nodeValue 为 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
nodeType 属性
nodeType 属性是只读的。它返回节点的类型。
示例
<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> |
总结
本文介绍了JavaScript HTML DOM 导航的使用，如有问题欢迎私信和评论
标签：DOM,必知,JavaScript,innerHTML,getElementById,HTML,document,节点 From： https://blog.csdn.net/qq_24018193/article/details/144459383