作者jmlntw (吉米林)
看板Ajax
标题[教学] 越来越像 jQuery 的原生 JavaScript
时间Mon Aug 7 21:55:15 2017
https://dom.spec.whatwg.org/#interface-childnode
DOM manipulation convenience methods 是 WHATWG 的 Living Standard，
提供更接近 jQuery 用法的 DOM API。
【移除】
jQuery： $('.someClass').
remove();
原生： document.querySelector('.someClass').
remove();
【Prepend】
jQuery： $('.someClass').
prepend('hello world');
原生： document.querySelector('.someClass').
prepend('hello world');
【Append】
jQuery： $('.someClass').
append('hello world');
原生： document.querySelector('.someClass').
append('hello world');
【Before】
jQuery： $('.someClass').
before('hello world');
原生： document.querySelector('.someClass').
before('hello world');
【After】
jQuery： $('.someClass').
after('hello world');
原生： document.querySelector('.someClass').
after('hello world');
【取代】
jQuery： $('.someClass').
replaceWith(element);
原生： document.querySelector('.someClass').
replaceWith(element);
【For-Loop 所有相符的元素】
jQuery： $('.someClass').
each(function () { ... });
原生： document.querySelectorAll('.someClass').
forEach(element => { ... })
（NodeList 可以直接 forEach() 了。）
【浏览器支援程度】
除了 IE 和 Edge 外其他主流浏览器的最新版本都 OK。
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 36.224.8.107
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Ajax/M.1502114119.A.552.html
1F：推 LPH66: 说到 each, 我对 jQuery 的 each 跟原生 JS 的 forEach 08/07 22:52
2F：→ LPH66: callback 的参数顺序不一样感觉各种囧... 08/07 22:53
3F：→ LPH66: jQuery 的 each 是 (index, element)=>... 08/07 22:53
4F：→ LPH66: 原生 JS 的 forEach 是 (element, index) => ... 08/07 22:54
5F：推 visa9527: element 先比较符合传统 08/09 14:31
6F：→ visa9527: 因为 Array.map() 也是先 value 才 index 08/09 14:32
7F：→ visa9527: IE不支援就算了，Edge 不支援比较麻烦 08/09 14:34
8F：推 shadowjohn: 继续努力，让不能用的都可以用吧 08/14 09:22
9F：推 hijkxyzuw: append 和 appendChild 不一样也蛮冏的 09/08 00:42
10F：→ shadowjohn: 请持续努力直到作出下一个jQuerylite 09/13 11:10