妖灵262
2016-11-12 17:10
var temp=document.getElementsByTagName("div")[0].childNodes;
这里的【0】怎么解释?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div>
javascript
<p>javascript</p>
<div>111</div>
<h5>PHP</h5>
</div>
<div>
哈哈哈
<p>javascript</p>
<div>333</div>
<h5>PHP</h5>
</div>
<div>
哼哼
<p>javascript</p>
<div>555</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var x=document.getElementsByTagName("div")[3].childNodes;
for(var i=0;i<x.length;i++)
{
document.write("第"+(i+1)+"个节点的值是:"+x[i].nodeValue+"<br />");
document.write("第"+(i+1)+"个节点的名称是:"+x[i].nodeName+"<br />");
document.write("第"+(i+1)+"个节点的属性是:"+x[i].nodeType+"<br />");
document.write("<br />");
}
</script>
</body>
</html>参考以上代码,[3]选择的是第4个div,即 <div>333</div>。
我也是这样认为的,但我有个问题:当[0]变成[3]时,即<div>333</div>那么后面的.childNodes究竟访问的是什么呢?专指<div>333</div>这个节点,还是6个div节点,我运行的结果是
第1个节点的值是:333
第1个节点的名称是:#text
第1个节点的属性是:3
所以我觉得专指<div>333</div>这个节点,那么问题又来了 ,为啥还要加for的遍历呢?for(var i=0;i<x.length;i++),,,,什么才叫做子节点呢?麻烦解答一下,感激不尽!
这里有两个div;所以用到了索引,找到我们想要的div
这里的【0】是指选择第一个div,你可以尝试下在html中多些几个平行的div结构,如此,下面代码:
var temp=document.getElementsByTagName("div")[1].childNodes;
这里【0】变成了【1】,就是针对第二个div来进行相应的操作了(访问第二个div的字节点)。
0表示是第一个子节点,因为一组数的开始第一项是从0开始,比如一个含有四个节点的元素x,那么它的每个子节点的顺序是x[0],x[1],x[2],x[3]
JavaScript进阶篇
469065 学习 · 22582 问题
相似问题