Using DOM like a Pro
首先,这2个函数不一定要通过 document 执行,而且可以通过任意元素去执行,实现相对搜索。
还可以为此2函数创建别名:
const $ = document.querySelector.bind(document); const $$ = document.querySelectorAll.bind(document);
querySelectorAll 返回的是 NodeList 而不是数组。如果要使用能够作用于数组的方法如 map, reduce, find 等,可以使用 Array.from() 或者 [...nodeList] 解构语法先转成数组再操作。
closest() 函数可以沿着 DOM 树向上查找到符合条件的最近的节点
添加元素可以使用 insertAdjacentHTML() 函数,第一个参数用于指定插入的位置,可选值为 'beforebegin', 'afterbegin', 'beforeend', 'afterend'.
如果操作的目标元素是当前 DOM 中已经存在的元素,则它会被移动,而不是被复制。
替换元素用 replaceWith().
移除元素用 remove().
解析 HTML 字符串,创建元素,可以用 new DOMParser().parseFromString()
检查 DOM API 是否匹配某个选择器条件,使用 matches() 方法。
判断元素是否包含,使用 contains() 方法。
获取2个元素之间的位置信息,用 compareDocumentPosition().
使用 MutationObserver 对象,传递 callback,可以实现对 DOM 元素修改的监控。包括元素节点的增删、属性的变化、以及其子节点的增删。
参考:
【译】(从今以后)你可能不需要jQuery