javascript如何优雅地操作DOM

在以前，操作DOM是一件非常麻烦的事情，虽然现在已经有类似React、Vue、Angular等框架帮助我们更容易地构建界面。但是我们仍然有必要学习原生DOM的操作方式来扩展我们的知识面，并且可以来应对一些不使用框架的场景，经过长时间的发展，现在的也变得更加优雅简洁了。

元素选择

单个元素

它提供类似jQuery的选择器方法，非常方便，我们可以这样使用它：

多个元素

如果要使用的数组方法，需要先转成普通数组，可以这样做：

但是它和或是有区别的，或返回的是一个，它是动态的，比如当我们移除掉中被选取的某个标签，所返回的中相应的标签也会被移除，它具有实时性。

而是静态的，移除文档流中被选取的某个标签，不会影响返回的，它没有实时性。

HTMLCollection 和 NodeList 的异同

是元素的集合（只包含元素）

是文档节点的集合（包含元素也包含其它节点）

是动态集合，节点变化会反映到返回的集合中

是静态集合，节点的变化不会影响返回的集合

实例对象可以通过或属性引用节点元素

只能使用数字索引引用

选择范围

我们可以限制选择的范围，而不至于每次都在上进行选择，可以这样做：

进一步封装

我们可以封装成类似的写法，用进行选择：

这里注意，我们需要使用把的指向绑定到上，否则直接把函数赋值给变量获取到的是一个普通函数，会导致指向

向上选择DOM

我们还可以获取某个的最近父元素，通过使用方法

添加元素

这里假设我们要添加这样一个元素

在过去，我们需要这样来添加元素

在有了后，我们可以这样来添加元素

现在，我们可以借助来实现类似的方法

这里需要传入两个参数，第一个参数是插入的位置，第二参数是插入的片段，位置可选参数如下：

插入某个元素之前

插入到第一个子元素之前

插入到最后一个子元素之后

插入到元素之后

通过这个API，可以更方便地指定插入位置。假如要把标签插入到之前，我们以前需要这样做：

而现在直接指定位置就可以了

还有两个相似的方法，但第二个元素传入的不是字符串，而是传一个元素或文本

插入文本

移动元素

上面介绍的也可以移动文档流上的一个元素，假如有这样的片段：

我们需要把标签插入到标签下面

注意，这是移动，而非拷贝，此时的变成：

元素替换

我们可以直接使用方法，通过这个方法，可以创建一个元素来进行替换，也可以选择一个已有元素进行替换，后者会移动被选择的元素，而非拷贝。

移除一个元素

只需要调用方法就可以了

使用原生HTML片段创建元素

从上面可以了解到方法可以帮助我们插入字符串到指定的位置，假如我们要先创建元素，而不是需要立即插入。

这时就需要借助对象，它可以解析和来创建一个元素，它提供了方法进行创建并返回解析后的元素。

元素匹配

matches

可以帮助我们判断某个元素是否和选择器相匹配。

contains

也可以使用方法判断是否包含某个子元素：

compareDocumentPosition

使用方法可以帮助我们确定某个元素的确切位置，它会返回数字来指示位置，返回值的意思如下，如果满足多个条件，会返回相加值：

1: 比较的元素不在同一个上

2: 在之前

4: 在之后

8: 包裹

16: 被包裹

MutationObserver

我们还可以使用来监听树的变动

然后我们需要使用方法监听某个的变化，否则不会监听，它接收两个参数，第一个参数是监听目标，第二个参数是监听选项。

当发生变化时，就会调用方法，此时，我们就可以在中监听变化，并监听的类型进行相应地处理：

具体的配置及其含义可以参考文档MutationObserver

当完成监听时，可以通过方法来中止监听，并且可以在之前通过来处理未传递的MutationRecord。

小结

通过上述这些强大的API，可以非常方便地对 DOM 进行操作，满足各种不同的需求，此外，还有一些没有介绍到的，比如可以监听目标元素和文档视窗的交叉状态来实现图片懒加载。所以，在使用框架进行开发时，我们也需要深入理解 DOM，这样才可以对整个 DOM 结构有更清晰的认识，更好地发挥它们的潜力，优雅地实现各种效果。