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图片库加一个新的功能。
相关文章
- PHP+JavaScript+HTML实现上传PDF和浏览PDF课件
- JavaScript window.open()属性
- javascript 简单的计算器
- 在android中实现webview与javascript之间的交互(转)
- [Javascript] Chunk array
- [Javascript] Wait for the Fastest JavaScript Promise to Be Fulfilled with Promise.any()
- [Javascript] Wait for Multiple JavaScript Promises to Settle with Promise.allSettled()
- [Javascript] Redirect the browser using JavaScript
- javascript正则表达式
- [Javascript] Filter out Duplicates from Flat JavaScript Array with array.filter / reduce / Set
- [Javascript] Use requestIdleCallback to schedule JavaScript tasks at an optimal time
- [Javascript] Conditionally spread entries to a JavaScript object
- [Javascript] Delegate JavaScript (ES6) generator iteration control
- [Javascript] JavaScript Array Methods in Depth - push
- [Immutable.js] Converting Immutable.js Structures to Javascript and other Immutable Types
- [Javascript] How to use JavaScript's String.replace
- [Javascript] Using map() function instead of for loop
- es6 javascript的class的静态方法、属性和实例属性
- javascript 关于函数的返回值
- javascript面向对象之Javascript 继承
- 使用dom breakpoint找到修改属性的javascript代码
- 在 JavaScript 中访问对象属性的 3 种方法
- JavaScript数组的常用方法总结:遍历,复制,反转,排序,添加,删除(前端常见面试题必考必问)实例演示
- javascript案例29——求1~100累加和,跳过个位数为3的数。
- JavaScript中的sessionStorage
- [连载]JavaScript讲义(02)--- JavaScript核心编程
- JavaScript监听属性改变
- JavaScript 数据类型
- JavaScript入门学习笔记(一)
- 简搭(jabdp)之编写javascript(一)
- web前端框架Javascript开发基础之JavaScript作用域