• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

ES(ECMAScript)中DOM API之replaceWith()

JAVA web前端中文站 2年前 (2017-09-28) 1143次浏览 已收录 0个评论

replaceWith()也是一个新增的 DOM API。表示替换当前节点为其他节点内容。本文将详细的讲解它的用法。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

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); }

例如页面上有这么一段注释:

ES(ECMAScript)中 DOM API 之 replaceWith()

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

ES(ECMAScript)中 DOM API 之 replaceWith()

下面看一个完整的例子!

HTML 代码:

 <!-- <h4>美女</h4> --> <img src="mm0.jpg"> <p>图片前面有段 HTML 注释,点击下面按钮看看能不能显示出来。</p> <p><button id="btn">点击我</button></p>

JS 代码:

 var eleBtn = document.getElementById('btn'); eleBtn.addEventListener('click', function () {     var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT);         while (treeWalker.nextNode()) {         var commentNode = treeWalker.currentNode;         // 替换注释节点为文本节点         commentNode.replaceWith(commentNode.data);     } });

运行效果:

ES(ECMAScript)中 DOM API 之 replaceWith()

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

同样,如果对兼容性又要求,可以使用下面的 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; } 

本文原文出处:web 前端中文站: » ES(ECMAScript)中 DOM API 之 replaceWith()

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:ES(ECMAScript)中 DOM API 之 replaceWith()
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址