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

时间: 2018-12-20阅读: 822标签: 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

关闭

js节点操作

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

vue 使用 html2canvas将DOM转化为图片

现在项目开发中将DOM转化为图片是一个很常见的需求。于是决定使用html2canvas这个插件。PS:版本比较多,这里介绍最新版。生成出来的图片有白色边框,有图片显示不出来并有报错

浏览器中的JavaScript:文档对象模型与 DOM 操作

JavaScript 并没有那么糟糕。作为运行在浏览器中的脚本语言,它对于网页操作非常有用。在本文中,我们将看到可以用哪些手段来修改 HTML 文档和交互。文档对象模型是在浏览器中一切的基础。但它究竟是什么呢?

vue的虚拟DOM有什么好处?

vue 中的虚拟DOM有什么好处?快!首先了解浏览器显示网页经历的5个过程 :1、解析标签,生成元素树(DOM树)2、解析样式,生成样式树3、生成元素与样式的关系

为什么虚拟DOM更优胜一筹

我们回顾传统MVC框架,如backbone,它是将某个模板编译成模板函数,需要更新时,是自己手动将数据整体传入模板函数, 得到一个字符串,使用innerHTML刷新某个容器!注意,这里其实可以优化,但由于是手动,是体力活

JavaScript DOM事件模型

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

javascript中DOM是什么?

DOM(document object model)文档对象模型,是一项W3C 标准,是针对HTML和XML的一个API(应用程序接口)。它允许程序和脚本动态地访问、更新文档的内容、结构和样式。

关于DOM操作是异步的还是同步的相关理解

先列出我的理解,然后再从具体的例子中说明:DOM操作本身应该是同步的(当然,我说的是单纯的DOM操作,不考虑ajax请求后渲染等);DOM操作之后导致的渲染等是异步的(在DOM操作简单的情况下,是难以察觉的)

virtual DOM是如何优化性能的?

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

vuejs2.0如何获取dom元素自定义属性值

设置定义属性值 :data-value=.., 2.直接获取 3.通过this.$refs.***获取 1.目标DOM定义ref值: 2.通过 【this.$refs.***.属性名】 获取相关属性的值: this.$refs.*** 获取到对应的元素 ...

点击更多...

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