1.什么是DOM遍历？

DOM遍历，可以简单地理解为“查找元素”。举个例子，如果你使用getElementById()等方法获取一个元素，然后又想得到该元素的父元素、子元素，甚至是下一个兄弟元素，这种操作涉及的就是DOM遍历

2.查找父元素

在JavaScript中，我们可以使用parentNode属性来获得某个元素的父元素

实例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>TEXT</title><style type="text/css">#box {width: 100px;height: 100px;background-color: hotpink;}#fatherBox {width: 200px;height: 200px;background-color: red;}</style><script src="js/index.js"></script>
</head>
<body><div id="fatherBox">父元素内容<div id="box"></div></div><input type="button" value="点击变化" id="btn"/>
</body>
</html>

window.onload=function () {var oBtn = document.getElementById("btn");var oBox = document.getElementById("box");var oParentBox = oBox.parentNode;oBtn.onclick = function() {oParentBox.style.backgroundColor = "orange";};
}

初始的内容：

点击按钮之后发生了变色：

3.查找子元素

在JavaScript中，我们可以使用以下两组方式来获得父元素中的所有子元素或某个子元素。

childNodes、firstChild、lastChild
children、firstElementChild、lastElementChild

其中，childNodes获取的是所有的子节点。注意，这个子节点是包括元素节点以及文本节点的。（不常用）

而children获取的是所有的元素节点，不包括文本节点。

实例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title>
<script>window.onload=function(){var oBtn=document.getElementById("btn");var oUl=document.getElementById("list");oBtn.onclick=function(){oUl.removeChild(oUl.lastElementChild);}}
</script>
</head>
<body>
<ul id="list"><li>HTML</li><li>CSS</li><li>JavaScript</li><li>jQuery</li><li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>

firstElementChild获取的是第一个子元素节点，lastElementChild获取的是最后一个子元素节点。如果我们想要获取任意一个子元素节点，可以使用children[i]的方式来实现

4.查找兄弟元素

在JavaScript中，我们可以使用以下2组方式来获得兄弟元素。

previousSibling、nextSibling
previousElementSibling、nextElementSibling

previousSibling用于查找前一个兄弟节点，nextSibling用于查找后一个兄弟节点。previousElementSibling用于查找前一个兄弟元素节点，nextElementSibling用于查找后一个兄弟元素节点

跟查找子元素的两组方式一样，previousSibling和nextSibling查找出来的可能是文本节点（一般是空白节点），因此如果只操作元素节点，建议使用previousElementSibling和nextElementSibling

案例：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><script>window.onload=function(){var oBtn=document.getElementById("btn");var oUl=document.getElementById("list");oBtn.onclick=function(){var preElement=oUl.children[2].previousElementSibling;oUl.removeChild(preElement);};}</script>
</head>
<body><ul id="list"><li>HTML</li><li>CSS</li><li>JavaScript</li><li>jQuery</li><li>Vue.js</li></ul><input id="btn" type="button" value="删除" />
</body>
</html>

JS DOM之DOM遍历相关推荐

【原生js】js动态添加dom，如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...
DOM系列：DOM树和遍历DOM
上一节,咱们整理了DOM系列中的第一篇,主要介绍浏览器与DOM相关的知识.从标题中我们可以看出来,今天所要学的东西包含两个部分,第一部分是DOM树,第二部分是遍历DOM.如果你和我一样对于DOM树和遍 ...
前端基础入门之js什么是DOM Document Object Model
文章目录 DOM 1.DOM简介文档对象模型 2.节点节点类型节点属性文档节点(Document) 元素节点(Element) 文本节点(Text) 属性节点(Attr) 3.事件 4.文 ...
自学js第十二天:DOM概念和基础操作
Web API 总结1: dom文档树的作用,就是把网页全部内容转为一个个js节点对象去操作 , 因此dom的文档树的内部组成就是有许多叶子node节点对象.分别有七种类型的叶子包含网页全部内容都有对 ...
js中的DOM对象和jQuery对象的比较
1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...
java dom遍历_JavaScript DOM文档遍历实战
在介绍了<JavaScript DOM修改文档树方法实例>与<JavaScript DOM实战:创建和克隆元素>,本文将介绍JavaScript DOM文档遍历的详细知识,我们 ...
JS对象与Dom对象与jQuery对象之间的区别
前言通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...
reactjs创建虚拟DOM的两种方式：使用jsx和js创建虚拟DOM
1_使用jsx创建虚拟DOM <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
html按钮冻结,Vue js按钮冻结dom
我想切换一个包含加载动画的按钮按钮,直到该函数完成使用v-if.但是当我按下按钮时,DOM冻结,span元素不变,直到函数调用结束.我如何让DOM不冻结并显示加载图标?非阻塞按钮按下可能是一个解决方案 ...

JS DOM之DOM遍历