JavaScript：nodeType节点/文档碎片对象模型-DcoumentFragment

1伪数组转真数组的方式:

伪数组转真数组的多种方式：

1 Array.from

2 Array.prototype.slice.call(list)

3 [...list]

const list1 = document.getElementsByTagName('p')//检查list1 是不是 Array数组 的实例 --> false --伪数组console.log(list1 instanceof Array) //false--伪数组转变为真数组--的几种方式const list2 = [...list1]const list3 = Array.from(list1)//以下两种方式--原理性质一样const list4 = Array.prototype.slice.call(list1)const list5 = [].slice.call(list1)//console.log(list2 instanceof Array) //trueconsole.log(list3 instanceof Array) //trueconsole.log(list4 instanceof Array) //trueconsole.log(list5 instanceof Array) //true// 将伪数组转为真数组const p1 = Array.from(pNodes);const p2 = Array.prototype.slice.call(pNodes) const p3 = [].slice.call(pNodes)const p4 = [...pNodes]

2nodeType节点:

2. nodeType节点:

页面中所有的东西都可以叫节点, 标签,元素,文本,属性

节点: 标签节点,属性节点,文本节点,他们都是节点,节点是有类型的

标签---->元素(DOM中的叫法)---->标签节点

文本节点:文字内容,空行,回车,空白文本节点

属性节点:标签中的属性和值

文档:整个当前的页面,页面中的标签都有嵌套的关系,一层一层的,

形成了一个树形的的效果,称为:树形结构图,DOM树

获取了一些节点,通过判断该节点的类型,就可以知道获取的节点到底是什么节点!

nodeType属性可以获取当前这个节点的类型

该属性值: 1---标签节点, 2----属性节点, 3----文本节点

 根据id获取当前的div对象---元素---标签对象----标签节点const divNode = document.getElementById('demo')//根据属性的名字来获取当前的属性节点const attrNode = divNode.getAttributeNode('id')//获取div标签中的第一个文本节点const txtNode = divNode.firstChildconsole.log(divNode.nodeType) // 打印 1 标签对象console.log(attrNode.nodeType) // 打印2 属性节点console.log(txtNode.nodeType) //打印3 文本节点

3.文档碎片对象模型-DcoumentFragment

文档碎片对象模型---DcoumentFragment----(高效批量处理多个节点)

案例:通过文档碎片对象,把html中的某些标签的内容进行更新操作

第一种方式:直接获取所有的p标签,通过遍历,修改内部的内容,

即可-----属于直接操作DOM树中的节点--如果说要操作的节点非常的多,

那么这种直接操作DOM树的方式,会令页面出现卡顿的效果,非常的明显

第二种方式:文档碎片对象模型的方式,先获取所有的p标签的父级节点,在拿到内部所有的子级节点,

全部的放在文档碎片对象中,在内存中对文档碎片对象中的所有节点进行操作(没有直接操作DOM树),

操作后结果再给当前父级节点即可----效率要高于直接操作DOM树的效率,卡顿没有之前的方式那么明显

//1获取div父级节点const divObj = document.getElementById('demo')//2创建文档碎片对象const fragment = document.createDocumentFragment()// 3. 把div父级节点中所有的子级节点全都放在文档碎片对象中(丢进了这个文档碎片对象中---(剪切))--内存中// 没有直接操作DOM树,都是在内存中完成,内存中的这些节点可以看成是虚拟的DOMlet child//while 遍历操作while (child = divObj.firstChild){// 把每个子节点扔进到文档碎片对象中fragment.appendChild(child)}// 4. 遍历文档碎片对象中所有的子节点,修改内容fragment.childNodes.forEach(node => {//改变每个节点的显示内容node.innerHTML = '鹅鹅鹅,曲项向天歌,白毛浮绿水,红掌拨清波'})//5. 把文档碎片对象放在父级节点div中即可divObj.appendChild(fragment)

使用了文档碎片对象模型的方式在内存中操作节点,并不是直接操作DOM树,可以理解为是虚拟DOM的操作

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！