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 ...
随机推荐
- w !sudo tee %
w !sudo tee % 该命令可用于保存有权限的写文件
- 利用FileReader实现上传图片前本地预览
引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...
- PHP的性能优化方法总结
什么情况之下,会遇到PHP性能问题? 1:PHP语法使用不恰当. 2:使用PHP语言做了它不擅长的事情. 3:使用PHP语言连接的服务不给力. 4:PHP自身的短板(PHP自身做不了的事情). 5:我 ...
- Mysql取随机数据效率测试(400W条中读取100条)
测试数据表的创建在文章:http://www.cnblogs.com/wt645631686/p/6868192.html 先看一下我的SQL方案 SELECT * FROM `emp` WHERE ...
- mysql字符设置
MySQL字符集设置 mysql>CREATE DATABASE IF NOT EXISTS mydb default charset utf8 COLLATE utf8_general_ci; ...
- Git & github 使用指南
Git的安装: 1.下载 Git for windows下载网址:https://git-for-windows.github.io/ 2.安装 选择安装路径: 选择组件:默认 是否修改环境变量 : ...
- canvas API总结
从简单的基本图形,到复杂炫酷的动画,通过canvas元素获取的2D图形渲染上下文CanvasRenderingContext2D,能够使用丰富的API来进行图形绘制.这篇文章将会总结在之前的canva ...
- printk优先级
printk是在内核中运行的向控制台输出显示的函数,Linux内核首先在内核空间分配一个静态缓冲区,作为显示用的空间,然后调用sprintf,格式化显示字符串,最后调用tty_write向终端进行信息 ...
- 【mongodb系统学习之一】mongodb的简单安装
linux中mongodb的安装(最简单的): 1.下载mongodb安装包,这里用mongodb-linux-x86_64-2.6.9.gz 提供一个下载地址:http://pan.baidu.co ...
- 提取DirectShow中视频采集的数据
DirectShow中,数据流(Data Flow)都是依次流过各个Filter的.它对数据的管理也有自己的方法,而且并没有向用户提供一个统一的接口,供用户操作数据流.这里以提取视频采集在的每帧为位图 ...