一、JS三大組成部分
1.ECMAScript（語(yǔ)法規(guī)則）
2.DOM（document Object Model）文檔對(duì)象模型
3.BOM
二、常用方法
1.childNodes：獲取到所有子元素節(jié)點(diǎn)，包括文本節(jié)點(diǎn)【空格符、換行符】、注釋節(jié)點(diǎn)
var oBox = document.getElementById("box");
console.log(oBox.childNodes);
2.children：獲取第一級(jí)的子元素，如果需要調(diào)用子元素的話，需要具體加下標(biāo)，因?yàn)閏hildren返回的是一個(gè)集合。
console.log(oBox.children);
oBox.children[0].onclick = function(){
alert(1);
}
3.nodeType：元素節(jié)點(diǎn)的類型（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：返回節(jié)點(diǎn)名稱（節(jié)點(diǎn)名稱為大寫）
console.log(oBox.childNodes[0].nodeName);
console.log(oBox.childNodes[1].nodeName);
console.log(oBox.children[0].nodeName);
5.tagName：返回標(biāo)簽節(jié)點(diǎn)
console.log(oBox.childNodes[0].tagName);
console.log(oBox.childNodes[1].tagName);
console.log(oBox.children[0].tagName);
6.nodeName與tagName的區(qū)別：nodeName能返回像text節(jié)點(diǎn)與注釋的節(jié)點(diǎn)而tagName不行
7.getAttributeNode：獲取指定節(jié)點(diǎn)的屬性節(jié)點(diǎn)，如果沒有該屬性，則返回null
console.log(oBox.getAttributeNode("id"));
console.log(oBox.getAttributeNode("class"));
console.log(oBox.getAttributeNode("abc"));
- createAttribute：創(chuàng)建節(jié)點(diǎn)的屬性，只能在文檔中創(chuàng)建
var attr = document.createAttribute("class");
9.setAttributeNode：生成節(jié)點(diǎn)的屬性，必須結(jié)合createAttribute來使用，nodeValue節(jié)點(diǎn)的屬性值。
attr.nodeValue = "abc";
oBox.setAttributeNode(attr);
10.firstChild：返回第一個(gè)子節(jié)點(diǎn)【包含文本節(jié)點(diǎn)與注釋節(jié)點(diǎn)】，低版本IE的情況下返回的是元素節(jié)點(diǎn)
console.log(oBox.firstChild);
11.firstElementChild：返回的是元素節(jié)點(diǎn)
console.log(oBox.firstElementChild);
12.lastChild與lastElementChild同上
console.log(oBox.lastChild);
console.log(oBox.lastElementChild);
13.parentNode：返回父節(jié)點(diǎn)
console.log(oBox.parentNode);
14.offsetParent：返回定位父級(jí)，如果父級(jí)都沒有定位則向上級(jí)再找，如果都沒有定位，則最終返回body
console.log(oBox.offsetParent);
15.createElement/appendChild：兩者結(jié)合起來用，添加節(jié)點(diǎn)
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：克隆節(jié)點(diǎn)。true深度拷貝（復(fù)制本節(jié)點(diǎn)以及整個(gè)子節(jié)點(diǎn)樹）false淺拷貝（只復(fù)制節(jié)點(diǎn)本身），默認(rèn)是淺拷貝
var cloneBox = oBox.cloneNode(true);
document.body.appendChild(cloneBox);
17.insertBefore：在元素前面添加節(jié)點(diǎn) insertBefore(newele, oldele)
oBox.insertBefore(cloneBox, box.children[1]);
18.removeChild：刪除子節(jié)點(diǎn)
oBox.removeChild(Ps[0]);
19.replaceChild：替換子節(jié)點(diǎn) replaceChild(newele,oldele)
oBox.replaceChild(cloneBox, Ps[0]);
