第14章 DOM

DOM文档对象模型，是html和xml文档的编程接口。
节点层级

任何HTML或XML文档都可以用DOM表示为一个由节点构成的层级结构。document节点表示每个文档的根节点。根节点的唯一子节点是html元素，我们称之为文档元素（documentElement）。
Document
  Element 
    Element 
      Element 
      Element <meta>
    Element <body>
      Element <p>
        Element <a>
          Element <img>
</code></pre>
<p>html中的每段标记都可以表示为这个树形结构中的一个节点，DOM中总共有12中节点类型，这些类型都继承一种基本类型。</p>
<h3 id="Node类型">Node类型</h3>
<p>在javascript中，所有节点类型都继承自Node类型，因此所有类型都共享相同的基本属性和方法。每个节点都有nodeType属性，表示该节点的类型。</p>
<p>Node类型上的12个数值常量表示为：</p>
<ul>
<li>Node.ELEMENT_NODE <strong>元素节点 1</strong>，nodeName始终等于元素的标签名，nodeValue始终为null</li>
<li>Node.ATTRIBUTE_NODE <strong>属性节点 2</strong></li>
<li>Node.TEXT_NODE <strong>文本节点 3</strong></li>
<li>Node.CDATA_SECTION_NODE CDATA节点 4</li>
<li>Node.ENTITY_REFERENCE_NODE 实体引用节点 5</li>
<li>Node.ENTITY_NODE 实体节点 6</li>
<li>Node.PROCESSING_INSTRUCTION_NODE 注释节点 7</li>
<li>Node.COMMENT_NODE 注释节点 8</li>
<li>Node.DOCUMENT_NODE 文档节点 9</li>
<li>Node.DOCUMENT_TYPE_NODE 文档类型节点 10</li>
<li>Node.DOCUMENT_FRAGMENT_NODE 文档片段节点 11</li>
<li>Node.NOTATION_NODE 注释节点 12 nodeName与nodeValue保存着有关节点的信息。</li>
</ul>
<p>每个节点都有一个childNodes属性，其中包含一个NodeList的实例，firstChild和lastChild分别指向childNodes中的第一个和最后一个子节点。</p>
<p>每个节点都有一个parentNode属性，指向其DOM树中的父元素。 hasChildNodes()返回节点是否有子节点。</p>
<h3 id="操作节点">操作节点</h3>
<p>插入节点：</p>
<p>appendChild() 方法将一个节点添加到父节点的末尾。</p>
<p>insertBefore() 添加节点到开头。</p>
<p>替换节点：</p>
<p>replaceChild()方法接收两个参数：要插入的节点和要替换的节点。要替换的节点会被返回并从文档树中完全移除，要插入的节点会取而代之。</p>
<p>移除节点：</p>
<p>removeChild()</p>
<p>复制节点：</p>
<p>cloneNode(boolean)会返回与调用它的节点一模一样的节点，传入一个布尔，代表是否深复制，深复制会复制节点上所有子节点。返回的节点没有父亲节点，可通过appendChild插入文档中。</p>
<h2 id="Document类型">Document类型</h2>
<p>文档对象document是HTMLDocument的实例（HTMLDocument继承Document），表示整个HTML页面。</p>
<ul>
<li>nodeType等于9；</li>
<li>nodeName值为"#document"；</li>
<li>nodeValue值为null；</li>
<li>document.documentElement属性返回文档的根元素，即html标签。</li>
<li>document.body 属性返回文档的body元素，即body标签。</li>
<li>document.doctype 属性返回文档的doctype，即<!DOCTYPE>标签。</li>
<li>document.title 当前页面的标题，可修改</li>
<li>document.URL 当前页面的URL</li>
<li>…</li>
</ul>
<h2 id="Element类型">Element类型</h2>
<p>Element表示XML或HTML元素，对外暴露出访问元素标签名、子节点和属性的能力。</p>
<ul>
<li>
<p>nodeType等于1；</p>
</li>
<li>
<p>nodeName值为元素的标签名；</p>
</li>
<li>
<p>nodeValue值为null；</p>
</li>
<li>
<pre class=" language-language-html"><code class="language-language-html"><div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>
<script>
let div = document.getElementById("myDiv");
alert(div.id);           // "myDiv"
alert(div.className);   // "bd"
alert(div.title);        // "Body text"
alert(div.lang);         // "en"
alert(div.dir);          // "ltr" 语言的书写方向：从左到右
</script>
</code></pre>
<p>可以直接通过元素来修改标签的内容。</p>
<p>与属性相关的DOM方法主要有3个：getAttribute()、setAttribute()和removeAttribute()。这些方法主要用于操纵属性。属性名不区分大小写。</p>
<pre class=" language-language-js"><code class="language-language-js">let div = document.getElementById("myDiv");
alert(div.getAttribute("id"));      // "myDiv"
</code></pre>
</li>
</ul>
<p>创建元素</p>
<p>document.createElement(tag)</p>
<h2 id="Text类型">Text类型</h2>
<ul>
<li>nodeType等于3；</li>
<li>nodeName值为"#text"；</li>
<li>nodeValue值为节点中包含的文本；</li>
<li>parentNode值为Element对象；</li>
<li>不支持子节点。</li>
</ul>
<h2 id="DOM编程">DOM编程</h2>
<p>动态添加脚本</p>
<pre class=" language-language-html"><code class="language-language-html"><script src = "foo.js"></script>
</code></pre>
<pre class=" language-language-js"><code class="language-language-js"><!-- 如果使用dom进行操作 -->
let script = document.createElement("script");
script.src = "foo.js";
document.body.appendChild(script);
</code></pre>
<p>动态添加函数</p>
<pre class=" language-language-js"><code class="language-language-js">let script = document.createElement("script");
script.appendChild(document.createTextNode("function sayHi() {alert('hi~');}"));
document.body.appendChild(script);
</code></pre>
<p>动态添加样式</p>
<pre class=" language-language-js"><code class="language-language-js">let link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";
let head = document.getElementByTagName("head")[0];
head.appendChild(link);
</code></pre>
<p>动态添加style</p>
<pre class=" language-language-js"><code class="language-language-js">let style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:red}"));
let head = document.getElementsByTagName("head")[0];
head.appendChild(style);
</code></pre>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="http://zyydgrbk.top">邹阳</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://zyydgrbk.top/2023/05/08/di-14-zhang-dom/">http://zyydgrbk.top/2023/05/08/di-14-zhang-dom/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://zyydgrbk.top" target="_blank">邹阳 の 博客</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/javaScript%E9%AB%98%E7%BA%A7%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1/">javaScript高级程序设计</a></div><div class="post_share"><div class="social-share" data-image="https://zyydgrbk.oss-cn-chengdu.aliyuncs.com/images/nobackground.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2023/05/08/di-15-zhang-dom-kuo-zhan/" title="第15章 DOM扩展"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">第15章 DOM扩展</div></div></a></div><div class="next-post pull-right"><a href="/2023/05/08/di-12-zhang-bom/" title="第12章 BOM"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">第12章 BOM</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2023/05/08/di-12-zhang-bom/" title="第12章 BOM"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-05-08</div><div class="title">第12章 BOM</div></div></a></div><div><a href="/2023/05/05/di-11-zhang-qi-yue-yu-yi-bu-han-shu/" title="第11章 期约与异步函数"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-05-05</div><div class="title">第11章 期约与异步函数</div></div></a></div><div><a href="/2023/05/08/di-15-zhang-dom-kuo-zhan/" title="第15章 DOM扩展"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-05-08</div><div class="title">第15章 DOM扩展</div></div></a></div><div><a href="/2023/05/11/di-16-zhang-dom2-he-dom3/" title="第16章 DOM2和DOM3"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-05-11</div><div class="title">第16章 DOM2和DOM3</div></div></a></div><div><a href="/2023/05/16/di-17-zhang-shi-jian/" title="第17章 事件"><img class="cover" src="https://zyydgrbk.oss-cn-chengdu.aliyuncs.com/images/linyazhilv.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-05-16</div><div class="title">第17章 事件</div></div></a></div><div><a href="/2023/05/10/di-3-zhang-yu-yan-ji-chu/" title="第3章 语言基础"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-05-10</div><div class="title">第3章 语言基础</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://zyydgrbk.oss-cn-chengdu.aliyuncs.com/images/nobackground.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">邹阳</div><div class="author-info__description">Being happy is a duty!</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">57</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">20</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">10</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/"><i class="fab fa-github"></i><span>My github</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/" target="_blank" title="Github"><i class="fab fa-github" style="color: #hdhfbb;"></i></a><a class="social-icon" href="mailto:zouyang159536@163.com" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #000000;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-number">1.</span> <span class="toc-text">第14章 DOM</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8A%82%E7%82%B9%E5%B1%82%E7%BA%A7"><span class="toc-number">1.1.</span> <span class="toc-text">节点层级</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2026/05/13/yi-wen-duo-fa-zhu-shou-mvp-shi-jian-bao-gao/" title="一文多发助手MVP实践报告"><img src="https://images.unsplash.com/photo-1774624513295-a0bac2eb4661?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w5NDE2OTB8MHwxfHJhbmRvbXx8fHx8fHx8fDE3Nzg2NjQxODB8&ixlib=rb-4.1.0&q=80&w=1080" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="一文多发助手MVP实践报告"/></a><div class="content"><a class="title" href="/2026/05/13/yi-wen-duo-fa-zhu-shou-mvp-shi-jian-bao-gao/" title="一文多发助手MVP实践报告">一文多发助手MVP实践报告</a><time datetime="2026-05-13T01:23:56.000Z" title="发表于 2026-05-13 09:23:56">2026-05-13</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2026/04/26/yi-wen-duo-fa-chan-pin-diao-yan/" title="一文多发产品调研"><img src="https://s.coze.cn/t/QzHB32o9wgc/" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="一文多发产品调研"/></a><div class="content"><a class="title" href="/2026/04/26/yi-wen-duo-fa-chan-pin-diao-yan/" title="一文多发产品调研">一文多发产品调研</a><time datetime="2026-04-26T07:08:22.000Z" title="发表于 2026-04-26 15:08:22">2026-04-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2026/04/09/gei-n8n-de-ben-di-fang-wen-lian-jie-pei-zhi-cheng-gong-wang-fang-wen/" title="给n8n的本地访问链接配置成公网访问"><img src="https://zyydgrbk.oss-cn-chengdu.aliyuncs.com/images/js-封面1.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="给n8n的本地访问链接配置成公网访问"/></a><div class="content"><a class="title" href="/2026/04/09/gei-n8n-de-ben-di-fang-wen-lian-jie-pei-zhi-cheng-gong-wang-fang-wen/" title="给n8n的本地访问链接配置成公网访问">给n8n的本地访问链接配置成公网访问</a><time datetime="2026-04-09T04:28:02.000Z" title="发表于 2026-04-09 12:28:02">2026-04-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2026/03/27/bo-ke-you-hua-er/" title="博客优化二"><img src="https://zyydgrbk.oss-cn-chengdu.aliyuncs.com/images/js-封面1.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="博客优化二"/></a><div class="content"><a class="title" href="/2026/03/27/bo-ke-you-hua-er/" title="博客优化二">博客优化二</a><time datetime="2026-03-27T08:58:02.000Z" title="发表于 2026-03-27 16:58:02">2026-03-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/12/03/neuralcoref-de-an-zhuang-yu-shi-yong/" title="neuralcoref的安装与使用"><img src="https://zyydgrbk.oss-cn-chengdu.aliyuncs.com/images/Snipaste_2023-11-10_10-23-14.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="neuralcoref的安装与使用"/></a><div class="content"><a class="title" href="/2023/12/03/neuralcoref-de-an-zhuang-yu-shi-yong/" title="neuralcoref的安装与使用">neuralcoref的安装与使用</a><time datetime="2023-12-03T08:01:20.000Z" title="发表于 2023-12-03 16:01:20">2023-12-03</time></div></div></div></div></div></div></main><footer id="footer" style="background: transparent"><div id="footer-wrap"><div class="copyright">©2023 - 2026 By 邹阳</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text">Hi, this is zy's blog, welcome!</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="https://npm.elemecdn.com/vue@2.6.11"></script><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><div class="js-pjax"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css"><script src="https://cdn.jsdelivr.net/npm/katex/dist/contrib/copy-tex.min.js"></script><script>(() => {
  document.querySelectorAll('#article-container span.katex-display').forEach(item => {
    btf.wrap(item, 'div', { class: 'katex-wrap'})
  })
})()</script></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>