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图片库加一个新的功能。

JavaScript之firstChild属性、lastChild属性、nodeValue属性学习的更多相关文章

  1. JavaScript的DOM编程--07--节点的属性

    节点的属性: 1). nodeName: 代表当前节点的名字. 只读属性. 如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串 2). nodeType:返回一个整 ...

  2. nodeValue、firstChild和lastChild属性

    nodeValue属性如果想改变一个文本节点的值,那就使用DOM提供的nodeValue属性,他用来得到(和设置)一个节点的值:node.nodeValue但是有个细节必须注意:在用nodeValue ...

  3. 揭秘DOM中data和nodeValue属性同步改变那些事

    问题引发:最近在整理DOM系列的一些知识点,发现在DOM的某些接口API中,存在一些我想不通的现象.就随便举个例子吧:DOM文档模型中的文本节点,可以通过nodeValue或data属性访问文本节点的 ...

  4. javascript中元素的scrollLeft和scrollTop属性说明

    再说意义之前,前说一下这两个属性的适用范围: 注意:这两个属性只能用于元素设置了overflow的css样式中.否者这两个属性没有任何意义.且overflow的值不能为visible,但可以为hidd ...

  5. JavaScript的检测属性、属性特性、枚举属性

    /* 检测属性 检测属性可以通过三种方式 1.通过in运算符 2.通过hasOwnPerperty() 如果给定的属性是继承属性将返回false 3.通过propertyIsEnumerable(): ...

  6. [转贴]JavaScript中Array（数组）的属性和方法

    数组有四种定义的方式 使用构造函数:var a = new Array();var b = new Array(8); var c = new Array("first", &qu ...

  7. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  8. 关于JavaScript中实现继承，及prototype属性

    感谢Mozilla 让我弄懂继承. JavaScript有八种基本类型,函数属于object.所以所有函数都继承自object.//扩展:对象,基本上 JavaScript 里的任何东西都是对象,而且 ...

  9. javascript:与获取鼠标位置有关的属性

    javascript并没有mouse对象，获取鼠标坐标要靠强大的event对象。 我们通过监听document的mousemove，就可以实时获得鼠标位置。 但是！！event中和鼠标相关的属性太多了 ...

随机推荐

  1. poj 3250 Bad Hair Day(单调队列)

    题目链接:http://poj.org/problem?id=3250 思路分析:题目要求求每头牛看见的牛的数量之和,即求每头牛被看见的次数和:现在要求如何求出每头牛被看见的次数? 考虑到对于某头特定 ...

  2. php的stdClass类

    在PHP内核进行模块初始化操作时会自动加载这个函数, 这样,stdClass类的注册操作也就会被执行了.stdClass类是一个没有成员变量也没有成员方法的类. 它的所有的魔术方法,父类.接口等在初始 ...

  3. mac隐藏或显示文件

    1,显示方法:在“终端” 输入命令 defaults write com.apple.finder AppleShowAllFiles TRUE killall Finder 重启Finder,系统隐 ...

  4. Risk（最短路）

    Risk Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 2915   Accepted: 1352 Description ...

  5. Jquery弹窗插件Lhgdialog的用法

    Lhgdialog的用法 大家都知道用js可以实现,但是在使用js实现的弹窗时得考虑很东西:浏览器的兼容.页面的交互等等问题. 在这里简单介绍一下lhgdialog的用法. 参数有: Title:弹窗 ...

  6. Oracle backgroup processes

    PMON: Process Monitor 用自己主动注冊动态监听,处理异常进程. SMON: System Monitor 用于instance recovery. LCKn:仅使用于RAC数据库, ...

  7. C#的Split用法

    1.用字符串分隔: using System.Text.RegularExpressions;string str="aaajsbbbjsccc";string[] sArray= ...

  8. TCP协议三次握手过程分析

    TCP(Transmission Control Protocol) 传输控制协议 TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 位码即tcp标志位,有6种标 ...

  9. .net的页面在大并发下偶尔出现503错误

    我们开发了一个回调页面,由一个工具负责调用,由于压力非常大,回调页面通过6台服务器负载均衡的: 最近业务系统又再次扩容,回调页面压力成倍增加,在高峰时间段偶尔出现了503错误. 拿到这个问题首先对系统 ...

  10. interview collect

    1. binary tree inorder traversal 不能用recursive写 (LC原题)2. 比如有个数组F={1,3, 4, 5, 2, 0}, A=3, 那么F[A]=5, F[ ...