JavaScript DOM文件物件
摘要：
文字節點，IE8以下空格節點獲取不到。
元素節點div
。
屬性節點class
、id
、value
。
註釋節點
<div id="wrap">
...
- 文字節點，IE8以下空格節點獲取不到。
-
元素節點
div。 -
屬性節點
class、id、value。 - 註釋節點
<div id="wrap"> <div class="position"> <div id="box" class="box1" data-title="這也是節點" abc="133"> <!-- <div> <img src="1.jpg" /> </div> --> 你好嗎！！！ <span id="my-span">這是個span</span> <p>這是一個p標籤</p> <ul> <li>這是li標籤1</li> <li>這是li標籤2</li> <li>這是li標籤3</li> </ul> </div> <div id="box2"></div> </div> </div> 複製程式碼
二、獲取節點
-
獲取子代節點（動態獲取）。
ele.childNodes：文字節點、元素節點。ele.children：只獲取元素節點。 -
獲取第一個子代節點。
ele.firstChild：返回第一個包括文字節點和註釋節點。ele.firstElementChild：獲取第一個元素節點。 -
獲取最後一個子代節點。
ele.lastChild：獲取到文字和註釋節點。ele.lastElementChild：獲取最後一個元素節點。 -
獲取父親節點。
ele.parentNode：獲取父親節點。ele.offsetParent：找到定位父級。 -
下一個兄弟節點。
ele.nextSibling：獲取到下一個節點，包括文字、註釋節點。ele.nextElementSibling：只獲取元素節點。 -
上一個兄弟節點。
ele.previousSibling：獲取到下一個節點，包括文字、註釋節點。ele.previousElementSibling：只獲取元素節點。 -
獲取子元素節點的數量。
ele.childElementCount。
三、節點的操作
document.createElement('nodename')
createTextNode
parentNode.removeChild(node)
cloneNode()
parentNode.appendChild(node)
parentNode.replaceChild(new, old)
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標籤';
oP.onclick = function() {
alert('我是p標籤的點選事件')
}
oBox.appendChild(oP);
var oText = document.createTextNode('我很好！！！');
oBox.appendChild(oText);
console.log(oText)
複製程式碼