JavaScript 67 JavaScript HTML DOM 67.11 JavaScript HTML DOM 导航

JavaScript 67 JavaScript HTML DOM 67.11 JavaScript HTML DOM 导航
JavaScript
文章目录
- JavaScript
 67 JavaScript HTML DOM
 67.11 JavaScript HTML DOM 导航
 67.11.1 DOM 节点
 67.11.2 节点关系
 67.11.3 在节点之间导航
 67.11.4 子节点和节点值
 67.11.5 InnerHTML
 67.11.6 DOM 根节点
 67.11.7 nodeName 属性
 67.11.8 nodeValue 属性
 67.11.9 nodeType 属性
67 JavaScript HTML DOM

67.11 JavaScript HTML DOM 导航

通过 HTML DOM，能够使用节点关系来导航节点树。

67.11.1 DOM 节点

根据 W3C HTML DOM 标准，HTML 文档中的所有事物都是节点：
- 整个文档是文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 所有注释是注释节点
有了 HTML DOM，节点树中的所有节点都能通过 JavaScript 访问。

能够创建新节点，还可以修改和删除所有节点。

67.11.2 节点关系

节点树中的节点彼此之间有一定的等级关系。
- 术语（父、子和同胞，parent、child 以及 sibling）用于描述这些关系。
- 在节点树中，顶端节点被称为根（根节点）。
- 每个节点都有父节点，除了根（根节点没有父节点）。
- 节点能够拥有一定数量的子
- 同胞（兄弟或姐妹）指的是拥有相同父的节点。
【举个栗子】
```
<html>

 <head>
 <title>DOM 教程title>
 head>

 <body>
 <h1>DOM 第一课h1>
 Hello world!p>
 body>

html> 
1
2
3
4
5
6
7
8
9
10
11
12
```
从以上的 HTML 中您能读到以下信息：
- 是根节点
- 没有父
- 是和的父
- 是的第一个子
- 是的最后一个子
同时：
- 有一个子：</li><li><title> 有一个子（文本节点）：“DOM 教程”</li><li><body> 有两个子：<h1> 和 </li><li><h1> 有一个子：“DOM 第一课”</li><li> 有一个子：“Hello world!”</li><li><h1> 和 是同胞</li></ul> <h6><a id="67113__122"></a>67.11.3 在节点之间导航</h6> 通过 JavaScript，开发者可以使用以下节点属性在节点之间导航： <ul><li>parentNode</li><li>childNodes[nodenumber]</li><li>firstChild</li><li>lastChild</li><li>nextSibling</li><li>previousSibling</li></ul> <h6><a id="67114__139"></a>67.11.4 子节点和节点值</h6> DOM 处理中的一种常见错误是认为元素节点中包含文本。 【举个栗子】 <pre data-index="1" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><title id="demo">DOM 教程
 - 1
 （上面例子中的）元素节点不包含文本。 它包含了值为 “DOM 教程” 的文本节点。【OMG】 文本节点的值能够通过节点的 <code>innerHTML</code> 属性进行访问： <pre data-index="2" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">var myTitle = document.getElementById("demo").innerHTML; <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 访问 innerHTML 属性等同于访问首个子节点的 <code>nodeValue</code>： <pre data-index="3" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">var myTitle = document.getElementById("demo").firstChild.nodeValue; <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 也可以这样访问第一个子节点： <pre data-index="4" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;">var myTitle = document.getElementById("demo").childNodes[0].nodeValue; <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 以下三个例子取回 <code><h1></code> 元素的文本并复制到 <code></code> 元素中： ① <pre data-index="5" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><html> <body> <h1 id="id01">我的第一张页面</h1> <p id="id02">Hello!</p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML; </script> </body> </html> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li></ul></pre> <img src="https://1000bd.com/contentImg/2024/04/27/458b922f8ea13d57.png" alt="在这里插入图片描述"> ② <pre data-index="6" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><html> <body> <h1 id="id01">我的第一张页面</h1> <p id="id02">Hello!</p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue; </script> </body> </html> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li></ul></pre> <img src="https://1000bd.com/contentImg/2024/04/27/a964d1417626209f.png" alt="在这里插入图片描述"> ③ <pre data-index="7" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><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> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li></ul></pre> <h6><a id="67115_InnerHTML_270"></a>67.11.5 InnerHTML</h6> 使用 <code>innerHTML</code> 取回 HTML 元素的内容。 <h6><a id="67116_DOM__278"></a>67.11.6 DOM 根节点</h6> 有两个特殊属性允许访问完整文档： <ul><li>document.body - 文档的 body</li><li>document.documentElement - 完整文档</li></ul> 【举个栗子】 <pre data-index="8" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><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> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li></ul></pre> <img src="https://1000bd.com/contentImg/2024/04/27/e63ad6c4f6d2621e.png" alt="在这里插入图片描述"> <pre data-index="9" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><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> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li></ul></pre> <img src="https://1000bd.com/contentImg/2024/04/27/4602aff5cb2c4d68.png" alt="在这里插入图片描述"> <h6><a id="67117_nodeName__353"></a>67.11.7 nodeName 属性</h6> <code>nodeName</code> 属性规定节点的名称。 <ul><li>nodeName 是只读的</li><li>元素节点的 nodeName 等同于标签名</li><li>属性节点的 nodeName 是属性名称</li><li>文本节点的 nodeName 总是 #text</li><li>文档节点的 nodeName 总是 #document</li></ul> <pre data-index="10" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><h1 id="id01">我的第一张网页</h1> <p id="id02">Hello!</p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName; </script> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <img src="https://1000bd.com/contentImg/2024/04/27/806a14ca587b089d.png" alt="在这里插入图片描述"> <blockquote> **注释：**nodeName 总是包含 HTML 元素的大写标签名。 </blockquote> <h6><a id="67118_nodeValue__393"></a>67.11.8 nodeValue 属性</h6> <code>nodeValue</code> 属性规定节点的值。 <ul><li>元素节点的 nodeValue 是 undefined</li><li>文本节点的 nodeValue 是文本文本</li><li>属性节点的 nodeValue 是属性值</li></ul> <h6><a id="67119_nodeType__407"></a>67.11.9 nodeType 属性</h6> <code>nodeType</code> 属性返回节点的类型。<code>nodeType</code> 是只读的。 <pre data-index="11" class="set-code-show prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><h1 id="id01">我的第一张网页</h1> <p id="id02">Hello!</p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType; </script> <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre> <img src="https://1000bd.com/contentImg/2024/04/27/313288444d9d70d3.png" alt="在这里插入图片描述"> 最重要的 nodeType 属性是： <img src="https://1000bd.com/contentImg/2024/04/27/0315dee7a402da50.png" alt="在这里插入图片描述"> <blockquote> Type 2 在 HTML DOM 中已弃用。XML DOM 中未弃用。 </blockquote> </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/1362613">js为什么是单线程？</a> <a href="/Article/Index/795333">数据库原理与应用——引言（一）</a> <a href="/Article/Index/1359959">docker保存镜像出错</a> <a href="/Article/Index/647369">JAVA实训项目之学生管理系统（JDBC+GUI）</a> <a href="/Article/Index/808585">hystrix服务熔断（1）</a> <a href="/Article/Index/1392055">RPA的尽头是超自动化？</a> <a href="/Article/Index/1486321">当创建pvc后，kubernetes组件如何协作</a> <a href="/Article/Index/1194287">在linux系统中安装nginx</a> <a href="/Article/Index/631672">mysql的增删改查，mysql常用命令</a> <a href="/Article/Index/881713">Vue3+elementplus搭建通用管理系统实例六：后台主页搭建下</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/weixin_44226181/article/details/127743893 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>

JavaScript

文章目录

67 JavaScript HTML DOM

67.11 JavaScript HTML DOM 导航

67.11.1 DOM 节点

67.11.2 节点关系