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属性学习的更多相关文章

  1. JavaScript的DOM编程--07--节点的属性

    节点的属性: 1). nodeName: 代表当前节点的名字. 只读属性. 如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串 2). nodeType:返回一个整 ...

  2. nodeValue、firstChild和lastChild属性

    nodeValue属性如果想改变一个文本节点的值,那就使用DOM提供的nodeValue属性,他用来得到(和设置)一个节点的值:node.nodeValue但是有个细节必须注意:在用nodeValue ...

  3. 揭秘DOM中data和nodeValue属性同步改变那些事

    问题引发:最近在整理DOM系列的一些知识点,发现在DOM的某些接口API中,存在一些我想不通的现象.就随便举个例子吧:DOM文档模型中的文本节点,可以通过nodeValue或data属性访问文本节点的 ...

  4. javascript中元素的scrollLeft和scrollTop属性说明

    再说意义之前,前说一下这两个属性的适用范围: 注意:这两个属性只能用于元素设置了overflow的css样式中.否者这两个属性没有任何意义.且overflow的值不能为visible,但可以为hidd ...

  5. JavaScript的检测属性、属性特性、枚举属性

    /* 检测属性 检测属性可以通过三种方式 1.通过in运算符 2.通过hasOwnPerperty() 如果给定的属性是继承属性将返回false 3.通过propertyIsEnumerable(): ...

  6. [转贴]JavaScript中Array（数组）的属性和方法

    数组有四种定义的方式 使用构造函数:var a = new Array();var b = new Array(8); var c = new Array("first", &qu ...

  7. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  8. 关于JavaScript中实现继承，及prototype属性

    感谢Mozilla 让我弄懂继承. JavaScript有八种基本类型,函数属于object.所以所有函数都继承自object.//扩展:对象,基本上 JavaScript 里的任何东西都是对象,而且 ...

  9. javascript:与获取鼠标位置有关的属性

    javascript并没有mouse对象，获取鼠标坐标要靠强大的event对象。 我们通过监听document的mousemove，就可以实时获得鼠标位置。 但是！！event中和鼠标相关的属性太多了 ...

随机推荐

  1. openjpa框架入门_项目框架搭建(二)

    Openjpa2.2+Mysql+Maven+Servlet+JSP 首先说明几点,让大家更清楚整体结构: 官方source code 下载:http://openjpa.apache.org/dow ...

  2. Logstash 默认不处理一天前的文件

    The default behavior of the file input plugin is to ignore files whose last modification is greater ...

  3. Codeforces 306B

    #include <cstdio> #include <algorithm> #include <cstring> #include <cstdlib> ...

  4. 谷歌page speed 安装使用及页面问题详解

    原文地址:http://wenku.baidu.com/view/b0a61f3ebcd126fff7050b40.html 谷歌page speed 安装使用及页面问题详解 谷歌page speed ...

  5. javascript数组去重算法-----2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. INPUT[type=file]的change事件不触发问题

    在网页上要操作文件通常会使用INPUT[type=file]控件,但这个控件的设计很蛋疼.它不像其它编程语言中文件选择后会触发一个事件,只是让上面的文字改变,而这个改变可能会触发change事件而已. ...

  7. HTML界面JQuery ajax 返回200，但走Error方法

    原因是JSON拼装的有问题. 都需要放在双引号里面,或者修改dataType的类型为  "html". http://blog.csdn.net/imjcoder/article/ ...

  8. Idea facet

    idea错误:this inspection controls whether the persistence ql queries are error-checked 在project struct ...

  9. php 7 正式发版

    php 7 正式发版 php 在 2015年 12月 3 日 正式发布了 php7 以下是php7的新特性 性能是php5.6的2倍 显著的减少了内存的使用 抽象语法书 64位的支持 提高了异常层次 ...

  10. NodeJS爬虫系统初探

    NodeJS爬虫系统 NodeJS爬虫系统 0. 概论 爬虫是一种自动获取网页内容的程序.是搜索引擎的重要组成部分,因此搜索引擎优化很大程度上是针对爬虫而做出的优化. robots.txt是一个文本文 ...