nodeValue、firstChild和lastChild属性
nodeValue属性
如果想改变一个文本节点的值,那就使用DOM提供的nodeValue属性,他用来得到(和设置)一个节点的值:
node.nodeValue
但是有个细节必须注意:在用nodeValue属性获取description对象的值时,得到的并不是包含在这个段落里的文本。
可以用下面这条alert语句来验证这一点:
alert(description.nodeValue);
html代码如下
<html>
<body>
<p id = "description">ssssss</p>
</body>
</html>
这个调用将返回一个null值。<p>元素本身的nodeValue属性是一个空值,而你真正需要的是<p>元素所包含的文本的值。
包含在<p>元素里的文本是另一种节点,它是<p>元素的第一个子节点。因此,你想要得到的其实是它的第一个子节点的nodeValue属性值。
下面这个条alert语句可以显示你想要的内容:
alert(description.childNodes[0].nodeValue);
这个值来自childNodes数组的第一个(下标是0)元素。
firstChild和lastChild属性
数组元素childNodes[0]有个更直观易读的同义词。无论何时何地,只要需要访问childNodes数组的第一个元素,都可以把它写成firstChild:
node.firstChild
这种写法与下面的写法完全等价:
node.childNodes[0]
DOM还提供了一个与之对应的lastChild属性:
node.lastChild
这代表着childNodes数组的最后一个元素。
nodeValue、firstChild和lastChild属性的更多相关文章
- JavaScript之firstChild属性、lastChild属性、nodeValue属性学习
1.数组元素childNodes[0]有更直观易读的优点,这边在介绍一个有同样功能的属性,且更加语义化-------->firstChild属性 假设我们需要目标元素节点下的所有子元素中的第一个 ...
- 选择器:first-child与:last-child失效的解决方法
作为还在努力练习的代码小白来说,有时类名或者ID名太多很容易就会搞混,为此,在练习中会想着借用多样的选择器来设置而不是每一个标签都设一个类名(Id名),在此次练习中使用选择器:first-child与 ...
- CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
以下示例主要讲解nth-child.first-child.last-child.nth-of-type.first-of-type和last-of-type使用. 示例代码: <!DOCTYP ...
- CSS3中first-child、last-child、nth-child、nth-last-child
1.单独指定第一个子元素.最后一个子元素的样式 <style type="text/css"> li:first-child{ background:yellow; } ...
- CSS选取指定位置标签first-child、last-child、nth-child
1.first-child 选择列表中的第一个标签. 2.last-child 选择列表中的最后一个标签 3.nth-child(n) 选择列表中的第n个标签 4.nth-child(2n) 选择列表 ...
- first-child和last-child选择器 nth-child(n)第几个元素 nth-last-child(n)倒数第几个元素
:first-child 和 :last-child 分别表示父元素中第一个 或者 最后一个 子元素设置样式,如上图
- 选择器的使用(first-child和last-child选择器)
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...
- first-child、last-child误解
MDN解释兄弟元素中的第一个元素 然后今天写的时候这样想出现了问题 并没有加上边框 W3C解释 尝试去掉h3,发现span加上了边框 E:first-child含义 父元素中第一个元素且第一个元素是E ...
- jQuery中的子(后代)元素过滤选择器(四、六):nth-child()、first-child、last-child、only-child
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
随机推荐
- (蓝牙)网络编程中,使用InputStream read方法读取数据阻塞的解决方法
问题如题,这个问题困扰了我好几天,今天终于解决了,感谢[1]. 首先,我要做的是android手机和电脑进行蓝牙通信,android发一句话,电脑端程序至少就要做到接受到那句话.android端发送信 ...
- java反射拼接方法名动态执行方法
近期由于负责项目的一个模块,该模块下有很多分类,每个分类都有一个编码code,这个值是作为一个参数携带过来的.但是每个code确实对应一个方法的. code的值有很多个,自己又不想做ifelse或者s ...
- RoleManager 进行角色管理
ASP.NET Identity 使用 RoleManager 进行角色管理 (VS2013RC) 注:本文系作者原创,但可随意转载. 最近做一个Web平台系统,系统包含3个角色,“管理员, 企业用户 ...
- [转]Creating an iPhone Daemon
ref: http://chrisalvares.com/blog/7/creating-an-iphone-daemon-part-1/ http://chrisalvares.com/blog/3 ...
- 图解Javascript之字符串
好东西分享给大家,但要尊重事实!!!因此特别说明:本图非我本人亲自所作,乃我大天朝网友所绘制.个人感觉此图,覆盖全面,细节考虑甚周全,因此分享给大家,同时在此特别感谢网友的无私分享!
- ios开发屏幕问题
1. 程序要要支持Iphone 和 ipad,所以首先必需创建一通用程序,这一操作只要在创建程序时在 devices那栏上勾选universal即可,完成后会发现有两个.xib文件,但只有一个view ...
- jsp中获取当前文件路径
<% String path1 = application.getRealPath(request.getRequestURI()); //当前请求的JSP文件的物理路径 String path ...
- HTML5 拖放及排序的简单实现
HTML5 拖放及排序的简单实现 之前写过个类似的例子,看这里. 但想再深入一步,希望能通过拖放,来交换二个元素的位置.最好有应用到手机平台上. 作了个简单的例子,在手机上测试的时候不成功..查了好多 ...
- 三种工厂模式的分析以及C++实现
三种工厂模式的分析以及C++实现 以下是我自己学习设计模式的思考总结. 简单工厂模式 简单工厂模式是工厂模式中最简单的一种,他可以用比较简单的方式隐藏创建对象的细节,一般只需要告诉工厂类所需要的类型, ...
- 用Linux命令行实现删除和复制指定类型的文件
(一)Linux 删除当前目录及子目录中所有某种类型的文件 方法1 : 此方法不能处理目录中带空格的那些. rm -rf `find . -name "*.example"` Li ...