javascript DOM操作 节点的遍历
一、通过javascript的遍历可以由一个节点来查找它的子节点(childNodes)、兄弟节点(nextSibling/previousSibling)和父节点(parentNode)。
代码说明:
<ul id="myul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
1、获取ul的所有子节点——childNodes
<script>
var ul=document.getElementById('myul');
for(var i=0;i<ul.childNodes.length;i++){
console.log(ul.childNodes[i]);
}
</script>
2、因为通过1获取了ul的所有的子节点,所以就可以直接通过childNodes来直接访问它里面的子节点
提醒:1、childNodes最后获得的是一个数组对象childNodes[i] 2、这里所获得的素有子节点也包括空白节点,看截图
所以,
访问第一个li: ul.childNodes[1]或者ul.childNodes.item(1)
第二个li: ul.childNodes[3]或者ul.childNodes.item(3)
第三个li: ul.childNodes[5]或者ul.childNodes.item(5)
第四个li: ul.childNodes[7]或者ul.childNodes.item(7)
3、访问到了第一个li,就可以通过第一个li节点来访问后面一个或者前面一个,那就是nextSibling/previousSibling
所以:
第二个li:ul.childNodes[1].nextSibling.nextSibling(不要忘了之间的空白节点);
第一个li: ul.childNodes[3].previousSibling.previousSibling
4、当然我们也可以直接通过firstChild和lastChild来访问ul的第一个节点和第二个节点
5、访问到子节点,直接parentNode找到父节点
二、解决空白节点的问题
1、在js里面添加一个判断
<script>
var ul=document.getElementById('myul');
for(var i=0;i<ul.childNodes.length;i++){
if(ul.childNodes[i].nodeType==1){
console.log(ul.childNodes[i]);
}
}
</script>
这样控制台打印出的结果就是4个li子元素
2、还是上面的例子
获得所有li: ul.children获得一个数组
第一个li:ul.children[0]或者ul.children.item(0)或者ul.firstElementChild;
兄弟li:nextElementSibling/previousElementSibling
最后一个li:lastElementChild
javascript DOM操作 节点的遍历的更多相关文章
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
- javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
- javascript DOM 操作 attribute 和 property 的区别
javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...
- javascript DOM操作之 querySelector,querySelectorAll
javascript DOM操作之 querySelector,querySelectorAll
- jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...
- javascript DOM操作HTML文档
文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...
- 仅100行的JavaScript DOM操作类库
如果你构建过Web引用程序,你可能处理过很多DOM操作.访问和操作DOM元素几乎是每一个Web应用程序的通用需求.我们我们经常从不同的控件收集信息,我们需要设置value值,修改div或span标签的 ...
- JavaScript DOM操作浅谈
1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript ...
- dom操作节点之常用方法
DOM:获取节点:{1. document.getElementById (元素id):通过元素id找到节点2. document.getElementsByClassName (元素类名classN ...
随机推荐
- Java经典编程题50道之二十一
求1+2!+3!+...+20!的和. public class Example21 { public static void main(String[] args) { sum( ...
- Yii2框架RBAC(Role-Based Access Control)的使用
1.在项目的common/config/main.php文件的components中添加如下代码: 'authManager' => [ 'class' => 'yii\rbac ...
- Python实现二分查找
老生常谈的算法了. #!/usr/bin/python # -*- coding:utf-8 -*- # Filename: demo.py # 用python实现二分查找 def binarySea ...
- 【SSH框架】系列之 Spring 整合 Hibernate 框架
1.SSH 三大框架整合原理 Spring 与 Struts2 的整合就是将 Action 对象交给 Spring 容器来负责创建. Spring 与 Hibernate 的整合就是将 Session ...
- python项目使用jsonschema进行参数校验
python项目使用jsonschema进行参数校验 最近想要给一个新的openstack项目加上参数校验,过完年回来准备开工的时候,发现其他人已经在做了,对应的patch是:https://revi ...
- layui的几个简单使用(简单弹窗,加载效果,移除加载效果)
1.加载效果和移除加载效果 function layuiLoading(msg){ layui.use(['layer', 'form'], function(){ index = layer.loa ...
- Eclipse远程调试hadoop源码
1. 修改对应调试端口 之前的一篇blog里讲述了hadoop单机版调试的方法,那种调试只限于单机运行hadoop命令而已,对于运行整个hadoop环境而言是不可取的,因为hadoop会开启多个jav ...
- mac 系统安装 eclipse 方法
经过好几天的折腾,终于在各种不靠谱的经验.说明的忽悠中把自己心爱的 mac 安装上了 eclipse,看到别人的不靠谱,我决定自己写一篇经验,为了大家能够不走我这么多的弯路,也为了自己将来可以回来看看 ...
- 使用dlib中的深度残差网络(ResNet)实现实时人脸识别
opencv中提供的基于haar特征级联进行人脸检测的方法效果非常不好,本文使用dlib中提供的人脸检测方法(使用HOG特征或卷积神经网方法),并使用提供的深度残差网络(ResNet)实现实时人脸识别 ...
- supervessel-免费云镜像︱GPU加速的Caffe深度学习开发环境
开发环境介绍 在SuperVessel云上,我们为大家免费提供当前火热的caffe深度学习开发环境.SuperVessel的Caffe有如下优点: 1) 免去了繁琐的Caffe环境的安装配置,即申请即 ...