JavaScript DOM操作之:DOM遍历

于 2021-12-23 10:44:55 发布
阅读量1.4k 收藏 2
点赞数 1
分类专栏： 前端学习 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Morbidmuse/article/details/122101535
版权 
DOM遍历:
	即查找元素
	如果你通过getElementById找到一个元素,
	然后又想得到该元素的父元素,子元素,兄弟元素.则需要用到DOM遍历
	
	
	查找父元素
	obj.parentNode:获取当前元素的父元素
	
	查找子元素
	childNodes\firstChild\lastChild
		获取所有的子节点,包括元素节点和文本节点
	children\firstElementChild\lastElementChild
		只获取元素节点
		如果要获取任意一个子节点可以使用children[i]的方式,i从0开始取值
	
	查找兄弟元素
		previousSibling/nextSibling
		前一个兄弟元素/后一个兄弟元素
		previousElementSibling/nextElementSibling

innerHTML和innerText
	使用innerHTML可以很方便地获取和设置一个元素的"内部元素""
	使用innerText可以很方便地获取和设置一个元素的"内部文本"

01查找父元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table{
				border-collapse: collapse;
			}
			table,tr,td{
				border:1px solid gray;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var oTd=document.getElementsByTagName('td');
				for (var i=0;i<oTd.length;i++){
					oTd[i].onclick=function(){
						var oParent=this.parentNode;
						oParent.style.color='white';
						oParent.style.backgroundColor='red';
	
					};
				};
			}
		</script>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<caption>考试成绩表</caption>
			<tr>
				<td>小明</td>
				<td>80</td>
				<td>80</td>
				<td>90</td>
			</tr>
			<tr>
				<td>小红</td>
				<td>70</td>
				<td>60</td>
				<td>90</td>
			</tr>
			<tr>
				<td>小强</td>
				<td>80</td>
				<td>100</td>
				<td>90</td>
			</tr>
			<tr>
				<td>小杰</td>
				<td>100</td>
				<td>80</td>
				<td>90</td>
			</tr>
			
			
			
		</table>
	</body>
</html>


02childNode和children的比较

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oUl=document.getElementById('list');
				var childNodeLen=oUl.childNodes.length;
				var childrenLen=oUl.children.length;
				// 结果为7,3,childNodes包括3个元素节点和4个文本节点每一个换行都是空白节点
				alert("childNodes的长度为:"+childNodeLen   
				+'\n'+"children的长度为:"+childrenLen);
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li>html</li>
			<li>css</li>
			<li>javascript</li>
		</ul>
	</body>
</html>


03lastchild举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn = document.getElementById('btn');
				var oUl = document.getElementById('list');
				oBtn.onclick=function(){
					// oUl.removeChild(oUl.lastChild)
					// 需要点两次才能删除一个li,因为两个li之间的空格也算一个子元素
					// 通过判断nodeType来解决这个问题
					// if (oUl.lastChild.nodeType==3){
					// 	oUl.removeChild(oUl.lastChild)
					// 	oUl.removeChild(oUl.lastChild)
					// }else{
					// 	oUl.removeChild(oUl.lastChild)
					// }
					// 也可以使用children\firstElementChild\lastElementChild
					// oUl.removeChild(oUl.lastElementChild)
					oUl.removeChild(oUl.children[0])
					
					
				}
				
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li>html</li>
			<li>css</li>
			<li>javascript</li>
			<li>jquery</li>
			<li>vue</li>
			
		</ul>
		<input type="button" name="" id="btn" value="删除" />
	</body>
</html>


04查找兄弟元素举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			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</li>
			
		</ul>
		<input type="button" name="" id="btn" value="删除" />
	</body>
</html>


05innerhtml和innertext举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				// 1使用appendChild的方式
				/*oImg = document.createElement('img');
				oImg.className='pic';
				oImg.src="./img/1112.jpg"
				oImg.style.border="1px solid solver"
				document.body.appendChild(oImg)
				*/
			   // 2使用innerHTML的方式
			   document.body.innerHTML='<img class="pic" src="./img/1112.jpg" style="border:1px solid solver" />'
			   oDiv=document.createElement('div')
			   document.body.appendChild(oDiv)
			   oDiv.innerText='这是一段用innerText添加的文本'
			}
		</script>
	</head>
	<body>
	</body>
</html>


06获取innerhtml和innertext

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				oP=document.getElementById('content');
				document.getElementById('txt1').value=oP.innerHTML;
				document.getElementById('txt2').value=oP.innerText;
				// 可知innerHTML获取的是元素内部所有的元素,包括文本内容和标签
				// 而innerText获取的仅仅是文本内容
				
			}
		</script>
	</head>
	<body>
		<p id="content">
			<strong style="color:hotpink">我爱张浅潜</strong>
		</p>
		innerHTML是:<input type="text" name="" id="txt1" value="" /><br>
		innerText是:<input type="text" name="" id="txt2" value="" />



	</body>
</html>

业精于勤荒于嬉戏喜西兮!

