`
换个号韩国红果果
  • 浏览: 48098 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类

遍历dom 并且存储(将每一层的DOM元素存在数组中)

阅读更多
数组从0开始!!

var a=[],i=0;
for(var j=0;j<30;j++){
		a[j]=[];//数组里套数组,且第i层存储在第a[i]中
	}

function walkDOM(n){
	
			do{
			if(n.nodeType!==3)//筛选去除#text类型

			a[i].push(n);
			
			//console.log(n);
			if(n.hasChildNodes()){
				i++;
				walkDOM(n.firstChild)
			}
			if(!n.nextElementSibling&&n.nodeName!=='HTML')  i--;
//若内层是最后一个元素并且不是html元素(保证最后i为0)则在退出当前这个递归前变为上一级以便继续向上一级a[i]添加元素
		}while(n=n.nextElementSibling)
		
	
}
walkDOM(document.documentElement);
for (var i = 0; i < a.length; i++) {
	if(!!a[i][0]){//若啊a[i]的第一项元素为空,说明层级未达到这一级,不予考虑
	console.log(i+':');
	console.log(a[i])
}
};

分享到:
评论

相关推荐

    vue使用map代替Aarry数组循环遍历的方法

    3. 当需要根据元素的某个属性值快速获取数组中的索引时,可以直接使用Map对象的get方法: ```javascript let index = this.indexMap.get(someComponentId); ``` 这样,我们就可以快速获得某个属性值对应的数组索引...

    xml转为数组格式

    根节点成为数组的第一层,子节点成为下一层,以此类推。 例如,对于以下XML: ```xml &lt;item id="1"&gt;Item 1 &lt;item id="2"&gt;Item 2 ``` 在JavaScript中,转换成数组可能是这样的: ```javascript var parser = new...

    关于js遍历表格的实例

    - 在内层循环中,使用`innerText`属性获取每个单元格的文本内容,并将其存储在`arrData`数组中对应的位置。 - 最后,使用`alert`函数弹出一个警告框,显示遍历后的表格数据,其中各数据项以逗号分隔。 3. **按钮...

    第34章 项目1-博客前端:封装库--CSS选择器[下]1

    - 初始化`elements`数组用于存储最终匹配的元素,`childElements`用于存储当前层匹配到的元素,`node`数组则存储上一层的元素集合。 - 遍历每个选择器部分,根据其首字符判断选择器类型(ID、类名或标签名): - ...

    javascript入门笔记

    用来存储数据的一个容器 2、声明变量(重点) 1、声明变量 var 变量名; 2、为变量赋值 变量名=值; 3、声明变量并赋初始值 var 变量名=值; 注意: 1、变量在声明时没有赋值的话,那么值为 undefined 2、声明...

    MATLAB设计_将xml文档转换为MATLAB结构.zip

    MATLAB通过遍历DOM节点,将XML的层次结构映射到MATLAB结构的层次。 3. **转换为结构体**:在遍历过程中,XML的元素名转换为MATLAB结构体的字段名,元素值作为字段值。如果元素有子元素,这些子元素会成为嵌套的...

    jquery开发入门整理(所需要了解的)

    jQuery提供了多种遍历方法,如`.each()`、`.map()`等,这些方法可以用来遍历DOM元素或数组,并对每个元素执行指定的操作。 ### 12种jQuery性能优化方法解析 - **减少DOM操作**:尽可能减少直接操作DOM的次数。 - **...

    JS与jQuery遍历Table所有单元格内容的方法

    - 通过`Array.prototype.push`方法将文本内容保存到数组中,以供之后使用。 - 在另一个函数`fanhui`中,使用`.show()`和`.hide()`方法显示或隐藏表格。 这些操作都是基于jQuery的选择器和方法来完成,体现了jQuery...

    js菜鸟笔记之杨辉三角_ekom.cn

    在给出的代码中,使用了JavaScript的数组来存储杨辉三角的每一层。首先创建了一个二维数组`yh`,并初始化了其长度,这在多维数组操作中非常常见。二维数组可以被视为一个数组的数组,其中每个元素本身也是一个数组,...

    web前端面试题小汇总

    尽管它们都可以使用 `[i]` 访问每个元素,都有 `length` 属性记录元素个数,都可以使用 `for` 循环遍历,但是它们之间存在一些关键的不同点。类数组对象不能使用数组 API,而数组可以。 闭包 闭包是一个词法结构,...

    使用phpQuery获取数组的实例

    在示例代码中,attr('value') 被用于获取input元素的value属性值,并将其加入到数组中。 知识点六:phpQuery对HTML5的兼容性 phpQuery在解析和操作HTML5文档时,通常能够良好地工作。不过,需要注意的是,由于...

    address.js的代码.pdf

    同时,计算每个城市名称的宽度,存储在`kuandu`数组中,以便于设置城市列表的宽度。 在动态调整宽度部分,使用了`Array.max()`函数找出宽度最大的城市,然后根据最大宽度设置`.m_zlxg2`的宽度。这里有一个自定义的`...

    js二级导航垂直展开折叠菜单其一级二级栏目均是用js生成.zip

    4. **数据结构**:一级和二级菜单的数据可能存储在一个数组或对象中,这样可以方便地遍历和构建菜单结构。例如,一级菜单可能是一个数组,每个元素代表一级菜单项,而每个一级菜单项又包含一个二级菜单的数组。 5. ...

    js 树结构 tree

    - 特殊类型的二叉树包括:满二叉树(所有层都是满的,最后一层的节点都在左侧),完全二叉树(除了最后一层外,其他层都是满的,最后一层的节点尽可能地靠左)。 5. **平衡二叉树(Balanced Binary Tree)** - ...

    js多排图片自动滚动特效有蒙层,很形象

    7. **数据结构与遍历**:为了管理多张图片,可能需要使用数组或其他数据结构来存储图片信息。在JavaScript中遍历这些数据,控制每张图片的显示顺序和时间,实现无缝滚动。 8. **性能优化**:在处理大量图片的滚动时...

    js中DOM三级列表(代码分享)

    在本文中,我们将深入了解JavaScript中如何使用DOM(文档对象模型)技术实现三级联动列表。三级联动列表是一种常见的用户界面组件,常用于电子商务、产品分类等场景。在这个过程中,我们将探讨如何通过HTML、CSS和...

    js标准树结构(绝对好东西)

    2. 数组表示法:使用数组存储节点,数组的索引表示层级关系,数组中的元素可能是值或其他数组(代表子节点)。 3. 类(Class)表示法:通过定义类,如TreeNode,包含属性和方法来创建、操作树节点。 三、JavaScript...

    JS构建页面的DOM节点结构的实现代码

    该函数`walkDom`递归地遍历所有元素节点,并将它们存储在一个数组中。然后,根据这个数组构建树形结构。 构建树形结构的函数`createTree`示例如下: ```javascript function createTree(tree){ var array = []; ...

    详解 vue.js用法和特性

    每个实例都与一个HTML元素相关联,并且实例中的属性(存储在data对象中)会自动与视图层绑定。当这些属性发生变化时,相应的DOM部分也会更新,这种机制称之为响应式系统。 Vue.js 2.x版本相较于早期版本在功能和...

Global site tag (gtag.js) - Google Analytics