44、DOM 遍历与范围操作详解

DOM 遍历与范围操作详解

1. 元素滚动与尺寸相关操作

1.1 滚动属性

scrollLeft 和 scrollTop 属性可用于确定元素的当前滚动设置或设置滚动位置。当元素未滚动时，这两个属性的值都为 0。若元素垂直滚动， scrollTop 大于 0，表示元素顶部不可见内容的量；若元素水平滚动， scrollLeft 大于 0，表示元素左侧不可见的像素数。可以通过将 scrollLeft 和 scrollTop 都设置为 0 来重置元素的滚动位置。以下是一个将元素滚动到顶部的函数：

function scrollToTop(element) {
  if (element.scrollTop != 0) {
    element.scrollTop = 0;
  }
}

1.2 确定元素尺寸

浏览器为每个元素提供了 getBoundingClientRect() 方法，该方法返回一个 DOMRect 对象，包含 left 、 top 、 right 、 bottom 、 height 和 width 六个属性，这些属性给出了元