DOM中使用节点对象遍历文档

最新推荐文章于 2024-03-28 11:50:25 发布
最新推荐文章于 2024-03-28 11:50:25 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： javaScript 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yayun0516/article/details/41594153
版权

childNodes获得是数组对象


下面看一个实例：

<html>
<head>
	<title>遍历文档</title>
	<script type="text/javascript">
		function init(){
			var body = document.childNodes[0].childNodes[2];//得到body节点
			var str ="";
			
			for(var i = 0 ; i < body.childNodes.length ; i++){//遍历body下的所有子节点
				if(body.childNodes[i].nodeType != 3)//去掉nodeType为3的子节点即text节点
					str += body.childNodes[i].nodeName+" ";
			}
			alert(str);
			/*var obj = document.getElementById('t');
			var c = obj.nextSibling;//寻找obj下一个兄弟节点
			alert(c.nodeValue);*/
		}
	</script>
</head>
<body>
	<a href="">test</a>
	这是一个段落
	<h1 id="t">这是一个标题</h1><!--我是注释-->
	<input type="button" οnclick="init()" value="点击"/>
</body>
</html>

效果如下：



yayun0516
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM遍历
xieixnxia的博客
07-06 607
DOM遍历可以分为以下三种情况： 查找父元素 查找子元素 查找兄弟元素 查找父元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table{border-collapse: collapse;} table,tr,td{border: 1px solid gra
DOM 元素的遍历
weixin_45147894的博客
10-16 337
对于元素间的空格，各浏览器会做出不同的反应，就导致了在使用childNodes和firstChild等属性时的行为不一致，由此，Element Traversal API 为DOM元素添加了以下５个属性。 childElementCount:返回子元素（不包括文本节点和注释）的个数 firstElementChild:指向第一个子元素 ，firstChild的元素版。 lastElementChild：指向最后一个元素，lastChild的元素版。 previousElementSibling:指向
DOM文档遍历
gvbgvbgb的博客
01-12 366
5.3.1元素遍历         1.利用选择器选择元素         2.使用for循环遍历元素         2.使用each函数遍历（由jQeury提供）：$(selector).each(function(index,element))         3.直接或间接利用元素。 5.3.2元素属性操作 attr()方法用于获取或设置元素属性，removeAttr(
DOM学习笔记---遍历页面所有元素节点
beinlife的博客
10-25 2233
//遍历页面所有元素节点 var blanks=[]; function getChildren(parent){   console.log(blanks.join("")+"|_"+(parent.nodeType==1?parent.nodeName:parent.nodeValue));   if(parent.children.length>0){     blanks.pus
jQuery DOM节点的遍历方法小结
10-19
本文将会详细讨论jQuery中用于DOM节点遍历的几个主要方法：children()、find()、parent()和parents()，并对它们的用法和特点进行说明。 首先，我们来看children()方法。children()用于选择匹配元素集合中每个元素的...
jQuery遍历DOM元素与节点方法详解
10-22
在jQuery中，遍历DOM元素和节点是常见的任务，这有助于我们高效地查找、操作和管理页面上的元素。以下是对jQuery遍历DOM元素与节点方法的详细解释： **一、向上遍历（祖先元素）** 1. `$(selector).parent([filter...
JQuery遍历DOM节点的方法
01-19
本文实例讲述了JQuery遍历DOM节点的方法。分享给大家供大家参考。具体分析如下： 本节的核心是介绍JQuery的DOM操作，前面介绍了很多创建、删除、替换等等节点操作。这里介绍如何遍历节点，选中临近节点等的一些方法...
PHP遍历XML文档所有节点的方法
10-24
下面的PHP脚本定义了一个名为`walk_tree`的函数，该函数递归地遍历给定的DOM节点，并打印出节点的名称（tagname）。 示例PHP代码如下： ```php function walk_tree($node, $depth = 0){ for($i = 0, $indent = '...
如何遍历整个DOM树
最新发布
Lipn_的博客
03-28 503
一篇文章掌握JavaScript遍历DOM树
LeetCode 114. 二叉树展开为链表
渣渣
09-19 408
思路：先利用DFS的思路找到最左子节点，然后回到其父节点，把其父节点和右子节点断开，将原左子结点连上父节点的右子节点上，然后再把原右子节点连到新右子节点的右子节点上，然后再回到上一父节点做相同操作。 public static void flatten(TreeNode root) { if(root!=null){ flatten(root.l); flatten(root.r); TreeNode tmp =..
html 遍历 所有节点 空白节点,如何遍历DOM
weixin_35019134的博客
06-23 771
介绍本系列中的前一个教程如何访问DOM中的元素 ，介绍了如何使用document对象的内置方法通过ID，类，标记名称和查询选择器来访问HTML元素。 我们知道，DOM被构造为一个以document节点为根节点和每个其他节点(包括元素，注释和文本节点)作为各个分支的节点树 。通常情况下，您将需要在DOM中移动，而不事先指定每个元素。 学习如何浏览DOM树并从分支转移到分支对于理解如何使用JavaSc...
遍历整个dom节点，理解判断节点类型
weixin_45773503的博客
11-07 313
dom实际上就是一颗数：如何去遍历一棵树，递归一定是我们最先想到的方法。 假设我们现在要拿到document中所有的节点，我们应该怎么去做，我们应该从document开始，向下找，将document的孩子节点一个个遍历，如果他的孩子中还有孩子节点，那么我们去递归。 我随便构建了一个html的结构，如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt
DOM深入学习 --- DOM 树介绍，如何遍历 DOM 树节点（一）
秋天，黄叶坠地，凉风有信。
03-09 3709
DOM 树 HTML 文档的主干是标签（tag）。 根据文档对象模型（DOM），每个 HTML 标签都是一个对象。嵌套的标签是闭合标签的“子标签（children）”。标签内的文本也是一个对象。 所有这些对象都可以通过 JavaScript 来访问，我们可以使用它们来修改页面。 例如，document.body 是表示 <body> 标签的对象。 运行这段代码会使 <body> 保持 3 秒红色状态: document.body.style.background = 'red'; /
dom 层次遍历-仿underscore
youjob012的专栏
08-13 370
经常在面试题中看到dom层次遍历，自己尝试着用underscore的式的方法写了个，试着还可以用。                                                                                                                             
遍历dom文档的所有节点
韩晓爽的专栏
02-21 840
遍历dom文档的所有节点               node.html                                 -->                                             用户名:                             window.onload =
html中如何循环数组渲染dom,列表渲染 之 v-for遍历数组和对象(利用key属性实现高效更新)...
weixin_42513209的博客
06-19 2004
(1) 遍历数组和对象Document列表{{list[0]}}{{list[1]}}{{list[2]}}{{list[3]}}遍历数组{{item}}{{index}}-{{item}}遍历对象{{item}}{{key}}：{{item}}{{index}}：{{key}}：{{item}}var vm = new Vue({el:"#app",data:{list:["火龙果","龙眼",...
JavaScript DOM编程艺术学习心得系列 ——（五）JavaScript语法之循环语句、函数、对象
annwyna的博客
08-09 186
1. 循环语句 if 语句或许是最重要、最有用的条件语句了，他的唯一不足是无法完成重复性的操作。if 语句里，花括号中的代码块只能执行一次，如果你想多次执行，那就需要用到循环语句了。 循环语句可以让我们反复多次地执行同一段代码。循环语句有几种不同的类型，但他们的工作原理几乎一样：只要给定的条件能够得到满足，包含在循环语句中的代码就将一直重复的执行，当给定条件的求值结果不再是 true 时，循环也就结束了。 1.1 while 循环 while 循环与 if 语句非常相似，它们的语法几乎完全一样，唯一的区别就
JS遍历(循环)——JS对象遍历(循环)&JS数组遍历(循环)
weixin_44143279的博客
01-14 2991
最近在处理一些偏逻辑的代码块经常遇到遍历问题，接下来跟大家一起温习一下有关于JS的遍历吧。 js数组遍历 1、for循环 //不缓存 var arr = [5,2,0,1,3,1,4]; for ( var i = 0; i <arr.length; i++){ console.log(arr[i]);//遍历所得子项 } for循环优化版：在JS性能优化中，有一个常见的小优化，即缓存数组长度 //缓存 var arr = [5,2,0,1,3,1,4]; var len = arr.len
XML文档解析：DOM操作与节点访问
例如，`XmlNode` 对象代表XML文档中的一个节点，它有三个主要属性：`nodeName` 表示节点的名称，`nodeType` 描述节点的类型（如元素、文本、属性等），而 `nodeValue` 提供了节点的值或内容。 `XmlNodeList` 是一组...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值