DOM

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。

浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。

DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。后面介绍的就是 JavaScript 对 DOM 标准的实现和用法

节点

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

节点的类型有七种。

Document：整个文档树的顶层节点
DocumentType：doctype标签（比如<!DOCTYPE html>）
Element：网页的各种HTML标签（比如<body>、<a>等）
Attr：网页元素的属性（比如class="right"）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段

浏览器提供一个原生的节点对象Node，上面这七种节点都继承了Node，因此具有一些共同的属性和方法。

节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，又像一棵树。

浏览器原生提供document节点，代表整个文档。

document
// 整个文档树

微信截图_20220729192209.png

文档的第一层有两个节点，第一个是文档类型节点（<!doctype html>），第二个是 HTML 网页的顶层容器标签<html>。后者构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点。

除了根节点，其他节点都有三种层级关系。

父节点关系（parentNode）：直接的那个上级节点
子节点关系（childNodes）：直接的下级节点
同级节点关系（sibling）：拥有同一个父节点的节点

DOM操作节点、操作属性一系列方法...

1、获取元素

1.1 动态获取

document.getElementById()

返回匹配id符合的元素返回的是DOM对象

document.getElementsByTagName()

根据标签名获取元素以伪数组形式返回

document.getElementsByClassName()

根据类名来获取某些元素以伪数组返回

document.getElementsByName()

根据name属性来获取第一个满足元素

1.2 静态获取

document.querySelector('.box #box')

注意符号返回指定选择器的第一个选项

document.querySelectorAll('') 根据选择器所有对象

根据选择器所有对象伪数组

getElementBy..和querySelector方法之间的区别：

1、W3C的标准不同

前者是W3C的DOM规范，后者是W3C的selector API的规范

2、兼容的浏览器不同：

前者基本上兼容所有浏览器，后者基本上兼容最新的浏览器

3、参数不同：

前者的参数是有针对性的，后者的参数就是选择器

4、返回值不同

前者在增加或删除时，会持续改变元素的长度；

而后者在增加和删除时，如果没有重新获取对象，则不会改变元素的长度

注：在没有添加和删除的时候，可以任意使用以上两种方法来获取对象

获取特殊元素

获取body元素 let a1 = document.body

获取html元素 let a2 = document.documentElement

获取head元素 let a3 = document.head

获取title元素 let a4 = document.title

2、操作元素

2.1 x.innerText

操作当前元素中所有文本内容

不识别html标签直接将标签显示出来

2.2 x.innerHtml

操作当前元素中所有内容

识别html标签

这两个属性是可读写的可以获取元素里面的内容

3、操作属性节点

3.1 对象.getAttribute()

获取当前元素对象指定属性de属性值

3.2 对象.setAttribute()

给当前元素对象添加属性和属性值

3.3 对象.removeAttribute()

删除当前元素中指定de属性

3.4 data-set

就是标签中本身没有的属性，由开发者来给元素定义的属性，被称为自定义属性

3.5 对象.style.属性=“属性值“

h1.style.color="red" ：给h1对象追加新样式

h1.style="color:red" ：会把h1对象中原有的行内样式给覆盖

3.6 className

3.7 classList

let a1 = document.querySelector('div')

1、 a1.classList.remove('box') 删除class类名

2、 a1.classList.add('box1') 追加

3、 a1.classList.length

4、 a1.classList.item(index) 下标获取

5、 a1.classList.toggle('box1') 切换

6、 a1.classList.contains('box') 检测是否存在

3.8 非行间样式获取

if(对象.currentStyle){
   let w1 = 对象.currentStyle.width
}else{
   let w1 = window.getComputedStyle(对象).width
}
console.log(w1)

DOM节点

DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点
什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点）
比如我们标签里面写的文字，那么就是文本节点
写在每一个标签上的属性，就是属性节点

元素节点

我们通过 getElementBy... 获取到的都是元素节点

属性节点

我们通过 getAttribute 获取的就是元素的属性节点

文本节点

我们通过 innerText 获取到的就是元素的文本节点

4、获取节点

1、- childNodes：获取某一个节点下 所有的子一级节点

2、- children ：获取某一节点下所有的子一级 元素节点 +

3、- firstChild：获取某一节点下子一级的 第一个节点

4、- firstElementChild：获取某一节点下子一级 第一个元素节点+

5、- lastChild：获取某一节点下子一级的 最后一个节点

6、- lastElementChild：获取某一节点下子一级 最后一个元素节点+

7、- nextSibling：获取某一个节点的 下一个兄弟节点

8、- nextElementSibling：获取某一个节点的 下一个元素节点+

9、- previousSibling：获取某一个节点的 上一个兄弟节点

10、- previousElementSibling：获取某一个节点的 上一个元素节点+

5、节点属性

| nodeType | nodeName | nodeValue |

| -------- | -------- | ---------- | --------- |

| 属性节点 | 2 | 属性名 | 属性值 |

6、操作节点

1、- createElement（）：用于创建一个元素节点

2、- createTextNode（）：用于创建一个文本节点

3、- appendChild（）：是向一个父元素节点的末尾追加一个子节点

4、- 父节点。insertBefore（新节点，某一节点）：向某一个节点前插入一个节点

5、- 父节点。removeChild（要移除的子节点）：移除某父节点下的某一个节点

6、- remove：用于从下拉列表删除选项。

7、- 父节点。replaceChild（新节点，旧节点）将页面中的某一个节点替换掉

8、- 克隆元素。cloneNode（）：克隆页面中的某一个节点

- 参数默认是false，表示只克隆自己，不克隆子元素

- 如果参数为true，连带所有后代元素一起克隆

- 返回值：就是一个被克隆好的元素

6、文档碎片

var oFrag = document.createDocumentFragment();

当我们需要大量 appendChild 页面元素时，可以先将这些元素 appendChild 进 document.createDocumentFragment。

7、元素尺寸获取

clientWidth / clientHeight

元素内容+ padding

offsetWidth / offetHeight

元素内容+ padding+ border

clientLeft / clientTop

左边框上边框

8、元素偏移量

offsetLeft /offsetTop

元素水平和垂直偏移量注意父元素定位有根据父无根据浏览器左上角。

DOM

DOM

节点

节点树