一奋蔚、節(jié)點
- 文本節(jié)點她混，IE8以下空格節(jié)點獲取不到。
- 元素節(jié)點
div泊碑。
- 屬性節(jié)點
class坤按、id、value馒过。
- 注釋節(jié)點
<div id="wrap">
<div class="position">
<div id="box" class="box1" data-title="這也是節(jié)點" abc="133">
<!-- <div>
<img src="1.jpg" />
</div> -->
你好嗎３襞А！腹忽！
<span id="my-span">這是個span</span>
<p>這是一個p標(biāo)簽</p>
<ul>
<li>這是li標(biāo)簽1</li>
<li>這是li標(biāo)簽2</li>
<li>這是li標(biāo)簽3</li>
</ul>
</div>
<div id="box2"></div>
</div>
</div>
二来累、獲取節(jié)點
- 獲取子代節(jié)點（動態(tài)獲取）窘奏。
ele.childNodes：文本節(jié)點嘹锁、元素節(jié)點。ele.children：只獲取元素節(jié)點着裹。
- 獲取第一個子代節(jié)點领猾。
ele.firstChild：返回第一個包括文本節(jié)點和注釋節(jié)點。ele.firstElementChild：獲取第一個元素節(jié)點。
- 獲取最后一個子代節(jié)點瘤运。
ele.lastChild：獲取到文本和注釋節(jié)點窍霞。ele.lastElementChild：獲取最后一個元素節(jié)點。
- 獲取父親節(jié)點拯坟。
ele.parentNode：獲取父親節(jié)點但金。ele.offsetParent：找到定位父級。
- 下一個兄弟節(jié)點郁季。
ele.nextSibling：獲取到下一個節(jié)點冷溃，包括文本、注釋節(jié)點梦裂。ele.nextElementSibling：只獲取元素節(jié)點似枕。
- 上一個兄弟節(jié)點。
ele.previousSibling：獲取到下一個節(jié)點年柠，包括文本凿歼、注釋節(jié)點。ele.previousElementSibling：只獲取元素節(jié)點冗恨。
- 獲取子元素節(jié)點的數(shù)量答憔。
ele.childElementCount。
三掀抹、節(jié)點的操作
- 創(chuàng)建節(jié)點：
document.createElement('nodename')虐拓，放標(biāo)簽名，創(chuàng)建元素節(jié)點傲武，創(chuàng)建節(jié)點是document的方法蓉驹，創(chuàng)建完的節(jié)點可以直接進(jìn)行dom操作。
- 創(chuàng)建文本節(jié)點：
createTextNode揪利。
- 刪除節(jié)點：
parentNode.removeChild(node)，刪除節(jié)點只能從父級開始刪除诗茎，不能自己刪除自己。
- 克隆節(jié)點：
cloneNode()敢订，克隆只克隆元素本身還有元素節(jié)點，不會克隆事件罢吃，可以接受一個布爾類型楚午，若是true近哟，則克隆子孫元素。
- 添加節(jié)點：
parentNode.appendChild(node)，只能從父級節(jié)點開始添加怪蔑，添加位置在最后的子節(jié)點后面里覆。
- 替換節(jié)點：
parentNode.replaceChild(new, old)，第一個用來替換新元素缆瓣，第二個被替換元素喧枷。
- 在節(jié)點前添加節(jié)點：
parentNode.insertBefore(new, old)弓坞，第一個用來插入的新元素，第二個在這個元素前插入渡冻。
var oBox = document.getElementById('box'),
oSpan = document.getElementById('my-span');
oBox.onclick = function(){
alert(1)
}
var oBox2 = oBox.cloneNode(true);
wrap.appendChild(oBox2);
console.log(oBox2)
var oP = document.createElement('p');
oP.innerHTML = '我是一個p標(biāo)簽';
oP.onclick = function() {
alert('我是p標(biāo)簽的點擊事件')
}
oBox.appendChild(oP);
var oText = document.createTextNode('我很好！Ｃ苯琛超歌！');
oBox.appendChild(oText);
console.log(oText)
四宜雀、節(jié)點屬性
- 獲取節(jié)點屬性握础。
ele.getAttribute(key)悴品，節(jié)點名稱，直接返回值定枷。ele.getAttributeNode届氢，返回節(jié)點對象。
- 設(shè)置節(jié)點屬性退子。
ele.setAttribute(key, value)，不要用數(shù)字來當(dāng)做key荐虐。ele.setAttributeNode(node)丸凭，node是一個節(jié)點對象腕铸。
- 創(chuàng)建節(jié)點對象。
document.createAttribute("nodeName")狠裹，創(chuàng)建完之后要設(shè)置value值汽烦。
- 刪除節(jié)點對象。
ele.removeAttribute(key)
- 節(jié)點類型刹缝。1--element--元素節(jié)點、3--#text--文本節(jié)點言疗、8--#comment--注釋節(jié)點颂砸、9--document--文檔節(jié)點。
- tagName是只有元素節(jié)點才有人乓，nodeName是所有節(jié)點都有。
var oBox = document.getElementById('box');
oBox.removeAttribute('abc');
console.log(document.nodeType);
