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

ES中新增 DOM API before()使用教程

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

web 前端标准一直在不断升级,比方说,说了很多年的 HTML5、CSS3,以及天天见的 ES6。

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

然后,似乎就没有然后了。实际上,除了 HTML5/CSS3/ES6+,关于 DOM 标准也是在不断升级进步,而且浏览器也在悄悄地进行跟进与支持。

然而,这种跟进与支持呢非常的低调与隐讳;加上行业的话语权大部分集中在 JS 工程师身上,同时 DOM 这种东西比较“低级”撑不起场面,因此各种什么技术大会啊,分享会议啊绝对不会讲这玩意儿的。

于是都叫他注意力很容易被带走,而没有意识到在 DOM 操作这一块,现在实际上已经非常厉害了。

ES 中新增 DOM API before()使用教程

接下来要介绍这些新增的 DOM API 方法,都比较新,其设计目的是可以像 jQuery 那样,使用非常简单的 api,便利的操作 dom 元素。

这些 api 包括:before(),after(),replaceWith(),append(),prepend(),好,下面一个一个介绍。

before()

这里的 before()是个 ChildNode 方法,也就是节点方法。节点方法对应于元素方法。区别在于,节点可以直接是文本节点,甚至注释等。但是,元素必须要有 HTML 标签。

因此,before()的参数既可以是 DOM 元素,也可以是 DOM 节点,甚至可以直接字符内容,咦,感觉活脱脱的 jQuery 的 before() API 嘛?没错,真的很类似似,并且语义也是一样的,表示当前节点的前面是 XXX。

语法如下:

 void ChildNode.before((节点或字符串)... 其它更多节点);

从语法可以看出 before()方法支持多个参数,并且参数可以是节点对象,也可以是字符串对象。

至于具体细节,我们可以通过一个一个例子来实际验证。

先来看一个最简单例子,已知 HTML 如下:

 <img id="img" src="mm0.jpg">

如果我们希望在图片<img>前面插入写文字,直接可以:

 document.getElementById('img').before('美女:');

如果我们插入的是一段 HTML 字符串,那效果又是怎样的呢?如下:

 document.getElementById('img').before('<strong>美女:</strong>');

结果,HTML 被转义成了安全的普通文本显示了,如下:

ES 中新增 DOM API before()使用教程

可以看出原生 DOM 的 before() API 和 jQuery 中的 before() API 还是有差别的,在 jQuery 中,before()的参数值是作为 html 字符处理的,但是这里的 before()是作为 text 字符处理的。

如果我们想要在图片前面插入 HTML 内容,可以使用 DOM 节点方式插入,例如:

 var eleTitle = document.createElement('h4'); eleTitle.innerHTML = '美女:'; document.getElementById('img').before(eleTitle);

可能有人要疑问了,我非要在图片前面插入 HTML 字符内容怎么办?

可以使用兼容性更好的 insertAdjacentHTML() DOM 方法,使用示意如下:

 document.getElementById('img').insertAdjacentHTML('beforebegin', '<strong>美女:</strong>');

语法如下:

 element.insertAdjacentHTML(position, html);

非本文重点就不展开了。

元素 DOM 的 before() API 还有一个很棒的特性,那就是可以同时插入多个节点内容,例如:

 document.getElementById('img').before('1. 美女', ' ', '2. 美女');

效果如下截图所示:

ES 中新增 DOM API before()使用教程

before()兼容性

before() API Chrome54+,Firefox49+才支持,还算比较新,IE edge 目前还未支持,具体参见下面截图(实时兼容数据)。

ES 中新增 DOM API before()使用教程

对于团队或公司内部的一些项目,管理平台或者工具之类的 web 页面我们可以放心大胆使用 before()等 API,如果是面向用户对兼容性有要求的项目呢?

很简单,加一段 polyfill JS 代码就可以了,如下(参考自 MDN):

 // 源自 https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md (function (arr) {   arr.forEach(function (item) {     if (item.hasOwnProperty('before')) {       return;     }     Object.defineProperty(item, 'before', {       configurable: true,       enumerable: true,       writable: true,       value: function before() {         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.parentNode.insertBefore(docFrag, this);       }     });   }); })([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

注意,上面的 polyfill 并不支持 IE8 及其以下浏览器。也就是 before() API 只能在至少兼容到 IE9 浏览器的项目使用。

before()和 insertBefore()比较

insertBefore()作为老牌传统的 API,优势在于兼容性好。不足之处,其语法着实很奇怪,A 元素插到 B 元素前面,需要父元素 parentNode.insertBefore(newNode, referenceNode),小辈之间的打打闹闹牵扯到父辈,显然事情就会麻烦。至少这么多年下来 insertBefore 的参数究竟是新插入节点在前还是先插入节点在后,我都没有准确记清楚。

但是,before() API 就不一样了,语法仅涉及到插入节点和相对节点,非常好记,不容易出错,而且 API 名称更短。

本文原文出处:web 前端中文站: » ES 中新增 DOM API before()使用教程

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


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

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

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