DOM节点——JS总结
节点包括三种:属性节点、元素节点、文本节点
HTML内容:
<div id = 'box' style = "color:red">测试Div<em>倾斜</em>结尾</div>
JavaScript内容:(一)属性节点
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'
}
2.子节点:
//节点类型值:
//元素节点为: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); //返回文本节点的 文本
}
}
}
在做实验的过程中,发现在节点,成了一件不小的麻烦,所以做上面的总结。准确找到相应的节点,是操作的前提。内容如果较多,节点层次可能也会较多,逐层查找即可。