什么是DOM

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。 DOM 提供了一种表述形式— 将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将 web 页面和脚本或编程语言连接起来了。

尽管通常会使用 JavaScript 来访问 DOM， 但它并不是 JavaScript 的一部分，它也可以被其他语言使用.

用DOM来获取元素

1.CSS选择器 查找参数

document.querySelector('')  
Element.querySelector('')  

可以使用css的选择器作为参数 , 返回匹配该选择器的元素节点 . 如果有多个节点满足匹配条件，则返回第一个匹配的节点 如果没有发现匹配的节点，则返回null。

element返回一个NodeList对象，包含所有匹配的子元素

2.CSS选择器 查找选择全部参数

document.querySelectorAll('')
Element.querySelectorAll('')

回一个NodeList对象，包含所有匹配给定选择器的节点。
Element.querySelectorAll方法接受CSS选择器作为参数，返回一个NodeList对象，包含所有匹配的子元素

3.指定目标元素

document.getElementsByTagName('')

返回所有指定HTML标签的元素，返回值是一个类似数组的HTMLCollection对象，可以实时反映HTML文档的变化

4.指定class

document.ElementsByClassName('')
Element.getElementsByClassName('')

返回一个类似数组的对象（HTMLCollection实例对象），包括了所有class名字符合指定条件的元素
Element.getElementsByClassName() 搜索当前节点

5.选择name属性

document.ElementsByName('')
Element.getElementsByClassName('')

用于选择拥有name属性的HTML元素 , 如果没有发现匹配的节点，则返回null。

6.选取ID

document.getElementById('')

7.返回位于页面指定位置最上层的Element子节点

document.elementFromPoint()

elementFromPoint方法的两个参数，依次是相对于当前视口左上角的横坐标和纵坐标，单位是像素。如果位于该位置的HTML元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值或超过视口大小），则返回null。

8.closest

Element.closest()

返回当前元素节点的最接近的父元素（或者当前节点本身），条件是必须匹配给定的CSS选择器。如果不满足匹配，则返回null

生成节点

1. createElement

document.createElement('div')

这样就相当于创建了一个div标签

2.createAttribute

var div = document.createElement('div')
var name = document.createAttribute('class')  <---
name.value = 'thisisdiv'
div.setAttributeNode(name)
//相当于写了
<div class='thisisdiv'></div>

createAttribute方法的参数name，是属性的名称。
上面的例子就相当于给div加上相当于class属性,属性值是thisisdiv

3.createTextNode

var newDiv = document.createElement('div');
var newContent = document.createTextNode('Hello');
newDiv.appendChild(newContent);
//相当于写了
<div>Hello</div>

用来生成文本节点，参数为所要生成的文本节点的内容

4.createDocumentFragment

var docFragment = document.createDocumentFragment

生成一个DocumentFragment对象
DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现

删除

1.Element.removeAttribute()

Element.removeAttribute('')

从当前元素节点移除属性。

2.Element.remove()

var el = document.getElementById('xxx');
el.remove();

Element.remove方法用于将当前元素节点从DOM树删除

3.removeProperty()

var div = document.getElementsByTagName('div')
div.style.removeProperty('background-color');

删除div的一个样式 背景颜色 .

修改

1.Element.innerHTML
Element.innerHTML属性返回该元素包含的HTML代码。该属性可读写，常用来设置某个节点的内容。
如果将该属性设为空，等于删除所有它包含的所有节点

2.style 修改CSS样式

document.getElementById("xxx").style.backgroundColor="blue"

上面的代码 , 把xxx修改它的 style , 背景颜色为 blue