DOM详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37957971/article/details/82662876

本文详细介绍了DOM（文档对象模型）的概念及其在HTML文档中的应用。通过解析DOM树结构，文章阐述了如何使用JavaScript操作文档中的不同元素类型，如Element、Text、Comment等，并提供了关于节点操作的具体方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM
文档对象模型
Document Object Model
将HTML中的文档都抽象成一个节点
将整篇html文档称作一个文档

html:父元素 子节点
    head 子节点
    body  子节点
    head和body互为兄弟节点
    DOM树
         html
         |  |
      head  body
      |  |
   title meta

html中的任意东西都是一个节点

Document类型   文档类型  document
Element类型    元素类型  div  span
Text类型       文本类型  body-->hello
Comment类型    注释类型  <!--注释-->

Node类型是以上类型的父构造函数：
nodeType
9-Document
1-Element
3-Text
8-Comment
nodeValue
节点值，一般元素节点的值是null
可以用在注释上，是注释的内容，Text上。
nodeName
节点名称，一般用在元素节点上，返回的是大写的元素名称
childNodes
document.body.childNodes
返回子节点组成的类数组对象的NodeList，包括Element,Text,Comment类型
[0]
.item(0)

类数组转换为数组：**
Array.prototype.slice.call(类数组对象,参数列表);
Array.prototype.slice.apply(类数组对象,参数数组)

     firstChild
        返回NodeList中的第一个，在0号位置上
     lastChild 
         返回NodeList中的最后一个，在最后的位置上
     nextSibling
         返回NodeList中的下一个兄弟节点
     previousSibling
         返回NodeList中的上一个兄弟节点
     parentNode
         返回父节点
         同一个NodeList中的子节点，有同一个父节点
     hasChildNodes()
         返回true/false,判断是否有孩子节点

用父节点来调用以下4个方法：

     父节点.appendChild(孩子节点)
          追加孩子节点到末尾
     父节点.insertBefore(要插入的点，参考位置的节点)
          在参考节点位置之前添加【插入的点】
     父节点.replaceChild(新节点,旧节点)
          以新节点替换旧节点
     父节点.removeChild(要删除的点)
          将要删除的点删除

     节点.cloneNode(true/false);
          复制节点/创建节点的副本
          如果参数是true，深复制，复制元素和后代，即复制节点以及整个子节点数。
          如果参数是false，浅复制，只复制该元素，不复制后代
          该方法不复制事件
     父节点.normalize()
          将相邻的Text合并
     HTMLCollection-->父构造函数是谁？