您的当前位置:首页JS操作DOM树遍历方法总结

JS操作DOM树遍历方法总结

2023-11-30 来源:华拓教育

这次给大家带来JS操作DOM树遍历方法总结,JS操作DOM树遍历的注意事项有哪些,下面就是实战案例,一起来看一下。

本文实例讲述了JavaScript实现的DOM树遍历方法。分享给大家供大家参考,具体如下:

二叉 DOM 树的遍历

function Tree() { var Node = function(key){ this.key = key; this.left = null; this.right = null; } root =null;}

前序遍历

首先访问根结点,然后遍历左子树,最后遍历右子树

Tree.prototype.preOrderTraverse = function(callback){ preOrder(root, callback);}var preOrder = function(node,callback){ if(node !== null){ callback(node.key); preOrder(node.left, callback); preOrder(node.right, callback); }}

修改为DOM二叉树:

var preOrder = function(node,callback) { callback(node); if(node.firstElementChild) {//先判断子元素节点是否存在 this.preOrder(node.firstElementChild,callback); } if(node.lastElementChild) { this.preOrder(node.lastElementChild,callback); }};

中序遍历

首先遍历左子树,然后访问根结点,最后遍历右子树。

Tree.prototype.inOrderTraverse = function(callback){ inOrder(root, callback);}var inOrder = function(node,callback){ if(node !== null){ inOrder(node.left,callback); callback(node.key); inOrder(node.right, calback); }}

修改为DOM二叉树:

var inOrder = function(node,callback){ if(node.firstElementChild) { this.inOrder(node.firstElementChild); } callback(node); if(node.lastElementChild) { this.inOrder(node.lastElementChild); }}

后序遍历

首先遍历左子树,然后遍历右子树,最后访问根结点。

Tree.prototype.postOrderTraverse = function(callback){ postOrder(root, callback);}var postOrder = function(node,callback){ if(node !== null){ postOrder(node.left,callback); postOrder(node.right, calback); callback(node.key); }}

修改为DOM二叉树:

var postOrder = function(node,callback){ if(node.firstElementChild) { this.postOrder(node.firstElementChild); } if(node.lastElementChild) { this.postOrder(node.lastElementChild); } callback(node);}

多叉 DOM 树的遍历

广度优先遍历

首先遍历根节点,然后访问第一层节点,第二层节点,....,直到访问到最后一层。

借助于队列,用非递归的方式对多叉树进行遍历

Tree.prototype.BFSearch = function(node,callback){ var queue=[]; while(node!=null){ callback(node); if(node.children.length!=0){ for (var i=0;i<node.children.length;i++){ queue.push(node.children[i]);//借助于队列,暂存当前节点的所有子节点 } } node=queue.shift();//先入先出,借助于数据结构:队列 }};

深度优先遍历

首先遍历根节点,然后沿着一条路径遍历到最深的一层,最后在逐层返回。

借助于栈,实现多叉 DOM树 的深度优先遍历。

Tree.prototype.DFSearch = function(node,callback){ var stack=[]; while(node!=null){ callback(node); if(node.children.length!=0){ for (var i=node.children.length-1;i>=0;i--){//按照相反的子节点顺序压入栈 stack.push(node.children[i]);//将该节点的所有子节点压入栈 } } node = stack.pop();//弹出栈的子节点顺序就是原来的正确顺序(因为栈是先入后出的) }};

二叉 DOM 树的前序、中序、后序遍历,是深度优先遍历的特例

因此,参考深度优先遍历,借助栈,可以以非递归的方式,实现二叉 DOM 树的 前序、中序和后序遍历

非递归实现二叉 DOM 树的前序遍历

Tree.prototype.preOrder = function(node,callback) { var stack=[]; while(node!== null || stack.length!=0){ while(node!==null){ stack.push(node); callback.push(node); node=node.firstElementChild; } node=stack.pop(); node=node.lastElementChild; } };

非递归实现二叉 DOM 树的中序遍历

Tree.prototype.inOrder = function(node,callback) { var stack=[]; while(node!== null || stack.length!=0){ while(node!==null){ stack.push(node); node=node.firstElementChild; } node=stack.pop(); callback(node); node=node.lastElementChild; } };

非递归实现二叉 DOM 树的后序遍历

① 每个节点,都压入栈两次;② 在循环体中,每次弹出一个节点赋给node③ 如果node仍然等于栈的头结点,说明node的孩子们还没有被操作过,应该把它的孩子们加入栈中④ 否则,说明是第二次弹出该节点,访问node。

也就是说,第一次弹出,将node的孩子压入栈中,第二次弹出,访问node

TreeWalker.prototype.postOrder = function(node,callback) {//非递归实现 var stack=[]; stack.push(node); stack.push(node); while(stack.length != 0) { node = stack.pop(); if(stack.length != 0 && node==stack[stack.length-1]) { if(node.lastElementChild) stack.push(node.lastElementChild), stack.push(node.lastElementChild); if(node.firstElementChild) stack.push(node.firstElementChild), stack.push(node.firstElementChild); } else callback(node); }}

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

JS callback回调函数使用案例详解

PHP快速实现数组去重方法

小编还为您整理了以下内容,可能对您也有帮助:

JS树结构数据的遍历

title: JS树结构数据的遍历
date: 2022-04-14
description: 针对项目中出现树形结构数据的时候,我们怎样去操作他

项目中我们会经常出现对树形结构的遍历、查找和转换的场景,比如说DOM树、族谱、社会机构、组织架构、权限、菜单、省市区、路由、标签等等。那针对这些场景和数据,我们又如何去遍历和操作,有什么方式或者技巧可以简化我们的实现思路。下面我们将针对常规出现的场景去总结一下我们的遍历方式

树的特点
1、每个节点都只有有限个子节点或无子节点;
2、没有父节点的节点称为根节点;
3、每一个非根节点有且只有一个父节点;
4、除了根节点外,每个子节点可以分为多个不相交的子树;
5、树里面没有环路

下面的图片表示一颗树

在下面的JS中我们由多棵树组成我们的数据

在这数据中我们如何评判数据是否为叶节点(也就是最后一级),我们每个节点都会存在children属性,如果不存在children属性或者children不是一个数组或者children为数组且长度为0我们则认为他是一个叶节点

我们针对树结构的操作离不开遍历,遍历的话又分为广度优先遍历、深度优先遍历。其中深度优先遍历可以通过递归和循环的方式实现,而广度优先遍历的话是非递归的

从上往下对每一层依次访问,在每一层中,从左往右(也可以从右往左)访问结点,访问完一层就进入下一层,直到没有结点可以访问为止。即访问树结构的第n+1层前必须先访问完第n层。

简单的说,BFS是从根节点开始,沿着树的宽度遍历树的节点。如果所有节点均被访问,则算法中止。

所以我们的实现思路是,维护一个队列,队列的初始值为树结构根节点组成的列表,重复执行以下步骤直到队列为空:
取出队列中的第一个元素,进行访问相关操作,然后将其后代元素(如果有)全部追加到队列最后。

深度优先搜索算法(英语:Depth-First-Search,DFS)是一种用于遍历或搜索树或图的算法。这个算法会尽可能深的搜索树的分支。当节点v的所在边都己被探寻过,搜索将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已发现从源节点可达的所有节点为止。如果还存在未被发现的节点,则选择其中一个作为源节点并重复以上过程,整个进程反复进行直到所有节点都被访问为止

1、先序遍历
访问子树的时候,先访问根再访问根的子树

2、后序遍历
访问子树的时候,先访问子树再访问根

1、先序遍历
先序遍历与广度优先循环实现类似,要维护一个队列,不同的是子节点不追加到队列最后,而是加到队列最前面

2、后序遍历
后序遍历就略微复杂一点,我们需要不断将子树扩展到根节点前面去,执行列表遍历,并且通过一个临时对象维护一个id列表,当遍历到某个节点如果它没有子节点或者它本身已经存在于我们的临时id列表,则执行访问操作,否则继续扩展子节点到当前节点前面

对于树结构的遍历操作,其实递归是最基础,也是最容易理解的。递归本身就是循环的思想,所以可以用循环来改写递归,以上的方式在项目中已经廊括了大部分的场景了,我们在日常开发中可以根据场景或者需要去选择我们的遍历方式,或者基于此对他进行调整和优化,至于每种方式的空间复杂度和时间复杂度我们在这个地方就不去尝试了,各位感兴趣可以自己去验证。

广度优先搜索

树的遍历

深度优先搜索

图文详解两种算法:深度优先遍历(DFS)和广度优先遍历(BFS)

二叉树遍历(前序,后序,中序,层次)递归与迭代实现JavaScript

JS树结构操作:查找、遍历、筛选、树和列表相互转换

JS树结构数据的遍历

title: JS树结构数据的遍历
date: 2022-04-14
description: 针对项目中出现树形结构数据的时候,我们怎样去操作他

项目中我们会经常出现对树形结构的遍历、查找和转换的场景,比如说DOM树、族谱、社会机构、组织架构、权限、菜单、省市区、路由、标签等等。那针对这些场景和数据,我们又如何去遍历和操作,有什么方式或者技巧可以简化我们的实现思路。下面我们将针对常规出现的场景去总结一下我们的遍历方式

树的特点
1、每个节点都只有有限个子节点或无子节点;
2、没有父节点的节点称为根节点;
3、每一个非根节点有且只有一个父节点;
4、除了根节点外,每个子节点可以分为多个不相交的子树;
5、树里面没有环路

下面的图片表示一颗树

在下面的JS中我们由多棵树组成我们的数据

在这数据中我们如何评判数据是否为叶节点(也就是最后一级),我们每个节点都会存在children属性,如果不存在children属性或者children不是一个数组或者children为数组且长度为0我们则认为他是一个叶节点

我们针对树结构的操作离不开遍历,遍历的话又分为广度优先遍历、深度优先遍历。其中深度优先遍历可以通过递归和循环的方式实现,而广度优先遍历的话是非递归的

从上往下对每一层依次访问,在每一层中,从左往右(也可以从右往左)访问结点,访问完一层就进入下一层,直到没有结点可以访问为止。即访问树结构的第n+1层前必须先访问完第n层。

简单的说,BFS是从根节点开始,沿着树的宽度遍历树的节点。如果所有节点均被访问,则算法中止。

所以我们的实现思路是,维护一个队列,队列的初始值为树结构根节点组成的列表,重复执行以下步骤直到队列为空:
取出队列中的第一个元素,进行访问相关操作,然后将其后代元素(如果有)全部追加到队列最后。

深度优先搜索算法(英语:Depth-First-Search,DFS)是一种用于遍历或搜索树或图的算法。这个算法会尽可能深的搜索树的分支。当节点v的所在边都己被探寻过,搜索将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已发现从源节点可达的所有节点为止。如果还存在未被发现的节点,则选择其中一个作为源节点并重复以上过程,整个进程反复进行直到所有节点都被访问为止

1、先序遍历
访问子树的时候,先访问根再访问根的子树

2、后序遍历
访问子树的时候,先访问子树再访问根

1、先序遍历
先序遍历与广度优先循环实现类似,要维护一个队列,不同的是子节点不追加到队列最后,而是加到队列最前面

2、后序遍历
后序遍历就略微复杂一点,我们需要不断将子树扩展到根节点前面去,执行列表遍历,并且通过一个临时对象维护一个id列表,当遍历到某个节点如果它没有子节点或者它本身已经存在于我们的临时id列表,则执行访问操作,否则继续扩展子节点到当前节点前面

对于树结构的遍历操作,其实递归是最基础,也是最容易理解的。递归本身就是循环的思想,所以可以用循环来改写递归,以上的方式在项目中已经廊括了大部分的场景了,我们在日常开发中可以根据场景或者需要去选择我们的遍历方式,或者基于此对他进行调整和优化,至于每种方式的空间复杂度和时间复杂度我们在这个地方就不去尝试了,各位感兴趣可以自己去验证。

广度优先搜索

树的遍历

深度优先搜索

图文详解两种算法:深度优先遍历(DFS)和广度优先遍历(BFS)

二叉树遍历(前序,后序,中序,层次)递归与迭代实现JavaScript

JS树结构操作:查找、遍历、筛选、树和列表相互转换

JS之DOM操作

DOM: Document Object Model,文档对象模型;js提供了丰富的api来操作文档内容。
DOM树: html文档中的内容是以树形结构排布,html是DOM树根,html下只有两个子标签head、body
节点: DOM将所有的分支端都成为节点。节点有很多类型,常见的节点类型有:文本节点、元素节点。
可以通过 nodeType查看节点类型 : 1元素节点、3文本节点

特殊的元素节点:
1、html元素

2、body元素

3、head元素

节点操作的api(属性和方法)
1、nodeName:只读属性,可以读取节点名称

2、nodeType:只读属性,读取节点类型

3、 hasChildNodes():判断调用方法的节点是否存在子节点,存在返回true,不存在返回false。
主流浏览器会将换行符、制表符、空格当做文本节点处理,IE9以下会忽略它们。

4、childNodes:只读属性,获得节点的子节点集合,子节点集合是一个类数组结构,有数组特点无数组方法

5、firstChild:获得节点的第一个子节点

6、lastChild:获得节点的最后一个子节点

7、querySelector():
参数:string类型,css选择器
作用:获得文档中第一个符合选择器条件的节点
兼容:在IE9以下不支持

8、 querySelectorAll(): // 获得的都是静态集合
参数:string类型,css选择器
作用:获得文档中所有符合选择器条件的节点集合(类数组结构)
兼容:在IE9以下不支持

注意: querySelector() 和 querySelectorAll() 得到的都是元素节点。

9、previousSibling:获取节点的前一个兄弟节点

10、nextSibling:获取节点的后一个兄弟节点

11、parentNode:获得节点的父节点(父节点一定是元素节点)

12、removeChild():节点删除它的指定子节点
DOM操作元素:暂时不用的隐藏、一定不用的删除。

13、cloneNode():克隆一个节点
参数:boolean类型,true深克隆,false浅克隆,默认浅克隆
深克隆:不仅克隆节点和节点的属性,还会克隆节点的子节点
浅克隆:只克隆节点和节点的属性,不会克隆节点的子节点

14、a.replaceChild(b,c):用b替换c
其中a是c的父节点,c是文档上已经存在的节点,b可以是节点也可以是已存在节点,被替换的节点会从文档结构中删除。

15、a.replaceWith(b):用b替换a
a已存在的节点,b可以是新节点也可以是已存在节点,被替换的节点从DOM树删除。

16、a.insertBefore(b,c):在c前面插入b
其中,a是c的父节点,c是已经存在的节点,b是新节点

17、a.appendChild(b):在a末尾追加b

a是父节点,b是a的子节点, c是子节点

元素节点的相关api
1、getElementsByTagName():根据标签名获得元素集合(类数组结构)

区别:HTMLCollection 是动态集合,NodeList 是静态集合。

2、createElement():根据标签名创建新元素

3、id:读写属性,可以读取或设置元素的id值

4、className:读写属性,可以读取或设置元素的class值

5、classList:读取标签的类名集合(类数组结构)

add():为元素新增类名,如果类名已存在不会重复添加

remove():删除元素指定类名,如果类名不存在不会执行操作

元素的属性分为两类:
一类是元素本里就拥有的属性,例如:id、class、style、src、herf、target、alt、title、type、value等等,这些属性可以在js中直接通过.语法读取或设置。
再一类是我们为了解决问题给元素添加的自定义属性,这些属性在js中无法直接通过.语法读取,需要通过操作方法访问。
6、setAttribute(name,value)
参数:name表示要设置的属性名,value要为属性设置的值
无返回值

7、getAttribute(name)
参数:name表示要读取的属性名
返回值:返回属性的值,如果属性不存在会返回null

8、removeAttribute(name)
参数:name表示要删除的属性名
无返回值

说明:setAttribute()、getAttribute()、removeAttribute()都可以操作元素的本地属性和自定义属性。

element拓展:
兼容:以下属性、方法在IE9以下不支持。

1、children:读取元素的所有元素子节点集合(类数组)

2、parentElement:读取元素的父元素节点

3、previousElementSibling:读取前一个元素兄弟节点

4、nextElementSibling:读取后一个元素兄弟节点

5、firstElementChild:读取第一个元素子节点
6、lastElementChild:读取最后一个元素子节点
7、remove(): 将调用方法的元素从DOM结构中删除

JS之DOM操作

DOM: Document Object Model,文档对象模型;js提供了丰富的api来操作文档内容。
DOM树: html文档中的内容是以树形结构排布,html是DOM树根,html下只有两个子标签head、body
节点: DOM将所有的分支端都成为节点。节点有很多类型,常见的节点类型有:文本节点、元素节点。
可以通过 nodeType查看节点类型 : 1元素节点、3文本节点

特殊的元素节点:
1、html元素

2、body元素

3、head元素

节点操作的api(属性和方法)
1、nodeName:只读属性,可以读取节点名称

2、nodeType:只读属性,读取节点类型

3、 hasChildNodes():判断调用方法的节点是否存在子节点,存在返回true,不存在返回false。
主流浏览器会将换行符、制表符、空格当做文本节点处理,IE9以下会忽略它们。

4、childNodes:只读属性,获得节点的子节点集合,子节点集合是一个类数组结构,有数组特点无数组方法

5、firstChild:获得节点的第一个子节点

6、lastChild:获得节点的最后一个子节点

7、querySelector():
参数:string类型,css选择器
作用:获得文档中第一个符合选择器条件的节点
兼容:在IE9以下不支持

8、 querySelectorAll(): // 获得的都是静态集合
参数:string类型,css选择器
作用:获得文档中所有符合选择器条件的节点集合(类数组结构)
兼容:在IE9以下不支持

注意: querySelector() 和 querySelectorAll() 得到的都是元素节点。

9、previousSibling:获取节点的前一个兄弟节点

10、nextSibling:获取节点的后一个兄弟节点

11、parentNode:获得节点的父节点(父节点一定是元素节点)

12、removeChild():节点删除它的指定子节点
DOM操作元素:暂时不用的隐藏、一定不用的删除。

13、cloneNode():克隆一个节点
参数:boolean类型,true深克隆,false浅克隆,默认浅克隆
深克隆:不仅克隆节点和节点的属性,还会克隆节点的子节点
浅克隆:只克隆节点和节点的属性,不会克隆节点的子节点

14、a.replaceChild(b,c):用b替换c
其中a是c的父节点,c是文档上已经存在的节点,b可以是节点也可以是已存在节点,被替换的节点会从文档结构中删除。

15、a.replaceWith(b):用b替换a
a已存在的节点,b可以是新节点也可以是已存在节点,被替换的节点从DOM树删除。

16、a.insertBefore(b,c):在c前面插入b
其中,a是c的父节点,c是已经存在的节点,b是新节点

17、a.appendChild(b):在a末尾追加b

a是父节点,b是a的子节点, c是子节点

元素节点的相关api
1、getElementsByTagName():根据标签名获得元素集合(类数组结构)

区别:HTMLCollection 是动态集合,NodeList 是静态集合。

2、createElement():根据标签名创建新元素

3、id:读写属性,可以读取或设置元素的id值

4、className:读写属性,可以读取或设置元素的class值

5、classList:读取标签的类名集合(类数组结构)

add():为元素新增类名,如果类名已存在不会重复添加

remove():删除元素指定类名,如果类名不存在不会执行操作

元素的属性分为两类:
一类是元素本里就拥有的属性,例如:id、class、style、src、herf、target、alt、title、type、value等等,这些属性可以在js中直接通过.语法读取或设置。
再一类是我们为了解决问题给元素添加的自定义属性,这些属性在js中无法直接通过.语法读取,需要通过操作方法访问。
6、setAttribute(name,value)
参数:name表示要设置的属性名,value要为属性设置的值
无返回值

7、getAttribute(name)
参数:name表示要读取的属性名
返回值:返回属性的值,如果属性不存在会返回null

8、removeAttribute(name)
参数:name表示要删除的属性名
无返回值

说明:setAttribute()、getAttribute()、removeAttribute()都可以操作元素的本地属性和自定义属性。

element拓展:
兼容:以下属性、方法在IE9以下不支持。

1、children:读取元素的所有元素子节点集合(类数组)

2、parentElement:读取元素的父元素节点

3、previousElementSibling:读取前一个元素兄弟节点

4、nextElementSibling:读取后一个元素兄弟节点

5、firstElementChild:读取第一个元素子节点
6、lastElementChild:读取最后一个元素子节点
7、remove(): 将调用方法的元素从DOM结构中删除

JS里面的DOM操作是什么

1、DOM:DocumentObjectModel,文档对象模型;js提供了丰富的api来操作文档内容。DOM树:html文档中的内容是以树形结构排布,html是DOM树根,html下只有两个子标签head、body节点:DOM将所有的分支端都成为节点。

2、DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM,JavaScript根本没有Web页面和构成页面元素的概念。

3、vardom=document.getElementById(节点id);这是通过节点的id来获取一个页面节点,也就是对节点的引用。这个时候,我们对变量dom的任何操作,实际上就是对页面节点的操作,比如说修改样式、移除节点、获取属性等等。

js操作节点的DOM方法

js操作节点的DOM方法

一、创建节点

createElement

createTextNode

二、添加、删除、替换、克隆元素
1、appendChild

2、insertBefore

3、如果appendChild、insertBefore追加的是已经存在的子元素,实际上就会将子元素位置移动

4、删除节点remove removeChild

remove()

removeChild

5.替换节点

replaceChild

6、克隆节点

cloneNode()

三、操作元素属性的方法

1.获取属性 元素.属性名

2.设置属性 元素.属性名 = 属性值

1、2方法只能获取和设置元素自带的属性

3.操作属性的万能方法
getAttribute()

setAttribute()

js操作节点的DOM方法

js操作节点的DOM方法

一、创建节点

createElement

createTextNode

二、添加、删除、替换、克隆元素
1、appendChild

2、insertBefore

3、如果appendChild、insertBefore追加的是已经存在的子元素,实际上就会将子元素位置移动

4、删除节点remove removeChild

remove()

removeChild

5.替换节点

replaceChild

6、克隆节点

cloneNode()

三、操作元素属性的方法

1.获取属性 元素.属性名

2.设置属性 元素.属性名 = 属性值

1、2方法只能获取和设置元素自带的属性

3.操作属性的万能方法
getAttribute()

setAttribute()

使用dom编程,可以对节点对象实现什么操作?

使用DOM编程,可以对节点对象实现以下操作:

创建节点:使用createElement()方法创建一个新的元素节点。

添加节点:使用appendChild()方法将一个节点添加为另一个节点的子节点。

删除节点:使用removeChild()方法从父节点中删除指定的子节点。

替换节点:使用replaceChild()方法将一个节点替换为另一个节点。

插入节点:使用insertBefore()方法在指定节点之前插入一个新节点。

获取和修改节点的属性:使用getAttribute()和setAttribute()方法获取和设置节点的属性。

获取和修改节点的文本内容:使用textContent属性获取或设置节点的文本内容。

遍历节点树:使用childNodes属性获取节点的子节点列表,使用parentNode属性获取节点的父节点,使用nextSibling和previousSibling属性获取相邻的兄弟节点。

修改节点的样式:使用style属性获取或设置节点的CSS样式。

绑定事件处理程序:使用addEventListener()方法将事件处理程序绑定到节点上。

这些只是DOM编程中的一些常见操作,还有许多其他方法和属性可以用于操作和处理节点对象。具体的操作和实现方式可能会根据不同的编程语言、框架或库而有所不同。建议参考相关的文档、教程和示例代码,以了解更多关于DOM编程的详细信息。

新手问题:JS如何遍历一个DIV中所有的DOM

function setup(){
if(!document.getElementByTagName) return
divs=document.getElementByTagName("div")
for(i=0;i<divs.lenght; i++){
div[i]
}
}

新手问题:JS如何遍历一个DIV中所有的DOM

function setup(){
if(!document.getElementByTagName) return
divs=document.getElementByTagName("div")
for(i=0;i<divs.lenght; i++){
div[i]
}
}

js中在dom原型链编写一个可以遍历节点树的方法怎么写呢?

DOM(即 Document Object Mode) 是 W3C(万维网联盟)的标准。

DOM 定义了访问 HTML 和 XML 文档的标准:“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分:

核心 DOM - 针对任何结构化文档的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

原生js操作DOM元素的一些使用

方法一:

使用DOM.setAttribute("class","类名")

方法二:

DOM.classList.add("类名")

方法一给DOM元素添加类名会覆盖原有的类名

方法二 可以给DOM元素添加一个类名后 还可以在继续给DOM元素添加新的类名 并且不会覆盖已有的类名

概念:把要添加的节点添加到指定父级里面的最后面,所以也叫追加。
使用方式:fatherdom.appendChild( insertdom )。
兼容性:所有浏览器都支持此方法。

概念:把要插入的节点添加到指定父级里面的指定节点之前。
使用方式:fatherdom.insertBefore( insertdom,chosendom )。
兼容性:所有浏览器都支持此方法,但是值得注意的是,如果第二个参数节点不存在,在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中,而其他主流浏览器(Firefox、Chrome、Opera等)下会报错,所以在插入节点的时候,需要先判断第二个参数节点是否存在

效果

注意:很多人都认为设置disabled="true"是为启用,设置为“false”时为禁用,这是错的。

原生js操作DOM元素的一些使用

方法一:

使用DOM.setAttribute("class","类名")

方法二:

DOM.classList.add("类名")

方法一给DOM元素添加类名会覆盖原有的类名

方法二 可以给DOM元素添加一个类名后 还可以在继续给DOM元素添加新的类名 并且不会覆盖已有的类名

概念:把要添加的节点添加到指定父级里面的最后面,所以也叫追加。
使用方式:fatherdom.appendChild( insertdom )。
兼容性:所有浏览器都支持此方法。

概念:把要插入的节点添加到指定父级里面的指定节点之前。
使用方式:fatherdom.insertBefore( insertdom,chosendom )。
兼容性:所有浏览器都支持此方法,但是值得注意的是,如果第二个参数节点不存在,在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中,而其他主流浏览器(Firefox、Chrome、Opera等)下会报错,所以在插入节点的时候,需要先判断第二个参数节点是否存在

效果

注意:很多人都认为设置disabled="true"是为启用,设置为“false”时为禁用,这是错的。

js 如何获取新的和旧的dom树?

1、javascript 获取 Dom 树比较简单。直接获取document 文档对象就可以了,或者也可以直接从具体的控件对象进行获取。
2、比较困难的是如何获取之前旧的dom 树对象。常见的思路是可以设置一个全局的数组变量保存之前的dom树对象,注意此对象保存的只是引用,你做变更,之前保存的对象也是变的,因为两者本来就是同一个对象。所以你要保存的必须是dom树的复制对象,也就是所谓的深拷贝对象,这个是有点复杂度的,节点如果复杂的话,容易出现问题,要注意处理。
3、希望对你有帮助。

js 如何获取新的和旧的dom树?

1、javascript 获取 Dom 树比较简单。直接获取document 文档对象就可以了,或者也可以直接从具体的控件对象进行获取。
2、比较困难的是如何获取之前旧的dom 树对象。常见的思路是可以设置一个全局的数组变量保存之前的dom树对象,注意此对象保存的只是引用,你做变更,之前保存的对象也是变的,因为两者本来就是同一个对象。所以你要保存的必须是dom树的复制对象,也就是所谓的深拷贝对象,这个是有点复杂度的,节点如果复杂的话,容易出现问题,要注意处理。
3、希望对你有帮助。

dom构建渲染过程

1、构建DOM树(parse):渲染引擎解析HTML文档,首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内容树(Content Tree/DOM Tree);

2、构建渲染树(construct):解析对应的CSS样式文件信息(包括js生成的样式和外部css文件),而这些文件信息以及HTML中可见的指令(如<b></b>),构建渲染树(Rendering Tree/Frame Tree);

3、布局渲染树(reflow/layout):从根节点递归调用,计算每一个元素的大小、位置等,给出每个节点所应该在屏幕上出现的精确坐标;

4、绘制渲染树(paint/repaint):遍历渲染树,使用UI后端层来绘制每个节点。

重排必定引起重绘,重绘不一定是重排引起的。

不影响位置大小的,单纯为重绘即可 比如修改color 等。

(1)直接改变元素的className

(2)display:none;先设置元素为display:none;然后进行页面布局等操作;设置完成后将元素设置为display:block;这样的话就只引发两次重绘和重排;

(3)不要经常访问浏览器的flush队列属性;如果一定要访问,可以利用缓存。将访问的值存储起来,接下来使用就不会再引发回流;

(4)使用cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘;

(5)将需要多次重排的元素,position属性设为absolute或fixed,元素脱离了文档流,它的变化不会影响到其他元素;

(6)如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入document;

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。