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这个属性,就意味着,我们可以对特定的节点进行处理,例如,我们可以变出一个完全只处理元素节点的函数。
转载于:https://www.cnblogs.com/GreenLeaves/p/5692576.html
JavaScript之childNodes属性、nodeType属性学习相关推荐
- childNodes属性、nodeType属性、nodeValue属性
childNodes属性 在一颗节点树上,childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素全部子元素的数组:语法element.childNodes. 由childN ...
- javascript的操作DOM的属性
DOM JavaScript分三个部分 ECMAScript标准: JS 的基本语法 DOM: Document Object Model ---> 文档对象模型-----操作页面的元素 BOM ...
- 【Infragistics教程】在javascript类中添加静态成员属性
2019独角兽企业重金招聘Python工程师标准>>> [下载Infragistics Ultimate最新版本] 在一个javascript类中创建一个属性的需求,它需要被所有对象 ...
- JavaScript 中遍历对象的属性
原文链接 JavaScript 中遍历对象的属性 参考 JavaScript中的属性:如何遍历属性 <JavaScript 高级程序设计> 概述 遍历 JavaScript 对象中的属性没 ...
- html dom的nodetype值介绍,HTML DOM nodeType 属性
HTML DOM nodeType 属性 实例 获得 body 元素的节点类型: document.body.nodeType; 结果: 1 定义和用法 nodeType 属性返回以数字值返回指定节点 ...
- JavaScript 中遍历对象的属性 1
JavaScript 中遍历对象的属性 原文链接 JavaScript 中遍历对象的属性 参考 JavaScript中的属性:如何遍历属性 <JavaScript 高级程序设计> 概述 遍 ...
- javascript 解决IE8 兼容 placeholder 属性 含password
javascript 解决IE8 兼容 placeholder 属性 含password function placeholderfun(){if( !('placeholder' in docume ...
- 从零开始学前端:中括号代替点操作,获取对象,自定义标签属性 --- 今天你学习了吗?(JS:Day3)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:初识函数,合法属性与自定义属性 - 今天你学习了吗?(JS:Day2) 文章目录 从零开始学前端:程序猿小白 ...
- 从零开始学前端:CSS字体属性和文本属性 --- 今天你学习了吗?(CSS:Day08)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录 从零开始学前端:程序猿小白也可以完全掌握 ...
最新文章
- Apache源码包在LINUX(CENTOS6.8)中的安装(出现问题及解决)
- 利用二极管的P-N结的I-V特性测量Boltzmann常数
- hihoCoder 第136周 优化延迟(二分答案+手写堆)
- Node Sass does not yet support your current environment: Windows 64-bit然如何解决,cnpm此问题解决方法
- Jsp----注册登陆
- 剑指offer——变态跳台阶
- 2022年全球及中国固态电解质(SSE)行业应用现状与十四五投资潜力分析报告
- 每天一道LeetCode-----最长无重复子串
- autojs之提取图片中的红色文字(通过找边界进行裁剪)
- 南京大学计算机专业复试面试,南京大学计算机CS专业复试超全PPT及真题、面试内部资料(离散编译上机面试)...
- 微擎安装模块出现 Connection timed out after 60000 milliseconds
- MYS-6ULX资料汇总
- 盘点中国人民大学与加拿大女王大学金融硕士项目这个让在职学员梦开始的地方
- U盘无法格式化(提示U盘文件系统变为了RAW格式)【一般应用】
- 杭州端点科技java,端点实习面试(一面)
- 北航linux内核编译及烧录实验报告,北航操作系统实验Lab1笔记
- opencv学习笔记——图像
- GRU预测股票价格,附带例子和完整代码
- ROS节点开机自启动
- 《游梦人·诗的诞生》
热门文章
- Linux下LCD 10分钟自动关屏的问题总结
- 部署LAMP-LAMP平台集成
- 广西师范大学计算机调剂难吗,2014年广西师范大学考研调剂过来人给的建议
- 地壳中元素含量排名记忆口诀_【中考化学】初中化学记忆性知识点03-生活中的化学-生活常识...
- 如何构建企业出海的“免疫力“?深入解读阿里云CDN安全能力
- 十年后 AI 是什么样?
- AI现状 人才短缺成为障碍
- 写那么多年Java,还不知道啥是Java agent的必须看一下!
- 送给程序员终身受用的建议
- 为了在全球“买买买”,阿里工程师自研了一套海外HR系统