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中和鼠标相关的属性太多了 ...
随机推荐
- xxx.java: Recompile with -Xlint:deprecation for details
警告而已.有些方法1 已经过时,有更好的方法可以代替,比如 new java.util.Date().getYear(); => cal.get(Calendar.YEAR);2 发现过问题,且 ...
- 仍需"敬请期待"的微信沃卡
从2013年7月30日广东联通联合腾讯公布将合作推出联通沃卡,到8月5日在易迅网上进行预订,8月8日正式发售,再到本人最近几日拿到预订的实卡,已经过去20多天了.于是乎,我怀着无比期待的 ...
- Is life always hard?
原文来自我的独立blog: http://www.yuanyong.org/blog/midnightsun/is-life-always-hard 和两个朋友聊天. 小L在考研,打电话过去的时候小L ...
- Silk Mobile – 缩短移动应用的测试周期
Micro Focus已将从Borland接管的Silk Mobile™投放到市场,作为一种新的强大的移动应用测试解决方案,它将使企业能够开发出更先进更可靠的移动商业软件. 作为市场上最完整的移动应用 ...
- 解密yii中CModule::_components和CModule::_componentConfig
array CModule::_components 所有组件对象(CComponent的子类)将作为键值存在该数组中, 键名是定义该组件时使用的键名.例如: protected function r ...
- 【Lucene3.6.2入门系列】第10节_Tika
首先贴出来的是演示了借助Tika创建索引的HelloTikaIndex.java PS:关于Tika的介绍及用法,详见下方的HelloTika.java package com.jadyer.luce ...
- meta标签的少许语法,慢慢收集中...
收集了一些meta的语法,也将不断的更新.不断做点滴的收集,总之,为了前端这些东西呀,我也是操碎了心... 1 <meta http-equiv="Content-Type" ...
- jQuery源码笔记——回调对象
回调对象是一个多用途的回调列表对象,提供了强大的的方式来管理回调函数列表. 最简单的缓存对象 function Callbacks(){ var list = [], self = { add: fu ...
- PowerDesigner使用方法小结
PowerDesigner多用来进行数据库模型设计,具有SQL语句自动生成等功能.当然,也有不少缺点,比如团队分享. 一.设置PowerDesigner模型视图中数据表显示列 1.Tools-Disp ...
- Search Bar 去掉背景颜色
storyboard里只能设置background颜色,可是发现clear color无法使用 其实代码还是可以设置的,那就是删除背景view [[self.searchBar.subviews ob ...