关闭

JavaScript中易混淆的DOM属性及方法对比

时间: 2018-12-20阅读: 966标签: dom

ParentNode.children VS Node.prototype.childNodes

ParentNode.children:该属性继承自ParentNode,返回值是一个htmlCollection实例,成员是当前节点的所有元素子节点,该属性只读,且该属性是动态集合。

Node.prototype.childNodes:该属性继承自Node,返回值是一个NodeList实例,成员是当前节点的所有子节点(包括但不限于元素子节点),该属性也是个动态集合。


ParentNode.firstElementChild VS Node.prototype.firstChild

ParentNode.firstElementChild:该属性返回当前节点的第一个元素子节点,如果没有任何元素子节点,则返回null。

Node.prototype.firstChild:该属性返回当前节点的第一个子节点(包括但不限于元素子节点),如果没有任何子节点则返回null。


ParentNode.lastElementChild VS Node.prototype.lastChild

同上。


ChildNode.remove() VS Node.prototype.removeChild()

ChildNode.remove():该方法用于从父节点中移除当前节点,没有返回值。

el.remove();    // 从DOM中移除了el节点

Node.prototype.removeChild():该方法接受一个子节点作为参数,用于从当前节点移除该子节点,返回值是被移除的子节点。需要注意的是,被移除的节点依然存在于内存之中,但不再是DOM的一部分,所以,一个节点被移除以后,可以复用。

document.body.removeChild(el);  // 从DOM中移除了el节点


ChildNode.before() VS Node.prototype.insertBefore()

ChildNode.before():该方法用于在当前节点的前面,插入一个或多个同级节点,插入完成后,新节点与当前节点拥有相同的父节点。该方法无返回值。

var p = document.createElement('p');
var p1 = document.createElement('p');

// 插入元素节点
el.before(p);

// 插入文本节点
el.before('Hello');

// 插入多个元素节点
el.before(p, p1);

// 插入元素节点和文本节点
el.before(p, 'Hello');

Node.prototype.insertBefore():该方法接受两个参数,第一个参数newNode,第二个参数referenceNode,用于将newNode插入到referenceNode前面,返回值是插入的新节点newNode。注意,newNode的类型必须是Node,也就是说该方法不能用于插入文本节点。当referenceNode不是当前节点的子节点是将会报错。


ChildNode.replaceWith() VS Node.prototype.replaceChild()

ChildNode.replaceWith():该方法接受一个参数newNode,当前节点江北newNode节点替换。该函数无返回值。

var span = document.createElement('span');
el.replaceWith(span);   // el将被span节点替换,但el仍在内存中

Node.prototype.replaceChild():该方法接受两个参数:newChild和oldChild。oldChild将会被newChild替换,返回值是oldChild。


来自:https://www.cnblogs.com/zhuangshq/archive/2018/12/20/10150294.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1657

关闭

全面理解虚拟DOM,实现虚拟DOM

DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的。虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。

详解 HTML attribute 和 DOM property

在大多数的文章中,attribute 一般被翻译为“特性”,property 被译为“属性”。把结论写在最前面,如果你全都懂,后面就不用看了。当我们书写 HTML 代码的时候

13个需要掌握的Js操作DOM方法

DOM 或文档对象模型是 web 页面上所有对象的根。它表示文档的结构,并将页面连接到编程语言。它的结构是一个逻辑树。每个分支结束于一个节点,每个节点包含子节点、对象。DOM API非常庞大

html DOM简介

今天我们将了解WEB编程中一个重要的概念DOM(Document Object Model)文档对象模型,它帮助我们使用JavaScript(或其他编程语言)操纵文档。DOM不是一种编程语言,它是一种标准,一个模型,它与编程语言相对独立

js节点操作

整个页面可以看成文档节点,节点用node表示。页面里面全是节点,元素节点, 属性节点,文本节点(文字,空格,换行),节点:一定有节点类型,节点名称,节点值

实现虚拟DOM

该程序向全局暴露了一个Vdom对象,Vdom提供了两个方法,createElement(),render(),分别用于创建元素及把虚拟dom渲染到真实dom节点

你知道虚拟Dom是怎么生成的吗?

在经过初始化阶段之后,即将开始组件的挂载,不过在挂载之前很有必要提一下虚拟Dom的概念。这个想必大家有所耳闻,我们知道vue@2.0开始引入了虚拟Dom,主要解决的问题是

如何编写自己的虚拟DOM

要构建自己的虚拟DOM,需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂——但实际上,虚拟DOM的主要部分只需不到50行代码。

virtual DOM是如何优化性能的?

浏览器接收到html文件,并转换成DOM树。如果有css还会生成css树。如果遇到script标签,会先判断是async或defer。如果是前者会并行下载并执行js,后者会先下载,等html解析完后顺序执行。 当构建后dom树和css树后

原生js获取DOM对象的几种方法

javascript获取DOM对象的多种方法:通过id获取 、通过class获取、通过标签名获取、通过name属性获取、通过querySelector获取、通过querySelectorAll获取等

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!