DOM

一、JS三大组成部分
1.ECMAScript（语法规则）
2.DOM（document Object Model）文档对象模型
3.BOM
二、常用方法
1.childNodes：获取到所有子元素节点，包括文本节点【空格符、换行符】、注释节点

var oBox = document.getElementById("box");
console.log(oBox.childNodes);

2.children：获取第一级的子元素，如果需要调用子元素的话，需要具体加下标，因为children返回的是一个集合。

console.log(oBox.children);
oBox.children[0].onclick = function(){
  alert(1);
}

3.nodeType：元素节点的类型（1.Element代表元素、2.Attr代表属性、3.text代表空格符和换行符、8.Comment代表注释）

console.log(oBox.children[0].nodeType);
console.log(oBox.childNodes[0].nodeType);
console.log(oBox.childNodes[1].nodeType);

4.nodeName：返回节点名称（节点名称为大写）

console.log(oBox.childNodes[0].nodeName);
console.log(oBox.childNodes[1].nodeName);
console.log(oBox.children[0].nodeName);

5.tagName：返回标签节点

console.log(oBox.childNodes[0].tagName);
console.log(oBox.childNodes[1].tagName);
console.log(oBox.children[0].tagName);

6.nodeName与tagName的区别：nodeName能返回像text节点与注释的节点而tagName不行
7.getAttributeNode：获取指定节点的属性节点，如果没有该属性，则返回null

console.log(oBox.getAttributeNode("id"));
console.log(oBox.getAttributeNode("class"));
console.log(oBox.getAttributeNode("abc"));

8. createAttribute：创建节点的属性，只能在文档中创建

var attr = document.createAttribute("class");

9.setAttributeNode：生成节点的属性，必须结合createAttribute来使用，nodeValue节点的属性值。

attr.nodeValue = "abc";
oBox.setAttributeNode(attr);

10.firstChild：返回第一个子节点【包含文本节点与注释节点】，低版本IE的情况下返回的是元素节点

console.log(oBox.firstChild);

11.firstElementChild：返回的是元素节点

console.log(oBox.firstElementChild);

12.lastChild与lastElementChild同上

console.log(oBox.lastChild);
console.log(oBox.lastElementChild);

13.parentNode：返回父节点

console.log(oBox.parentNode);

14.offsetParent：返回定位父级，如果父级都没有定位则向上级再找，如果都没有定位，则最终返回body

console.log(oBox.offsetParent);

15.createElement/appendChild：两者结合起来用，添加节点

var oDiv = document.createElement("div");
console.log(oDiv);
console.log(typeof oDiv);
oBox.appendChild(oDiv);
oDiv.className = "box";
oDiv.style.cssText = 'width:200px;height:200px;background-color:#f90;';

16.cloneNode：克隆节点。true深度拷贝（复制本节点以及整个子节点树）false浅拷贝（只复制节点本身），默认是浅拷贝

var cloneBox = oBox.cloneNode(true);
document.body.appendChild(cloneBox);

17.insertBefore：在元素前面添加节点 insertBefore(newele, oldele)

oBox.insertBefore(cloneBox, box.children[1]);

18.removeChild：删除子节点

oBox.removeChild(Ps[0]);

19.replaceChild：替换子节点 replaceChild(newele,oldele)

oBox.replaceChild(cloneBox, Ps[0]);