JavaScript的DOM操纵
什么是 DOM?
文档对象模子 (DOM) 是HTML和XML文档的编程接口。它供应了对文档的构造化的表述，并定义了一种体式格局可以使从顺序中对该构造举行接见，从而转变文档的构造，款式和内容。DOM 将文档剖析为一个由节点和对象（包括属性和要领的对象）构成的构造鸠合。
为简朴起见，在API参考文档中的语法实例通常会运用element(s) 指代节点，运用nodeList（s）或 element(s)来指代节点数组，运用 attribute(s)来指代属性节点。
在 HTML DOM (Document Object Model) 中 , 每个元素都是 节点:
文档是一个文档。
一切的HTML元素都是元素节点。
一切 HTML 属性都是属性节点。
文本插进去到 HTML 元素是文本节点。
DOM 建立
document.createElement 建立元素节点
document.createAttribute 建立一个属性节点
document.createTextNode 建立文本节点
DOM 查询
querySelector
//返回婚配的第一个元素querySelectorAll
//返回婚配的元素鸠合document.getElementById
document.getElementsByClassName
document.getElementsByTagName
element.parentNode
//父节点element.firstChild
//第一个子元素节点element.lastChild
//末了一个子元素节点element.previousSibling
//上一个元素节点element.nextSibling
//下一个元素节点
DOM 变动
element.insertBefore()
//在指定的已有的子节点之前插进去新节点。element.appendChild()
//向元素增加新的子节点，作为末了一个子节点。element.removeChild()
//移除子节点element.cloneNode(deep)
cloneNode() 要领建立节点的拷贝，并返回该副本。
cloneNode() 要领克隆一切属性以及它们的值。
假如须要克隆一切子女，把 deep 参数设置 true，不然设置为 false。
element.replaceChild(newnode,oldnode)
//替代元素中的子节点。
属性操纵
element.attributes
//返回元素属性的 NamedNodeMap。element.getAttribute()
//返回指定属性值。element.hasAttribute()
//元素是不是具有指定属性。element.setAttribute()
//设置属性值。element.removeAttribute()
//移除属性。element.textContent
//设置或返回文本内容。element.innerHTML
//设置或返回元素的内容。document.body.classList.add(“a”,”b”);
document.body.classList.remove(“a”);
document.body.classList.contains(‘myclass’);
document.body.classList.toggle(‘classtest’);
element.clientHeight
//返回元素的可见高度。element.clientWidth
//返回元素的可见宽度。element.offsetHeight
//返回元素的高度。element.offsetWidth
返回元素的宽度。
DOM 操纵运用
点击切换结果：
//html:
div.panels>div.panel*5
//js
var panels = document.querySelectorAll('.panel'); //猎取panel的NodeList
panels.forEach(panel=>{panel.addEventListener('click',toggelClass)}); //监听点击事宜
function toggelClass(){
let siblings = [].filter.call(this.parentNode.children,child=>child!==this); //猎取兄弟元素
siblings.forEach(item=>item.classList.remove('open'));
this.classList.add('open');
}