用便利的JavaScript DOM导航实现API而不必背诵API

2024-01-16 10:02:53

jQuery可能是一个“上古”神器，但它的许多API仍然值得学习，而且非常经典。为了实现这些API的功能，我们常常需要背诵一些令人困惑的函数和语法。然而，有一种更简单的方法可以使用纯JavaScript DOM导航来实现类似的功能，而无需记忆复杂的API。

便利DOM元素及其祖先

要遍历DOM元素，我们可以使用parentNode属性，它指向元素的父元素。通过使用parentNode属性，我们可以一步步向上遍历元素的祖先。例如，以下代码将输出body元素：

const element = document.getElementById('my-element');
console.log(element.parentNode); // 输出: <body>

我们可以继续使用parentNode属性来遍历祖先元素，直到达到文档根元素document。

累加偏移量

当我们遍历元素的祖先时，我们可以累加每个元素相对于其最近祖先节点（其position属性是非static的）的偏移量。这可以通过使用offsetTop、offsetLeft和offsetParent属性来实现。

例如，以下代码将输出#my-element元素相对于其最近的非static祖先元素（#container）的偏移量：

const element = document.getElementById('my-element');
const offset = {
  top: element.offsetTop,
  left: element.offsetLeft,
};
while (element.offsetParent) {
  element = element.offsetParent;
  if (element.style.position !== 'static') {
    offset.top += element.offsetTop;
    offset.left += element.offsetLeft;
    break;
  }
}
console.log(offset); // 输出: { top: 100, left: 200 }