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图片库加一个新的功能。
JavaScript之firstChild属性、lastChild属性、nodeValue属性学习的更多相关文章
- JavaScript的DOM编程--07--节点的属性
节点的属性: 1). nodeName: 代表当前节点的名字. 只读属性. 如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串 2). nodeType:返回一个整 ...
- nodeValue、firstChild和lastChild属性
nodeValue属性如果想改变一个文本节点的值,那就使用DOM提供的nodeValue属性,他用来得到(和设置)一个节点的值:node.nodeValue但是有个细节必须注意:在用nodeValue ...
- 揭秘DOM中data和nodeValue属性同步改变那些事
问题引发:最近在整理DOM系列的一些知识点,发现在DOM的某些接口API中,存在一些我想不通的现象.就随便举个例子吧:DOM文档模型中的文本节点,可以通过nodeValue或data属性访问文本节点的 ...
- javascript中元素的scrollLeft和scrollTop属性说明
再说意义之前,前说一下这两个属性的适用范围: 注意:这两个属性只能用于元素设置了overflow的css样式中.否者这两个属性没有任何意义.且overflow的值不能为visible,但可以为hidd ...
- JavaScript的检测属性、属性特性、枚举属性
/* 检测属性 检测属性可以通过三种方式 1.通过in运算符 2.通过hasOwnPerperty() 如果给定的属性是继承属性将返回false 3.通过propertyIsEnumerable(): ...
- [转贴]JavaScript中Array（数组）的属性和方法
数组有四种定义的方式 使用构造函数:var a = new Array();var b = new Array(8); var c = new Array("first", &qu ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- 关于JavaScript中实现继承，及prototype属性
感谢Mozilla 让我弄懂继承. JavaScript有八种基本类型,函数属于object.所以所有函数都继承自object.//扩展:对象,基本上 JavaScript 里的任何东西都是对象,而且 ...
- javascript:与获取鼠标位置有关的属性
javascript并没有mouse对象，获取鼠标坐标要靠强大的event对象。 我们通过监听document的mousemove，就可以实时获得鼠标位置。 但是！！event中和鼠标相关的属性太多了 ...
随机推荐
- Painting Storages（ZOJ)
There is a straight highway with N storages alongside it labeled by 1,2,3,...,N. Bob asks you to pai ...
- poj2864
#include<iostream> #include<cstdio> #include<cmath> using namespace std; int main ...
- C语言对象化编程
以下为一个引子: C中struct的函数实现,只能用函数指针成员. C结构体内不能有函数的代码,但可以有函数的指针. C/C code Code highlighting produced by Ac ...
- 实现在ios文件读写
文件都是用来读写数据的,可是哪里都会有潜规则,ios里面读写数据的潜规则你知不知道,你知道不知道!!! 你有没有觉得NSUserDefaults和NSBundle,plist这些玩意阴魂不散,有时候搞 ...
- 全国计算机等级考试二级教程-C语言程序设计_第11章_对函数的进一步讨论
无论传递什么参数,函数都有副本机制 改变一个变量,需要传入变量的地址 改变一个指针变量,需要传入指针变量的地址 //int add(int a, int b);挖取函数声明 //int ()(int ...
- android开发之Animations的使用（二）
android开发之Animations的使用(二) 本博文主要讲述的是android开发中的animation动画效果的使用,和上一篇博文不同的是,此次四种动画效果,主要使用的是xml文件实现的,提 ...
- MVC5 Controller简要创建过程（1）：ControllerFactory的创建
即将离职,闲来无事回顾下MVC的源码,到了Controller创建这里,由于流程有点复杂,鉴于自己记性不太好,索性就记录一下吧,方便日后参照. 首先看MvcHandler: public class ...
- IsNullOrEmpty和s == null || s.Length == 0哪个快
在写扩展方法时,看到有人用==null这个方法,说快,上网找了些资料,最后在csdn的博客上看到了一篇文章,说实测是后两者快,于是我也试着做了一个程序运行了一下,却发现这样的结果: 我测试了一个,发现 ...
- Php开源项目大全
WordPress [PHP开源 博客Blog] WordPress是最热门的开源个人信息发布系统(Blog)之一,基于PHP+MySQL构建.WordPress提供的功能包括: 1.文章发布.分类 ...
- 连接远程hbase长时间等待问题
确保本地保存了远程主机名: 保存远程hosts