摘要:本篇教程探讨了JavaScript基础教程之易混淆的DOM属性及方法对比,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
本篇教程探讨了JavaScript基础教程之易混淆的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。
本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号