DOM（文档对象模型）_html-js-css

1.简介

DOM（文档对象模型）提供了访问和 *** 作网页内容的方法和接口。

DOM1级规范：由DOM Core和DOM HTML两个模块组成。DOM Core规定如何映射XML的文档结构，以便简化对文档中任意部分的 *** 作。DOM HTML在DOM Core上加以扩展，添加了针对HTML的对象和方法。

2.DOM1 ①节点关系

DOM将任何HTML或XML文档描绘成一个由多层节点构成的结构。

JS中的所有节点类型都继承自Node类型，所以所有节点都有一些共同的属性和方法。
每个节点都有一个nodeType属性，用于表明节点的类型，共有12种。
我们也可以使用nodeName和nodeValue属性查看节点信息。

(1)每个节点都有一个childNodes属性，其中保存一个NodeList对象，NodeList是一种类数组对象，保存了一组有序的节点，可通过位置下标来访问，也有length属性，但它不是Array的实例，可使用中括号或使用 item() 方法访问 NodeList 中的元素。
查询一个节点是否有子节点：利用hasChildNodes()方法或length属性

let firstChild = someNode.childNodes[0];
let secondChild = someNode.childNodes.item(1);

(2)每个节点都有一个 parentNode 属性，指向其 DOM 树中的父元素。
childNodes 列表中的每个节点都是同一列表中其他节点的同胞节点，使用 previousSibling 和 nextSibling 属性可以访问同一列表中的其它节点。
父节点的第一个及最后一个子节点有专门属性： firstChild 和 lastChild。

(3)共有属性ownerDocument是一个指向代表整个文档的文档节点的指针。

② *** 作节点

(1)appendChild() ：用于在 childNodes 列表末尾添加节点。如果添加的是文档中已经存在的节点，那么之前位置的那个节点会被移除。
(2)insertBefore() ：把节点放到 childNodes 中的特定位置，该方法接收两个参数：要插入的节点和参照节点。
(3)replaceChild() ：替换节点。该方法接收两个参数：要插入的节点和要替换的节点。(4)removeChild() ：移除节点。该这个方法接收一个参数，即要移除的节点。
(5)cloneNode() ：返回与调用它的节点一模一样的节点。该方法接收一个布尔值参数，表示是否深复制。传入true参数，会进行深复制，即复制节点及其整个子 DOM树。传入false ，则只复制调用该方法的节点。
(6)normalize()：处理文档子树中的文本节点。检测调用节点的所有后代，如果发现空文本节点，将其删除；如果两个同胞文本节点是相邻的，则将其合并为一个文本节点。

③Document 类型

浏览器中，文档对象 document 是HTMLDocument 的实例，表示整个 HTML页面。 document 是 window对象的一个属性，因此是一个全局对象。

document.documentElement：指向元素，也可以通过 childNodes 列表访问
document.body：指向元素
document.doctype 属性：指向一个DocumentType 对象，包含文档的文档类型信息，就是标签里面的一些东西，也可以通过 childNodes 列表访问
理论上，出现在标签外部的注释应该算文档的子节点，然而不同浏览器在是否解析这些注释方面存在很大差异。

document 作为 HTMLDocument 的实例，还有一些标准 Document 对象上所没有的属性：