JavaScript最近距离（）方法的实际用例

厌倦了JavaScript的父节点遍历挑战？找到合适的祖先元素可能很棘手，尤其是在深层嵌套或动态的HTML结构中。让我们探讨closest()方法如何简化此过程。

考虑此HTML片段：

<div data-id="123">
  点击我
</div>

使用parentNode直接获取data-id在按钮之后：

 const button = document.queryselector（“ button”）;
button.AddeventListener（“单击”，（EVT）=> {
  console.log（evt.target.parentnode.dataset.id）; //打印“ 123”
}）;

但是，这种方法失败了，筑巢更复杂：

<div data-id="123">
  <div>
    <h1 id="一些标题">一些标题</h1>
    <button>点击我</button>
  </div>
</div>

链接多次parentNode是繁琐且无法实现的。循环while涉及的较旧的解决方案：

函数getParentNode（el，tagName）{
  while（el && el.parentnode）{
    el = el.parentnode;
    if（el && el.tagname === tagname.touppercase（））{
      返回el;
    }
  }
  返回null;
}

功能性虽然不灵活，并且不处理超越标签名称的选择器。 jQuery的.closest()提供了一个出色的解决方案，但是为单个功能添加库通常是过度的。

输入Element.closest()

本地Element.closest()方法提供了一个优雅的解决方案：

 const button = document.queryselector（“ button”）;
console.log（button.closest（“ div”））; //返回<div> 元素<p><code>closest()</code>向上遍历DOM，直到找到符合提供的选择器的祖先为止。此选择器可以是任何有效的CSS选择器：ID，类，属性或标签名称。</p>
<pre class="brush:php;toolbar:false"> element.closest（“＃my-id”）; //工作
element.closest（“。my-class”）; //工作
element.closest（“ [data-id]”）; //工作

如果找不到匹配的祖先， closest()返回null 。这使有条件的检查变得容易：

 const button = document.queryselector（“ button”）;
if（button.closest（“。my-class”））{
  console.log（“找到！”）;
} 别的 {
  console.log（“找不到！”）;
}

现实世界应用

1. 下拉次数：检测到下拉菜单外的单击以关闭它：

 // ...（事件处理代码）...
如果（！evt.target.closest（“。菜单dropdown”））{
  //关闭下拉
}

2. 表：与这些行中的按钮交互时，从表行中检索数据属性：

功能getUserid（target）{
  返回target.closest（“ [data-userid]”）。dataset.userid;
}

3. 反应表：与上述相似，但在一个反应​​组件中：

功能handleclick（evt）{
  const userId = evt.currenttarget.closest（“ [data-userid]”）。dataset.userid;
  // ...
}

4. 模态：单击模式内容外关闭模式：

 // ...（事件处理代码）...
如果（！evt.target.closest（“。modal-inner”））{
  //关闭模态
}

浏览器支持

Element.closest()享有出色的浏览器支持，不包括旧版本的Internet Explorer。这使其成为大多数项目的安全可靠选择。

Element.closest()提供了一种简洁有效的方法来导航DOM层次结构，从而消除了许多常见场景中对复杂循环或外部库的需求。它的多功能性和广泛的浏览器支持使其成为任何JavaScript开发人员的宝贵工具。

以上是JavaScript最近距离（）方法的实际用例的详细内容。更多信息请关注PHP中文网其他相关文章！