跳到主要内容

操作DOM

创建节点​

  • document.createElement(tagname)

添加节点​

  • Node.appendChild()

插入节点​

  • parentNode.insertBefore(newNode, refNode)

删除节点​

  • parent.removeChild(node);

查找元素​

  • document.getElementById ：根据ID查找元素
  • document.getElementsByClassName： 根据类名查找元素
  • document.querySelector： 通过css选择器来查找

监测DOM元素​

  • resizeObserver
  • intersectionObserver
  • mutationObserve

ResizeObserver​

ResizeObserver（大小变化观察器）: 监听DOM尺寸变化

  • ResizeObserver 是一个现代的Web API，用于监测DOM元素的大小变化。
  • 它可以观察元素的宽度、高度、边界框变化等，而不需要轮询或手动检测。
  • 当元素的大小发生变化时，可以触发回调函数，以执行相应的操作。
  • 这对于构建响应式布局和处理元素尺寸变化非常有用。

IntersectionObserver​

IntersectionObserver（交叉观察器）：监听DOM是否在可视范围内

  • IntersectionObserver 允许你监测元素与视口（或其祖先元素）的交叉情况，也就是元素是否出现在视口中或离开视口。
  • 它提供了一种性能更好的方法来追踪元素的可见性状态，而无需频繁的计算。
  • 你可以设置阈值（thresholds）来定义何时触发回调函数，例如，当元素的一部分可见或完全可见时。
  • 这对于实现懒加载、无限滚动、广告触发和其他与可见性相关的功能非常有用。

MutationObserver​

MutationObserver（变化观察器）: 监听DOM变化

  • MutationObserver 允许你监测DOM树的变化，包括节点的添加、删除、属性变化等等。
  • 当DOM结构发生变化时，可以触发回调函数，使你能够实时响应这些变化。
  • 这对于构建复杂的Web应用程序，需要监测和处理动态内容的变化非常有用。
  • 与传统的事件监听不同，MutationObserver 更适合监测DOM变化，而不需要为每个可能的变化点都添加事件监听器