DOM结构

一，DOM介绍

1.浏览器会把HTML文档解析成一个树结构，并且在此基础上定义了访问和操作 HTML 文档的标准。根据W3C标准我们称之为HTML DOM(Document Object Model)文档对象模型。

2.浏览器内置HTMLElement构造函数，每个dom节点都是HTMLElement构造函数的一个实例。

3.HTML 文档中的所有内容都是节点，且有以下几个类型。

（1）整个文档是一个文档对象 (在javascript中以document表示)

（2）每个 HTML 元素是元素节点

（3）HTML 元素内的文本是文本节点

（4）每个 HTML 属性是属性节点

（5）注释是注释节点

4.一个节点就是一个对象，包含了描述这个节点的信息。

二，javaScript DOM

1.javaScript 有自己的一套DOM编程接口，一个页面的所有节点均可通过 JavaScript 进行访问，创建，删除和修改

三，获取元素节点

api	介绍
document.getElementById()	根据元素的id属性来获得一个元素节点
document.getElementsByClassName()	根据元素的class属性来获得一个存放元素节点的类数组HTMLCollection
document.getElementsByTagName()	根据元素的标签名来获得一个存放元素节点的类数组
document.getElementsByName()	根据元素的name属性来获得一个存放节点的类数组
document.querySelector()	根据选择器获取第一个匹配到的元素节点
document.querySelectorAll()	根据选择器返回匹配到的元素的类数组
document.documentElement	获取html元素
document.body	获取body元素
document.head	获取head元素

四，获取节点的亲属节点

1.当我们获取到某个节点currentNode，

<div id='cur'></div>

let currentNode=document.getElementById('cur')

2.基于这个节点我们可以获取其子节点，父节点等

属性	介绍
parentNode	获取父元素节点对象
children	获取所有子元素节点对象，只包含HTML元素。返回HTMLCollection类数组
childNodes	返回当前元素所有子节点对象（nodelist），包括文本，HTML，换行
firstElementChild	返回第一个元素子节点，等于children[0]
lastElementChild	返回最后一个元素子节点，等于children[children.length-1]
firstNode	返回第一个子节点对象，等于currentNode.childNodes[0]
lastNode	返回最后一个子节点对象，等于currentNode.childNodes[length-1]
nextSibling	返回下一个同胞（处于同一级）节点对象
previousSibling	返回上一个同胞（处于同一级）节点对象

3.子节点指的是直接子节点不包含孙子节点等，父节点同。要访问某个节点的祖父节点，可以使用ele.parentNode.parentNode

五，操作节点属性

1.获取元素节点某个属性值：getAttribute()

<a id='node' href='xxx'></a>

let node = document.getElementById("node")
node.getAttribute("href") 

2.设置属性值：setAttribute()

node.setAttribute("href", '11111')
node.setAttribute({href:'11111',download:'1111.zip'})

3.删除属性值：removeAttribute()

node.removeAttribute("href")

六，插入元素节点

1.我们可以使用js的dom编程，动态插入元素节点

2.第一步使用 createElement创建元素节点

let link = document.createElement("a")

3.之后可以使用appendChild或insertBefore追加进dom树

//往元素的末尾插入新增节点
document.body.appendChild(link )
//往元素的`ref`子节点。插入新增节点。
document.body.insertBefore(link，ref)

七，删除元素节点

1.使用 removeChild() 来删除已知节点

document.body.removeChild(link)

八，修改元素节点

1.使用 replaceChild() 来修改节点

let newlink = document.createElement('a')
document.body.replaceChild(newlink，link)

九，获取节点的类型,名称和值

1.使用节点对象的nodeType属性可以获得节点类型。1为元素节点 2为属性节点 3为文本节点

2.使用节点对象的nodeName属性可以获得节点的名称。文本节点的 nodeName 总是 #text

3.使用节点对象的nodeValue属性可以获得节点的值。元素节点没有节点值，值为null,文本节点的节点值就是文本，属性节点的节点值就是该属性值

十，修改css样式

1.可以直接使用node.style.xxx=xxx来修改样式。

link.style.display = 'none'

十一，操作class

1.我们可以使用node.className='xxxx' 可以动态为元素添加一个类名，注意不是追加，会完整替换原本的class

2.要进行复杂操作时，在dom对象里有classList对象，可以操作dom的class

（1）新增：node.classList.add(className)

（2）删除：node.classList.remove(className)

（3）切换：node.classList.toggle(className)

（4）判断是否包含某个类：node.classList.contain(className)

<div class='a b'></div>
let node = document.getElementById("node")

node.classList.contain('a') //true
node.classList.add('c')
node.classList.remove('b')
node.classList.toggle('d')

//经过上面的操作后，最终的class
<div class='a c d'></div>