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

本文链接：https://blog.youkuaiyun.com/haofandedaima/article/details/108821572

文章目录

前言
正文
小结

前言

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

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

Node类型

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

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():规范化文档树中的文本节点，如果找到了空文本节点，则删除它；如果找到相邻的文本节点，则将它们合并为一个文本节点