一、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"));
- 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]);
