DOM 操作再学习

本文主要是介绍DOM 操作再学习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Using DOM like a Pro

1. 关于元素选择器函数 querySelector 和 querySelectorAll.

首先，这2个函数不一定要通过 document 执行，而且可以通过任意元素去执行，实现相对搜索。

还可以为此2函数创建别名：

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

querySelectorAll 返回的是 NodeList 而不是数组。如果要使用能够作用于数组的方法如 map, reduce, find 等，可以使用 Array.from() 或者 [...nodeList] 解构语法先转成数组再操作。

2. closest() 函数可以沿着 DOM 树向上查找到符合条件的最近的节点

3. 添加元素可以使用 insertAdjacentHTML() 函数，第一个参数用于指定插入的位置，可选值为 'beforebegin', 'afterbegin', 'beforeend', 'afterend'.
   如果操作的目标元素是当前 DOM 中已经存在的元素，则它会被移动，而不是被复制。

4. 替换元素用 replaceWith().

5. 移除元素用 remove().

6. 解析 HTML 字符串，创建元素，可以用 new DOMParser().parseFromString()

7. 检查 DOM API 是否匹配某个选择器条件，使用 matches() 方法。

8. 判断元素是否包含，使用 contains() 方法。

9. 获取2个元素之间的位置信息，用 compareDocumentPosition().

10. 使用 MutationObserver 对象，传递 callback，可以实现对 DOM 元素修改的监控。包括元素节点的增删、属性的变化、以及其子节点的增删。

参考：

【译】（从今以后）你可能不需要jQuery

这篇关于DOM 操作再学习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！