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中和鼠标相关的属性太多了 ...
随机推荐
- Activitys, Threads, & Memory Leaks
Activitys, Threads, & Memory Leaks 在Android编程中,一个公认的难题是在Activity的生命周期如何协调长期运行的任务和避免有可能出现的内存泄漏问题. ...
- docker 基于现有镜像修改后保存,上传私有仓库
docker:/root# docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES f3cb864be528 192.168.3 ...
- C语言的本质（8）——副作用与顺序点
C 语言中,术语副作用是指对数据对象或者文件的修改.例如以下语句 var = 99; 的副作用是把 var 的值修改成 99.对表达式求值也可能产生副作用,例如: se = 100 对这个表达式求值所 ...
- 随滚动条滚动的居中div
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- clientX,pageX,screenX，offsetLeft，scrollTop
出处:点击打开链接 一直不太明白,今天看了一下,感觉挺详细,先转载过来....... clientX 观点:鼠标相对于WINDOWS的坐标. 这里这个WINDOWS是指我们能看见的浏览器大小.所以不可 ...
- bootstrap注意事项（五）表单
1.基本实例 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control类的 <input>.<textarea> 和 <select> 元素都 ...
- MariaDB忘记root密码
在MariaDB配置文件/etc/my.cnf [mysqld]中加入skip-grant-tables一行: [Richard@localhost ~]$ sudo vi /etc/my.cnf[ ...
- UNITY使用高通Vuforia导出XCode包编译出错
1.referenced from: in libVuforia.a 此处重新导入引用库并按http://game.ceeger.com/forum/read.php?tid=20447(三楼处理方式 ...
- CFILE追加写入文件
CFile file; file.Open(strName, CFile::modeWrite|CFile::modeNoTruncate|CFile::modeCreate); ) { file.S ...
- Could not find class 'XXX.activity‘', referenced from method 'YYYY'
Could not find class 'XXX.activity‘', referenced from method 'YYYY'的解决方案: 出现这个错误.是由于eclipse升级ADT所导致的 ...