JavaScript之childNodes属性、nodeType属性学习
时间:2022-04-24
本文章向大家介绍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这个属性,就意味着,我们可以对特定的节点进行处理,例如,我们可以变出一个完全只处理元素节点的函数。
- 大白话 Promise,这到底是干啥用的?
- Make
- perf ,比较好的一个程序性能测试工具
- Linux shell 程序设计5——shell中一些特殊符号的用法总结
- Linux shell 程序设计4——shell变量
- 基于CallContextInitializer的WCF扩展导致的严重问题
- 1228-redux学习笔记(摘录) | WEB前端零基础课
- 在fedora下使用搜狗拼音输入法
- 一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)
- 【1120-WEB零基础课】| 单例模式,下周要讲
- 使用gerrit作为代码评审工具
- 如何重构你的时间序列预测问题
- 【聊】我个人眼里的ReactJs生态系统
- [WCF REST] Web消息主体风格(Message Body Style)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 深入理解linux执行文件提示No such file or directory的背后原因
- Laravel 控制器:从 MVC 模式聊起
- 基于yolo5工地安全帽和禁入危险区域识别系统,附数据集
- Go 常见并发模式实现(一):调度后台处理任务的作业程序
- 路由使用进阶(二)
- linux No space left on device由索引节点(inode)爆满引发500问题
- linux中批量添加文件前缀的操作方法
- Go 常见并发模式实现(二):通过缓冲通道实现共享资源池
- 在 Linux 终端中查找域名 IP 地址的命令(五种方法)
- Laravel 表单方法伪造与 CSRF 攻击防护
- Java图形验证码支持gif、中文、算术等
- Go 常见并发模式实现(三):通过无缓冲通道创建协程池
- Linux下安装SVN服务端的方法步骤
- SSM项目频繁打成war包部署,使用tomcat和maven实现热部署配置
- Laravel 视图使用入门