javascript - DOM API "parentNode"属性的效率？

Question

我即将编写一段依赖 parentNode 的代码从当前节点所在的 DOM 树中查找属性。

例如:

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

从此标记中，我希望能够单击 <a>并获取data-url包含 data-url 的最近祖先元素的属性。

var getEnclosingUrl = function(){
  var link = document.getElementById('link');
  var parent = link;
  while(parent = parent.parentNode){
    if(parent.hasAttribute("data-url")){
      return parent.getAttribute("data-url");
    }
  }
  return "No url!";
}

问题是我不确定这个 parentNode 的效率如何API 是。它是否足够快，我可以将它们视为常规 javascript 对象(带有 API)？或者它实际上是否会扰乱回流或与屏幕上实际渲染的元素有什么关系？

非常感谢任何见解!

[编辑]如果直接访问 DOM 树不是最佳选择，有人可以建议更好的选择吗？顺便说一句，我并不关心预处理内容所需的时间，因此如果解决方案涉及某种预处理，那也很棒。

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

[EDIT3] 我认为我给出的这个具体示例可能有点误导，因为这只是一个示例。最重要的是，我已经有了对节点的引用(在本例中为 <a> )，并从那里开始，获取包含该属性的最近祖先的特定属性。

基本上，我正在寻找实现此特定目标的最高效方法，并且不确定是否使用 parentNode遍历 DOM 树就足够了。

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

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

并访问其属性:

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

并且它会以某种方式自动找到具有该属性的最近的祖先(如果当前的祖先没有)，并返回该值，就像 JS 原型(prototype)的工作方式一样。

Answer 1

首先，了解有关使用 DOM 的一些知识。

1. 它可能是使用起来最慢的 API。
2. 话虽如此，现代用户代理已经很好地优化了 API，因此它不再是过去的负担，而且只要您不通过编写浪费的代码来滥用它，对于大多数用例来说速度都相当快(请参阅如下)。

无论使用哪种方法，搜索 DOM 都会产生开销，但单独搜索不会导致重绘或回流。

访问属性值(甚至读取操作)也会增加额外的开销(因此请尽量减少循环中的 DOM 操作)。一般来说，最好将多个读操作分组到连续的语句中以优化操作。

仅当您修改元素的内容或样式时才会发生重绘和重排。在这些情况下，您可以采取一些步骤来最大限度地减少重新渲染，例如使用位于自己图层中的元素(最大限度地减少回流)并在可能的情况下使用不透明度。

根据您的情况，最好扭转一下想法。您可以在父级接收事件(通过冒泡)，因为它是由子级触发的，而不是在子级接收单击事件，然后搜索父级。使用event.currentTaget 在这里很有帮助，可以完全消除祖先搜索循环:

// Get a list of all the "parent" elements
var dataURLs = document.querySelectorAll(".parent");

// Assign event handlers to all the parent elements
for(var i = 0; i < dataURLs.length; i++){
  dataURLs[i].addEventListener("click", function(e){
    // Get the value of the attribute ensuring to access
    // the object that the event was attached to, not the
    // object that initiated the event.
    console.log(e.currentTarget.dataset.url || "No data-url!");  
  });
}

<div data-url="https://www.google.com" class="parent">
  <span>
    <a href='#' id='link'>Click me to get the url</a>
  </span>
  <div>
    <!-- Even elements nested deeper within the parent will stil work -->
    <span>
      <a href='#' id='link'>Click me to get the url</a>
    </span>
  </div>
</div>
<div class="parent">
  <span>
    <a href='#' id='link'>Click me to get the url</a>
  </span>
</div>
<div data-url="https://www.microsoft.com" class="parent">
  <span>
    <a href='#' id='link'>Click me to get the url</a>
  </span>
</div>
<div data-url="https://www.apple.com" class="parent">
  <span>
    <a href='#' id='link'>Click me to get the url</a>
  </span>
</div>