一路媚、JS三大組成部分
1.ECMAScript（語法規(guī)則）
2.DOM（document Object Model）文檔對象模型
3.BOM
二抖誉、常用方法
1.childNodes：獲取到所有子元素節(jié)點(diǎn)件相，包括文本節(jié)點(diǎn)【空格符韵卤、換行符】、注釋節(jié)點(diǎn)
var oBox = document.getElementById("box");
console.log(oBox.childNodes);
2.children：獲取第一級的子元素着撩，如果需要調(diào)用子元素的話诅福，需要具體加下標(biāo)，因?yàn)閏hildren返回的是一個集合拖叙。
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：返回第一個子節(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：返回定位父級，如果父級都沒有定位則向上級再找砸民，如果都沒有定位抵怎，則最終返回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)以及整個子節(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]);
