什么是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
生成节点
- 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
