我们为什么使用jQuery,一是DOM API的便利性

丽星邮轮博彩怎么样 丽星邮轮博彩最新网站 丽星邮轮在线娱乐场 丽星邮轮娱乐场官网 丽星邮轮娱乐场网址 未分类

3. DOM API之replaceWith()

其语法如下:

ChildNode.replaceWith((节点或字符串)… 更多节点);
表示替换当前节点为其他节点内容。

举个例子,把页面上所有HTML注释都替换成可显示的普通文本节点。

如下JS代码:

var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT);

while (treeWalker.nextNode()) {
var commentNode = treeWalker.currentNode;
// 替换注释节点为文本节点
commentNode.replaceWith(commentNode.data);
}
例如页面上有这么一段注释:
页面上的注释截图

点击某按钮执行上面的JS代码,结果这段注释内容变成普通文本显示在页面上了,效果如下截图:
注释变成普通文本显示截图

眼见为实,您可以狠狠的点击这里:DOM replaceWith()节点API方法demo

对我们开发有没有什么启示呢?比方说页面模板可以放在注释中……

同样,如果对兼容性又要求,可以使用下面的JS polyfill(参考自MDN):

function ReplaceWith(Ele) {
var parent = this.parentNode,
i = arguments.length,
firstIsNode = +(parent && typeof Ele === ‘object’);
if (!parent) return;

while (i– > firstIsNode){
if (parent && typeof arguments[i] !== ‘object’){
arguments[i] = document.createTextNode(arguments[i]);
} if (!parent && arguments[i].parentNode){
arguments[i].parentNode.removeChild(arguments[i]);
continue;
}
parent.insertBefore(this.previousSibling, arguments[i]);
}
if (firstIsNode) parent.replaceChild(this, Ele);
}
if (!Element.prototype.replaceWith) {
Element.prototype.replaceWith = ReplaceWith;
}

if (!CharacterData.prototype.replaceWith) {
CharacterData.prototype.replaceWith = ReplaceWith;
}
if (!DocumentType.prototype.replaceWith) {
CharacterData.prototype.replaceWith = ReplaceWith;
}
4. DOM API之prepend()

其语法如下:

ParentNode.prepend((节点或字符串)… 更多节点);
表示在当前节点的最前面插入其它节点内容(作为子节点)。其意思和jQuery中的prepend() API是一样的,对jQuery熟悉的人学习这几个API都是分分钟的事情。

参数值特性什么的和before(), after()等方法类似,就不重复展开。

若有兴趣,您可以狠狠地点击这里:DOM prepend()节点API方法demo

对demo因为上的按钮乱点一通之后,会发现所有插入内容都在最前面显示:

prepend API demo页面点击截图示意

在以前要想在元素节点的最前面插入内容,要么使用insertBefore()找firstChild,要么使用insertAdjacentHTML()或者insertAdjacentElement()方法,都很啰嗦。

prepend()这个api要更简单和直接。

兼容性和before()一模一样,对于IE9+支持项目,可以辅助下面的polyfill:

// 源自: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty(‘prepend’)) {
return;
}
Object.defineProperty(item, ‘prepend’, {
configurable: true,
enumerable: true,
writable: true,
value: function prepend() {
var argArr = Array.prototype.slice.call(arguments),
docFrag = document.createDocumentFragment();

argArr.forEach(function (argItem) {
var isNode = argItem instanceof Node;
docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
});

this.insertBefore(docFrag, this.firstChild);
}
});
});
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
5. DOM API之append()

其语法如下:

ParentNode.append((节点或字符串)… 更多节点);
表示在当前节点的最后面插入其它节点内容(作为子节点)。其意思和jQuery中的append() API是一样的,细节上就是不支持html字符串直接显示的差别。

您可以狠狠地点击这里:DOM append()节点API方法demo

所有点击按钮插入内容都在图片后面,也就是容器里面的最后显示:
append() demo页面效果截图

polyfill如下:

// 源自: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty(‘append’)) {
return;
}
Object.defineProperty(item, ‘append’, {
configurable: true,
enumerable: true,
writable: true,
value: function append() {
var argArr = Array.prototype.slice.call(arguments),
docFrag = document.createDocumentFragment();

argArr.forEach(function (argItem) {
var isNode = argItem instanceof Node;
docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
});

this.appendChild(docFrag);
}
});
});
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
三、结束语
我们为什么使用jQuery,一是DOM API的便利性,二是内部帮我们搞定了很多兼容性问题,三是友好地扩展和插件机制。

如今,原生的DOM API借鉴jQuery的优点,也整出了很多简单遍历的API方法;如果我们再粘贴一些polyfill JS搞定兼容性问题;再配合ES5很多数据处理方法;DOM leave 3的事件处理等。

基本上就没有需要使用jQuery的理由了,省了资源加载,提高了代码性能,还装了回哔哩哔哩。

所以,基本上,已经不可逆地,在不久将来,不出几年,行业会兴起原生DOM API,原生JS开发前端应用的小风尚,jQuery会越来越不被人提起,完成其历史使命,日后可以领取个终身成就奖。

另外,还有类jQuery的API本文没有介绍,例如Node.remove(),这个API出现相对要早一些,和前面介绍的不是一波出来的,因此没放到一起介绍。

作用如其名,移除当前节点。

好,以上就是本文的全部内容,都是浅薄的知识点。

感谢阅读,欢迎交流!

发表评论

电子邮件地址不会被公开。 必填项已用*标注