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

本文聚焦前端开发,介绍伪数组转真数组的三种方式,如 Array.from 等;阐述 nodeType 节点,包括标签、属性、文本节点类型及判断方法;还讲解文档碎片对象模型,对比直接操作 DOM 树和使用文档碎片操作节点的效率,强调后者优势。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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) //true

console.log(list3 instanceof Array) //true

console.log(list4 instanceof Array) //true

console.log(list5 instanceof Array) //true

// 将伪数组转为真数组

const p1 = Array.from(pNodes);

const p2 = Array.prototype.slice.call(pNodes) c

onst p3 = [].slice.call(pNodes)

const p4 = [...pNodes]

2nodeType节点:

2. nodeType节点:

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值