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只能对单个节点就行操作,不能对节点数组进行操作;

2.nodeValue属性

作用:如果我们想改变一个文本节点的值,那就是用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图片库加一个新的功能。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java学习

Java基础第五天学习笔记

05.01_Java语言基础(数组概述和定义格式说明)(了解) * A:为什么要有数组(容器) * 为了存储同种数据类型的多个值 * B:数组概念 * 数组...

30070
来自专栏瓜大三哥

Matlab基本运算3

字符串指的是1xn的字符数组。单个字符是按照unicode编码存储的,每个字符占两个字节 ? 在matlab中,只要用(‘)将需要设定的字符串括起来。 disp...

22060
来自专栏武军超python专栏

2018年8月23日python中列表的高级操作:列表推导式,列表生成器,列表迭代器

列表在我们平常的编程中经常会用到,多用于临时存储一些程序需要的数据, 向列表中添加数据时,有多种方式: 1.数据少的话直接定义列表中的数据 my1 = [...

17130
来自专栏desperate633

LintCode 翻转字符串题目分析代码

说明 单词的构成:无空格字母构成一个单词 输入字符串是否包括前导或者尾随空格?可以包括,但是反转后的字符不能包括 如何处理两个单词间的多个空格?在反转字符...

7820
来自专栏老司机的技术博客

人人都能学会的python编程教程6:列表(list)

当索引超出了范围时,Python会报一个IndexError错误,所以,要确保索引不要越界,记得最后一个元素的索引是len(classmates) - 1。如果...

434100
来自专栏机器学习实践二三事

Numpy使用3

上一篇博客介绍了numpy的几种初始化方式和numpy的数据类型(dtype)和shape的相关知识,这篇介绍numpy矩阵的索引与切片 矢量化 numpy数组...

19380
来自专栏Python疯子

数据分析之numpy

ndarray概述 创建n维数组 接收的是列表类型,所有元素类型必须相同 shape表示各维度大小的元组 dtype表示数组数据类型对象

15810
来自专栏海天一树

图的深度优先搜索

图有两种最基本的搜索算法,一种是深度优先搜索,另一种是广度优先搜索。本节先介绍深度优先搜索。

11320
来自专栏Python爱好者

Java基础笔记05

17780
来自专栏mathor

波兰表达式

22840

扫码关注云+社区

领取腾讯云代金券