JavaScript之childNodes属性、nodeType属性学习
1.childNodes属性:在一颗节点树上,childNodes属性可以用来获取任何一个元素的所有元素,它是一个包含这个元素所有子元素的数组。
<body>
<script type="text/javascript">
function countBodyChildren() {
var allelements = document.getElementsByTagName("body");
alert(allelements[0].childNodes.length);
}
window.onload = countBodyChildren;
</script></body>
输出：3；这句代码的意思是输出<body></body>标签下所有的子元素数量；
那2么为什么是3呢,下面我要用到另一个属性nodeType属性来解释为什么会是3！
2.nodeType属性总共有12种可取值,但其中仅有三种具有实用价值。
(1)元素节点的nodeType属性值是1.
(2)属性节点的nodeType属性值是2.
(3)文本节点的nodeType属性值是3.
<body>
<script type="text/javascript">
function countBodyChildren() {
var childelements = document.getElementsByTagName("body")[0];
alert(childelements.childNodes[0].nodeType);
}
window.onload = countBodyChildren;
</script>
</body>
输出：3.说明body下第一个子节点是文本节点；
<body>
<script type="text/javascript">
function countBodyChildren() {
var childelements = document.getElementsByTagName("body")[0];
alert(childelements.childNodes[1].nodeType);
}
window.onload = countBodyChildren;
</script>
</body>
输出：1.说明body下第二个子节点是元素节点(<script></script>)；
<body>
<script type="text/javascript">
function countBodyChildren() {
var childelements = document.getElementsByTagName("body")[0];
alert(childelements.childNodes[2].nodeType);
}
window.onload = countBodyChildren;
</script>
</body>
输出：3.说明body下第三个子节点还是文本节点；
观察上面结论得出：html标签如<a></a>等都是元素节点、标签里面的文本内容都是文本节点、标签里面的属性如title,href都是属性节点。
注意:html标签之间的空格会被解释称文本节点；
做个测试->看如下代码:
<body><script type="text/javascript">function countBodyChildren(){var childelements = document.getElementsByTagName("body")[0];alert(childelements.childNodes[2].nodeType);}window.onload = countBodyChildren;</script></body>
这段代码会报错:因为这种代码排版下,body下只有2个子节点,第一个是:元素节点,第二个是<script></script>间的文本节点；
注意:文本节点的个数不是按照空格的个数,或者是文字的个数来计算的。
会了nodeType这个属性,就意味着,我们可以对特定的节点进行处理,例如，我们可以变出一个完全只处理元素节点的函数。
JavaScript之childNodes属性、nodeType属性学习的更多相关文章
- HTML DOM 的nodeType属性
在HTML DOM中每一部分都是节点: HTML元素是元素节点 HTML中属性是属性节点 文本是文本节点 注释是注释节点 这时我们要给它区分开我们就可以使用HTML DOM的nodeType属性 no ...
- childNodes属性 和 nodeType属性
childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素的全部子元素的数组:element.childNodes 如果需要把某个文档的body元素的全体子元素检索出来.首先使 ...
- JavaScript中childNodes、children、nodeValue、nodeType、parentNode、nextSibling详细讲解
其中属性.元素(标签).文本都属于节点 <title></title> <scripttype="text/javascript"> windo ...
- Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理
节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...
- nodeType属性在vue源码中的使用
每个节点都有一个 nodeType 属性,用于表明节点的类型,节点类型由 Node 类型中定义12个常量表示: nodeType在vue中的应用 在vue编译的过程中需要查找html结构中的双大括号 ...
- JavaScript中的方法和属性
书读百遍其义自见 学习<JavaScript设计模式>一书时,前两个章节中的讲解的JavaScript基础知识,让我对属性和方法有了清晰的认识.如下是我的心得体会以及部分摘录的代码. 不同 ...
- 深入理解javascript对象系列第二篇——属性操作
× 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...
- javascript继承(一)—类的属性研究
本篇文章主要针对javascript的属性进行分析,由于javascript是一种基于对象的语言,本身没有类的概念,所以对于javascript的类的定义有很多名字,例于原型对象,构造函数等,它们都是 ...
- JavaScript的检测属性、属性特性、枚举属性
/* 检测属性 检测属性可以通过三种方式 1.通过in运算符 2.通过hasOwnPerperty() 如果给定的属性是继承属性将返回false 3.通过propertyIsEnumerable(): ...
随机推荐
- Codeforces 325D
#include <cstdio> #include <algorithm> #include <cstring> #include <cstdlib> ...
- <Win32_20>纯c语言版的打飞机游戏出炉了^_^
经过昨天的苦战,终于完成了纯C版的打飞机游戏——使用微信打飞机游戏的素材,不过玩法有些不同,下面会有详述 一.概述游戏的玩法.实现效果 1. 游戏第一步,简单判断一下,给你一个准备的时间: 2.选择& ...
- maven项目打包
配置 你的pom.xml文件,配置 packaging为 war ,然后点击 pom.xml右键,run as 选择 install 或是 package: 如果项目没问题,配置没问题,就会在项目的t ...
- java多线程（同步与死锁问题，生产者与消费者问题）
首先我们来看同步与死锁问题: 所谓死锁,就是A拥有banana.B拥有apple. A对B说:你把apple给我.我就把banana给你. B对A说:你把banana给我,我就把apple给你. 可是 ...
- uva 10306 - e-Coins（完全背包）
题目链接:10306 - e-Coins 题目大意:给出m和s, 再给出m种电子硬币,每种硬币有两种金额xi,yi.现在要在m种硬币种选若干个硬币,可以重复选同一种硬币, 使得(x1 + x2 + . ...
- jQuery源码笔记——回调对象
回调对象是一个多用途的回调列表对象,提供了强大的的方式来管理回调函数列表. 最简单的缓存对象 function Callbacks(){ var list = [], self = { add: fu ...
- java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/LoopTag
异常原因:缺少jstl.jar包.一般在新建Web项目是jstl一项不要选none就不会出现这个问题.(还有可能就是缺少servlet-api.jar)
- 关于sizeof（）和内存对齐
PS补充:枚举类型的字节数为什么为4 百度知道回答: typedef enum e1{ MON, TUE, THI, }e; e1是一个数值,它的允许值范围是: MON,TUE,THI, 它的取值为其 ...
- 学习使用GitHub（一）--之入门
因为经常Windows和linux系统交替的使用,在实验室一台电脑,在家一台电脑,自己的电脑和实验室的电脑上面的代码往往没法同步,以前由于种种原因(其实就是懒,没有学习GitHub这样的代码管理工具) ...
- wdcp升级php和mysql
安装没什么好说的,按照wdcp官方去搞就行了,这里如果是centos系统建议使用rpm安装方式附件如下(这里包含了本文后面用到的三个文件) http://download.csdn.net/detai ...