[教學] 越來越像 jQuery 的原生 JavaScript
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://www.ptt.cc/bbs/Ajax/M.1502114119.A.552.html
推
08/07 22:52, , 1F
08/07 22:52, 1F
→
08/07 22:53, , 2F
08/07 22:53, 2F
→
08/07 22:53, , 3F
08/07 22:53, 3F
→
08/07 22:54, , 4F
08/07 22:54, 4F
推
08/09 14:31, , 5F
08/09 14:31, 5F
→
08/09 14:32, , 6F
08/09 14:32, 6F
→
08/09 14:34, , 7F
08/09 14:34, 7F
推
08/14 09:22, , 8F
08/14 09:22, 8F
推
09/08 00:42, , 9F
09/08 00:42, 9F
→
09/13 11:10, , 10F
09/13 11:10, 10F
Ajax 近期熱門文章
PTT數位生活區 即時熱門文章
