JavaScript之firstChild属性、lastChild属性、nodeValue属性学习
1.数组元素childNodes[0]有更直观易读的优点,这边在介绍一个有同样功能的属性,且更加语义化-------->firstChild属性
假设我们需要目标元素节点下的所有子元素中的第一个子元素我们可以这样做:
目标元素节点下的子元素节点数组.firstChild 这句代码等价于 目标元素节点下的子元素节点数组[0];
目标元素节点.childNodes[0] 这句代码等价于 目标元素节点.firstChild;
与此类推当我们需要目标元素节点下的所有子元素节点中的最后一个元素我们可以这样做:
目标元素节点下的子元素节点数组.lastChild 这句代码等价于 目标元素节点下的子元素节点数组[目标元素节点下的子元素节点数组.length-1]
目标元素节点.childNodes[目标元素节点.childNodes.length-1]=目标元素节点.lastChild;
从上面的描述中,发现firstChild属性和lastChild属性更加的语义化,而且代码更加的简洁,方便我们记忆;
注意：firstChild和lastChild只能对单个节点就行操作,不能对节点数组进行操作;
作用:如果我们想改变一个文本节点的值,那就是用DOM提供的nodeValue属性,它是用来得到(和设置)一个文本节点的值；
如下代码：
<body> <p id="description"> hello world! </p> <script type="text/javascript"> var p = document.getElementById("description"); alert(p.nodeValue); </script> </body>
上面这段代码,犯了典型的错误,大多数人可能没有注意,这一点我在之前的随笔http://www.cnblogs.com/GreenLeaves/p/5692576.html中有介绍nodeType的问题,我们获取的p是一个元素节点,<p>元素本身的nodeValue值是一个null值,而且最重要的是nodeValue属性是用来获取文本节点的值的。
所以输出:null. 这个是一个小细节,也是一个小知识点.需要注意。
正确的获取<p>标签里面文本的做法是获取<P>标签下文本节点的节点值。代码如下: ---这里<p>标签代表一个元素节点
<body> <p id="description"> hello world! </p> <script type="text/javascript"> var p = document.getElementById("description"); alert(p.childNodes[0].nodeValue); </script> </body>
学完nodeValue属性后我们能给我们的JS图片库加一个新的功能。
