你真的知道DOM吗?（上）----(节点层次，DOM集合，Node类型）

╰+攻爆jí腚メ 2022-12-10 14:58 174阅读 0赞

### 文章目录 ###

*  前言
 *  正文
 *   *  节点层次
     *  HTMLCollection和NodeList
     *  Node类型
     *   *  nodeName和nodeValue属性
         *  节点关系
         *  操作节点
 *  小结

# 前言 #

DOM（文档对象模型）是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加，移除和修改页面的某一部分。可以说，DOM是前端开发中最重要的一个渲染API，它决定了页面的样式结构的走向。

# 正文 #

## 节点层次 ##

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构，总共有12种节点类型，这些类型都继承自一个基类型，因为其中有些节点只用于XML，本文只对针对HTML的节点做一个具体介绍，感兴趣的同学可以自己去了解剩余节点

*  元素节点(element): 对应网页的HTML标签元素
 *  特性节点(attribute):对应HTML标签属性
 *  文本节点(text):代表网页中HTML标签内容
 *  注释节点(comment):表示网页中的HTML注释
 *  文档节点(document):表示HTML文档，也称为根节点，HTML文档的文档节点只有一个子节点，即`<html>`元素，称之为文档元素
 *  文档类型节点(documentType):包含着与文档的doctype有关的所有信息
 *  DTD声明节点(notation)：代表DTD中声明的符号

上面是关于HTML的相关DOM节点，下面将对上述节点做一个具体介绍

## HTMLCollection和NodeList ##

在了解节点类型之前，我想大家应该先对HTMLCollection和NodeList有一定的了解

var collection = document.getElementByTagName('div'), // HtmlCollection
    	list = collection.childNodes; // NodeList

<table> 
 <thead> 
  <tr> 
   <th>相同点</th> 
   <th>不同点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>都有length属性,都是类数组</td> 
   <td>1） NodeList是一个节点的集合，既可以包含元素和其他节点(注释节点、文本节点等)。<br>2）HTMLCollection是元素集合, 只有Element节点</td> 
  </tr> 
 </tbody> 
</table>

## Node类型 ##

DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现。js中的所有节点类型都继承自Node类型，因此所有的节点类型都共享着相同的基本属性和方法。  
       \*\*每个节点都有一个nodeType属性，用于表示节点类型。\*\*节点类型由在Node类型中定义的下列12个数值常量来表示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]

### nodeName和nodeValue属性 ###

每个节点都继承了nodeName和nodeValue属性去区分节点的具体信息，后面再介绍各个节点的时候会具体说明

### 节点关系 ###

*  childNodes属性：每个节点都有一个childNodes属性，其中保存一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。**NodeList对象的特别之处在于它是动态的，即DOM的结构变化能够自动反应在NodeList中**
 *  parentNode属性：指向该节点在文档树中的父节点
 *  previousSibling属性：指向该节点在文档树中的前一个同胞节点
 *  nextSibiling属性：指向该节点在文档树中的后一个同胞节点
 *  firstChild属性：指向该节点在文档树中的第一个子节点
 *  lastChild属性：指向该节点在文档树中的最后一个子节点

childNodes属性与其他属性相比更方便一些，因为只需使用简单的关系指针，就可以通过它访问文档树中的任何节点

### 操作节点 ###

*  appendChild():用于向childNodes列表的**末尾**添加一个节点。如果传入appendChild中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置，**任何DOM节点也不能同时出现在文档上的多个位置上**
 *  insertBefore():把节点放到childNodes列表中某个特定的位置上。接受两个参数：要插入的节点和作为参数的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling)，返回插入节点
 *  replaceChild():替换特定节点，接受两个参数：要插入的节点和要替换的节点
 *  removeChild():移除特定节点，
 *  cloneNode():创建调用这个方法的节点的一个完全相同的副本，接受一个布尔值参数，表示是否执行深复制。在参数为true的情况下，执行深复制，也就是复制节点及整个子节点树，在参数为false的情况下，执行浅复制，也就是复制节点本身。**cloneNode()方法不会复制添加到DOM节点中的js属性，例如事件处理程序等。会复制特性，子节点，其他一切都不会复制**
 *  normalize():规范化文档树中的文本节点，如果找到了空文本节点，则删除它；如果找到相邻的文本节点，则将它们合并为一个文本节点

# 小结 #

1、DOM是语言中立的API，用于访问和操作HTML和XML文档。  
       2、DOM1级将HTML和XML文档形象地堪称一个层次化地节点树，可以用js来操作这个节点树，进而改变底层文档的外观和结构  
       3、最基本的节点类型是Node类型，用于抽象地表示文档中一个独立的部分。所有其他类型都继承自Node

小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！  
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/bb905be1649b4ff1ae2043dd272c5b22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/deb4d66813644e669fe26777a895b504.png