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 ...
随机推荐
- 一道sql面试题(查询语句)
一道sql面试题(查询语句) id name age 1 a 11 2 b 11 3 c 12 4 d 13 5 e ...
- 入门 ASP.NET Web API 2 (C#)
入门 ASP.NET Web API 2 (C#) HTTP 不只是为了生成 web 页面.它也是一个强大的建设公开服务和数据 Api的平台. HTTP 的特性:简单. 灵活和无处不在.你能想到的几乎 ...
- 推送之HelloWorld及个推Smart Push
最近有个朋友想要推送一些消息到自己的APP上,自己用了HTTP轮询的方式比较耗电,也比较占用流量,一旦用户关闭了进程,消息则很难触达,于是,咨询我有没有什么好的解决方案.我告诉他其实可以使用推送,他瞪 ...
- 打开Openstack dashboard出现Internal Server Error
最近研究openstack,想把自己遇到的问题记录下来,同时如果有别的朋友也碰到同样问题的时候可以有个参考. 这次的问题是在openstack搭建好之后,dashboard本身是能用的,但是在某一天后 ...
- 分享一个C#自定义事件的实际应用
在C#.NET的开发中,事件是经常接触到的概念,比如为按钮添加点击事件,并写入点击按钮触发事件要运行的代码.不管是ASP.NET还是WinForm等各种形式的应用程序,最经常是为系统生成的事件写具体代 ...
- 推荐系列:最小与最大[DP+余式定理]
最小与最大 [问题描述] 做过了乘积最大这道题,相信这道题也难不倒你. 已知一个数串,可以在适当的位置加入乘号(设加了k个,当然也可不加,即分成k+1个部分),设这k+1个部分的乘积(如果k=0,则乘 ...
- 利用MARQUEE实现正在处理效果
ASP.NET服务器端事件利用MARQUEE实现正在处理效果 前言:ASP.NET同仁们应该都遇到过当触发一个比较耗时的服务器端事件时,页面会处在一个等待的状态(即假死状态),用户体验非常不好,很 ...
- go语言 strconv.ParseInt 的例子
golang strconv.ParseInt 是将字符串转换为数字的函数,功能灰常之强大,看的我口水直流. func ParseInt(s string, base int, bitSize int ...
- ruby gsub gsub! chomp chomp! 以及所有类似函数用法及区别
ruby中带“!"和不带"!"的方法的最大的区别就是带”!"的会改变调用对象本身了.比方说str.gsub(/a/, 'b'),不会改变str本身,只会返回一个 ...
- [C#、winform] FormDesigner.cs报错The variable 'xxxxxx' is either undeclared or was never assigned
背景: 我写了一个App.config配置文件,在里面定义了模块: <add key="key1" value="std1|std2|std3|std4" ...