关闭

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

时间: 2018-12-20阅读: 1136标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

简述dom diff原理

关于react的虚拟dom以及每次渲染更新的dom diff,网上文章很多。但是我一直信奉一个原则,即:但凡复杂的知识,理解之后都只需要记忆简单的东西,而想简单、精确描述一个复杂知识,是极困难的事。

js节点操作

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

整理常见 DOM 操作

框架用多了,你还记得那些操作 DOM 的纯 JS 语法吗?看看这篇文章,来回顾一下~ 操作 className,addClass给元素增加 class,使用 classList 属性

详解 HTML attribute 和 DOM property

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

DOM如何渲染大量千级万级数据页面也不会卡住

一个例子是创建 WebQQ 的 QQ 好友列表。列表中通常会有成百上千个好友,如果一个好友,用一个节点来表示,当我们在页面中渲染这个列表的时候,可能要一次性往页面中创建成百上千个节点

JS DOM元素

js有如下功能:JavaScript 能够改变页面中的所有 HTML 元素;能够改变页面中的所有 HTML 属性;能够改变页面中的所有 CSS 样式;能够对页面中的所有事件做出反应(JS只能操作行内样式,不能操作内嵌样式和外部样式)

如何遍历DOM

在本文中,我们了解了DOM 是如何构造成节点树的,节点树通常是HTML元素、文本或注释,我们创建了一个脚本,允许用户修改网站,而不必手动在开发人员控制台中输入代码。

从 React 历史的长河来聊如何理解虚拟DOM

最近我发现很多面试题里面都有「如何理解虚拟 DOM」这个题,我觉得这个题应该没有想象中那么好答,因为很多人没有真正理解虚拟 DOM 它的价值所在,我这篇从虚拟 DOM 的诞生过程来引出它的价值以及历史地位,帮助你深入的理解它。

DOM 高级工程师不完全指南

前端框架真的太香了,香到我都不敢徒手撕 DOM 了!虽然绝大多数前端er都有这样的困扰,但本着基础为大的原则,手撕 DOM 应当是一个前端攻城狮的必备技能,这正是本文诞生的初衷

JavaScript DOM事件模型

早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类。

点击更多...

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