DOMノード——JSまとめ
2919 ワード
DOMノード——JSまとめ
ノードは、属性ノード、エレメントノード、テキストノードの3つを含む.
HTML内容:
(一)属性ノード
1.親ノード:
ノードは、属性ノード、エレメントノード、テキストノードの3つを含む.
HTML内容:
<div id = 'box' style = "color:red"> Div<em> </em> </div>(一)属性ノード
1.親ノード:
window.onload = function(){
var box = document.getElementById('box'); // , '[object HTMLDivElement]'
alert(box);
alert(box.tagName); // ， ‘DIV ’
alert(box.innerHTML); // ， ‘ Div’
alert(box.id); // ， ：‘box’
alert(box.getAttribut('id')); // ， ， ：‘box’
// ：
alert(box.getAttribut('style')); // ， ：'color:red'
alert(box.className); // class
// HTML 、 ，JS HTML ，
box.innerHTML = ' <strong>JS</strong>'; // ' Div' ， ' JS'
} // :
// ：1
// ：2
// ：3
window.onload = function(){
var box = document.getElementById('box');
// ， tagName
//alert(box.nodeName); // "DIV"
//alert(box.childNodes.length); // "3 " ,
// 3 ： Div<em> </em> </div>
// ：" Div" ——
// ："<em> </em>" ——
// ：" " ——
// ：
alert(box.childNodes[0]); // "Object Text" ,
alert(box.childNodes[0].nodeType); // "3 ", ，
//
//1) ' '
alert(box.childNodes[0].nodeValue); // " Div"
alert(box.childNodes[1].nodeValue); // "Null"
alert(box.childNodes[2].nodeValue); // " "
//2) ' '
alert(box.innerHTML); // " Div<em> </em> </div>"
alert(box.childNodes[1].innerHTML); // " "
// "<em> </em>" ，nodeName
alert(box.childNodes[1].nodeName); // "EM"
} window.onload = function () {
var box = document.getElementById('box');
for ( var i = 0; i<box.childNodes.length; i++){ //
if (box.childNodes[i].nodeType ===1 ){ // ：
alert(box.childNodes[i].innerHTML); //
}else if (box.childNodes[i].nodeType ===3 ){ // ：
alert(box.childNodes[i].nodeValue); //
}
}
}