childNodes
childNodes的w3school定义为
childNodes 属性返回节点的子节点集合,以 NodeList 对象。
childNodes以list方式返回节点的所有子节点集合,所有子节点包括哪些呢。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="container">
<p>something</p>
after
</div>
<button id="button">
this is a button
</button>
<p id="conTxt">something</p>
<script>
var body = document.body;
var nodes = body.childNodes;
var txt = "";
var conTxt = document.getElementById("conTxt");
for(var i=0; i<nodes.length; i++){
var node = nodes[i];
txt += node.nodeName + " : "+node.nodeValue +"<br/>";
}
conTxt.innerHTML = txt;
</script>
</body>
</html>
上文的代码会在p#conTxt中输出上文中的body包含的所有子节点的名称和值,结果如下。
#text :
DIV : null
#text :
BUTTON : null
#text :
P : null
#text :
SCRIPT : null
结果非常奇怪
- body元素包含了八个子节点,四个元素节点,div,button,p,script,四个元素节点
- 四个元素节点的值全都是null
这说明在body标签的每一个元素标签之前都会含有一个文本节点,但是在最后一个元素节点之后没有文本节点,为了验证文本节点的存在,在body的开始和结束分别加入一段文字
<body>
this is at the start
<div id="container">
......
......
......
</script>
this is at the end
</body>
刷新网页,显示结果如下
#text : this is at the start
DIV : null
#text :
BUTTON : null
#text :
P : null
#text :
SCRIPT : null
第一个文本节点的值变成了this is at the start,而最后一个节点的值没有显示。
同理输入div#container的子节点,结果如下
#text :
P : null
#text : after
这说明body标签的子节点包含元素节点和文本节点,其他类型节点未测试。但是最后一个元素节点之后没有文本节点,即使存在文本也没有。而普通的元素节点内部如果还存在其它元素节点,在元素节点之前和之后都会存在一个文本节点,即至少存在三个节点。
nodeValue
上文的结果中还有一个奇怪的地方是元素节点的值都是null,这是因为元素节点的文本值都保存在元素节点的子文本节点中,如果元素节点没有包含其它元素节点,那么元素节点的会有一个子节点,是一个文本节点,保存着元素节点的值即nodeValue,修改上文script代码如下
<script>
var body = document.body;
var nodes = body.childNodes;
var txt = "";
var conTxt = document.getElementById("conTxt");
for(var i=0; i<nodes.length; i++){
var node = nodes[i];
if(node.nodeType == 1){
txt += node.nodeName +" : "+ node.firstChild.nodeValue+"<br/>";
}else{
txt += node.nodeName + " : "+node.nodeValue +"<br/>";
}
}
conTxt.innerHTML = txt;
</script>
刷新页面,显示结果如下
#text : this is at the start
DIV :
#text :
BUTTON : this is a button
#text :
P : something
#text :
SCRIPT : var body = document.body; var nodes = body.childNodes; var txt = ""; var conTxt = document.getElementById("conTxt"); for(var i=0; i"; }else{ txt += node.nodeName + " : "+node.nodeValue +"
"; } } conTxt.innerHTML = txt;
第一个div没有显示nodeValue值时因为含有子元素节点,而第一个子节点的内容为空。
所有,元素节点一定会有一个子文本节点,如果没有子元素节点,那么就只有一个子文本节点,该自文本节点会保存该元素节点的值,要修改一个元素节点的值,要修改其子文本节点的值,而不能通过元素节点的nodeValue直接修改。