一、通过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操作 节点的遍历的更多相关文章

  1. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  2. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  3. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  4. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  5. jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...

  6. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  7. 仅100行的JavaScript DOM操作类库

    如果你构建过Web引用程序,你可能处理过很多DOM操作.访问和操作DOM元素几乎是每一个Web应用程序的通用需求.我们我们经常从不同的控件收集信息,我们需要设置value值,修改div或span标签的 ...

  8. JavaScript DOM操作浅谈

    1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript ...

  9. dom操作节点之常用方法

    DOM:获取节点:{1. document.getElementById (元素id):通过元素id找到节点2. document.getElementsByClassName (元素类名classN ...

随机推荐

  1. Invoke 与 BeginInvoke 应用场景

    1.委托中 Invoke , BeginInvoke 特点 Invoke  : 同步调用 , 委托在当前线程执行 BeginInvoke : 异步调用 , 通常使用线程池资源执行委托. 2. UI  ...

  2. tensorflow_mnist数据集一直加载错误的解决办法

    tensorflow数据集一直加载错误的解决办法: from tensorflow.examples.tutorials.mnist import input_data mnist = input_d ...

  3. ubuntu17.10 安装firefox的flash

    1. flash下载地址:https://get.adobe.com/flashplayer/ 2. 选择tar.gz for linux 3. 下载后解压tar包.里面有个libflashplaye ...

  4. C# winform中Show()和ShowDialog()的区别

    项目实际开发中需要根据不同的应用场景利用Show和ShowDialog,尤其是三级弹窗,慎用ShowDialog,否则会导致关闭第三级窗体时,自动关闭第二级,解决方案就是在第一级窗体弹出时采用Show ...

  5. Egret学习笔记.2 (Egret开发环境)

    配置Egret的开发环境是很简单的,去https://www.egret.com/products/engine.html下载 然后基本就是下一步下一步,安装好了就好了,装好了选择Wing组件,然后下 ...

  6. 剑指offer第八天

    32.把数组排成最小的数 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323 ...

  7. NewLife.XCode 上手指南2018版(一)代码生成

    目录 NewLife.XCode 上手指南2018版(一)代码生成 NewLife.XCode 上手指南2018版(二)增 NewLife.XCode 上手指南2018版(三)查 NewLife.XC ...

  8. 嵌入式Linux引导过程之1.4——Xloader的ddr_init

    这里我们来看XLOADER_ENTRY中调用的第二个标号ddr_init处的代码,这部分代码的作用是对外部内存SDRAM进行初始化,在我 spearplus开发板中,使用的是DDR SDRAM.在调用 ...

  9. YPbPr 和 YCbCr的区别 .

    这几天在做分量视频输入,涉及分量视频表示,接触到YPbPr和YCbCr的概念,发现不光自己的项目上,对这两个概念错乱,就是网上也充斥着大量错误的说法. 分量接口有两种名称YPbPr和YCbCr,这是两 ...

  10. jQuery中的$.ajax()方法

    jQuery中的$.ajax()方法 $.ajax({ type:"POST", url:"../page/user.action?userId=" + use ...