Javascript 效率；“父节点”；domapi的属性？

我将要编写一段代码，它依赖于

parentNode

从当前节点所在的DOM树中查找属性

例如：

<div data-url="https://www.google.com">
  <span>
    <a href='#' id='link'>Click me to get the url</a>
  </span>
</div>

问题是我不确定这个

parentNode

API的效率有多高。是否足够快，我可以把它们当作一个普通的javascript对象（带有API）？或者它实际上会干扰回流，或者与屏幕上的实际渲染元素有任何关系

如果您有任何见解，我们将不胜感激

[编辑]如果直接访问DOM树不是最好的选择，有人能提出更好的选择吗？顺便说一句，我不关心预处理所需的时间，所以如果解决方案涉及某种类型的预处理，那也很好

[EDIT2]更新为使用“parentNode属性”而不是“parentNode函数”

[EDIT3]我认为我给出的这个具体例子可能有点误导，因为这只是一个例子。底线是我已经有了一个对节点的引用（在本例中是

），并从那里开始，以获取包含该属性的最近祖先的特定属性

基本上，我正在寻找实现这个特定目标的最有效的方法，并且不确定使用

parentNode

遍历DOM树是否足够好

[编辑4]让我进一步澄清这一点。我希望能够获取DOM树中的任何元素，如下所示：

var a = document.getElementById("test");

并访问其属性：

console.log(a.magicGetAttribute("data-url"))

---

它会自动找到最接近的具有该属性的祖先（如果当前的祖先没有），并返回该值，就像JS prototype是如何工作的一样。

首先，关于使用DOM，需要了解一些事情

它可能是使用速度最慢的API

话虽如此，现代用户代理已经很好地优化了API，这样它就不再是过去的信天翁了，而且对于大多数用例来说速度相当快，只要您不通过编写浪费性代码来滥用它（见下文）

搜索DOM，无论使用哪种方法，都会有开销，但搜索本身不会导致重绘或回流

访问属性值（甚至读操作）也会增加额外的开销（所以尽量减少循环中的DOM操作）。通常，最好将多个读取操作分组到连续语句中，以优化操作

只有在修改元素的内容或样式时，才会重新绘制和回流。在这些情况下，您可以采取一些步骤来最小化重新渲染，例如使用位于其自身层中的元素（最小化回流）以及在可能的情况下使用

不透明度

就你的情况而言，最好是改变想法。您可以在父级接收事件（通过冒泡），而不是在子级接收单击事件，然后搜索父级，因为它是由子级触发的。在这里使用很有帮助，可以完全消除祖先搜索循环：

//获取所有“父”元素的列表
var dataURLs=document.querySelectorAll（“.parent”）；
//将事件处理程序分配给所有父元素
对于（var i=0；i

---

首先，关于使用DOM，需要了解几件事

它可能是使用速度最慢的API

话虽如此，现代用户代理已经很好地优化了API，这样它就不再是过去的信天翁了，而且对于大多数用例来说速度相当快，只要您不通过编写浪费性代码来滥用它（见下文）

搜索DOM，无论使用哪种方法，都会有开销，但搜索本身不会导致重绘或回流

访问属性值（甚至读操作）也会增加额外的开销（所以尽量减少循环中的DOM操作）。通常，最好将多个读取操作分组到连续语句中，以优化操作

只有在修改元素的内容或样式时，才会重新绘制和回流。在这些情况下，您可以采取一些步骤来最小化重新渲染，例如使用位于其自身层中的元素（最小化回流）以及在可能的情况下使用

不透明度

就你的情况而言，最好是改变想法。您可以在父级接收事件（通过冒泡），而不是在子级接收单击事件，然后搜索父级，因为它是由子级触发的。在这里使用很有帮助，可以完全消除祖先搜索循环：

//获取所有“父”元素的列表
var dataURLs=document.querySelectorAll（“.parent”）；
//将事件处理程序分配给所有父元素
对于（var i=0；i

我正在寻找实现这个特定目标的最有效的方法，并且不确定使用

parentNode

遍历DOM树是否足够好

除非您通过测量知道使用父节点不够好，否则不要尝试执行任何操作。使用

parentNode

属性是遍历D

console.log(a.magicGetAttribute("data-url"))