Morbidmuse
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
你可能不知道的JavaScript 遍历DOM的几种方法
Quiet-Night的博客
11-02 2万+
你可能不知道的JavaScript 遍历DOM的几种方法
JavaScriptDOM操作节点遍历的四种方法
weixin_43635751的博客
02-18 1785
节点遍历方法第一种，使用第二套DOMAPI 关系 遍历 // 元素节点的遍历方法 第一种 // var box = document.getElementById("box"); // for(var i=0,len = box.children.length;i<len;i++){ // console.lo...
利用DOM来遍历所有元素（children和childNodes的区别）
热门推荐
Allenyhy的博客
09-30 1万+
如果一个元素的子元素里还有子元素，那么我们常常用到的一个方法就是递归 例子如下图所示： function traversal(dom){ var len = dom.length; var d = null; for(var i=0; i&lt;len; i++){ d = dom[i]; console.log(d); if(d....
DOM元素遍历的几种方式（javascript）
个人前端记录
06-14 1万+
对于元素之间的空格，IE9以及之前的版本不会返回文本节点，，其他的浏览器会返回文本节点，所以我们在使用firstChild,lastChild时会导致行为不一致。 DOM中为元素新增了下面几个属性： childElementCount：返回子元素（不包括文本节点和注释）的数量； firstElementChild：firstChild的元素版； lastElementChild：lastC...
js遍历DOM(文档对象模型)对象
漓涂
08-18 2613
&lt;div&gt; &lt;span&gt;第一个&lt;/span&gt; &lt;span&gt;第二个&lt;/span&gt; &lt;span&gt;第三个&lt;/span&gt; &lt;/div&gt; &lt;span&gt;第四个&lt;/span&gt; &lt;/body&gt;
javascript DOM 操作.doc
最新发布
01-15
javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型（Document Object Model，DOM），以便于动态地更改网页的内容和结构。下面是javascript DOM 操作的相关知识点： IE 中...
JavaScript遍历DOM元素的常见方式示例
12-12
在JavaScript中，遍历DOM（文档对象模型）元素是网页动态操作的核心技能之一。DOM是HTML和XML文档的编程接口，允许我们通过脚本访问和修改文档内容、结构和样式。本文将详细介绍几种常见的遍历DOM元素的方法，并通过...
javascript先序遍历DOM树的方法
10-22
主要介绍了5种javascript先序遍历DOM树的方法，感兴趣的小伙伴们可以参考一下
dom:DOM 遍历、操作等
06-21
dom 模块实现了对 DOM 遍历、操作等的支持。 安装 成分 $ component install anchorjs/dom 沃洛 $ volo add anchorjs/dom 兼容性 成分 该模块使用格式。 要包含在组件构建中，请使用 ： component build -u ...
JavaScript简单遍历DOM对象所有属性的实现方法
10-23
主要介绍了JavaScript简单遍历DOM对象所有属性的实现方法,涉及JavaScript针对页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js 基础学习 遍历DOM
qq_40890601的博客
07-23 930
DOM这块知识很重要，做个总结吧！ DOM 表示文档对象模型，每个HTML标签都是一个对象，标签内的文本也是对象，所有这些对象都可以使用 js 来访问和修改。 js 共有12 种节点类型 通常用到的有四种： document — DOM 的“入口点”。 元素节点 — HTML 标签，树构建块。 文本节点 — 包含文本。 注释 — 有时我们可以将一些信息放入其中，它不会显示，但 JS 可以从 DOM 中读取它。 自动修正 如果浏览器遇到格式不正确的HTML，它会在形成DOM的时候修正它。 例如，顶级标签永
javascript 遍历页面中所有的元素
kuwoleft
09-30 601
javascript 遍历页面中所有的元素，获取每个元素的节点类型，全局索引号 var nodes = document.all; for(var i=0;i&lt;nodes.length;i++){ var o = nodes[i]; alert(o.tagName + ',' + o.nodeType + ',' + o.sourceIndex); } ...
javascript DOM的操作，更新，遍历，添加
何加焉的博客
02-17 2768
介绍javascript DOM的操作，更新，遍历，添加 首先列出来HTML代码等待嵌套脚本<!DOCTYPE html> <html> <body> <dl id="drink-menu" style="border:soild 1px #ccc;padding:6px;"> <dt id="摩卡咖啡">摩卡咖啡</dt> <dd id="橙汁">
js如何遍历dom
dianas
08-27 654
JS遍历页面输出DOM数量 [code] var domcount=0; function domsearch(domobj) { if(domobj.firstChild) { var tempdom=domobj.firstChild; do{ domsearch(tempdom); tempdom=tempdom.nextSibling; }while(tempdo
JS遍历DOM树
LY
06-10 1608
遍历页面中的DOM树，输出所有标签 var root=document.documentElement; function forDOM(root) { console.log(root.nodeName); var children=root.children; forChild(children); } function...
JavaScript 实现 DOM树 的遍历
ll_xiaohanqing_91的博客
07-09 6881
普通二叉树的遍历 function Tree() { var Node = function(key){ this.key = key; this.left = null; this.right = null; } root =null; } 前序遍历
JavaScript之DOM节点类型 、遍历节点、节点的属性以及节点方法
M_DREAMER的博客
06-11 1万+
先介绍一下节点类型都有哪些：一、节点类型节点类型    属性nodeType返回值    元素节点1属性节点2文本节点3注释节点（comment）8document9DocumentFragment11所以一般我们获取节点类型用  nodeType二、遍历节点树这种遍历可以遍历  文本类节点、注释节点、元素节点等。  任何浏览器都好使。&lt;div &gt; &lt;strong&gt;...
JS遍历的多种方式
吃瓜群众的博客
10-18 454
var arr = [1,2,3,4,5,"jgjjg"]; 方法一： for(var i=0;i<arr.length;i++){ console.log(i); } 方法二 不能使用 break 语句来跳出循环，也不能使用 return 语句来从闭包函数中返回。 arr.forEach(function(i){ conso

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值