如何在客户端脚本中精准定位当前组件实例的元素？

我有一个可能在页面中重复渲染两次的组件，页面加载完成后需要执行脚本控制组件内部分元素的显示/隐藏。当前代码如下：

<script>
    revealCurrentArticle();

    function revealCurrentArticle() {
        const path = window.location.pathname;
        const currentLi = document.querySelector(`[data-path="${path}"]`);

        if (currentLi === null) {
            return;
        }

        let parent = currentLi.parentElement;
        while(parent) {
            if (parent.nodeName.toLowerCase() !== "ul") {
                break;
            }
            
            parent.classList.remove('hidden');
            parent = parent.parentElement?.parentElement;
        }
    }
</script>

问题出在这一行：

const currentLi = document.querySelector(`[data-path="${path}"]`);

它能找到元素，但不一定是当前组件实例内的元素。我不想让组件感知到自身可能被多次渲染（比如用document.querySelectorAll遍历所有实例），有没有办法确保currentLi始终指向当前组件实例内的元素？

解决方案1：以组件根元素为查询上下文 #

把脚本嵌入组件内部，利用document.currentScript定位当前脚本所在的组件根容器，再以这个容器为上下文查找元素，完全限定在当前实例范围内。

假设你的组件有一个根容器（比如带article-component类的div），调整后的代码如下：

<div class="article-component">
  <!-- 组件内部结构 -->
  <ul>
    <li data-path="/article/1">文章1</li>
    <li data-path="/article/2">文章2</li>
  </ul>

  <script>
    // 定位当前脚本所属的组件根容器
    const componentRoot = document.currentScript.closest('.article-component');
    if (!componentRoot) return;

    function revealCurrentArticle(root) {
        const path = window.location.pathname;
        // 仅在当前组件根容器内查找目标元素
        const currentLi = root.querySelector(`[data-path="${path}"]`);

        if (!currentLi) return;

        let parent = currentLi.parentElement;
        while(parent) {
            if (parent.nodeName.toLowerCase() !== "ul") break;
            parent.classList.remove('hidden');
            parent = parent.parentElement?.parentElement;
        }
    }

    revealCurrentArticle(componentRoot);
  </script>
</div>

这种方式不需要组件关心页面上有多少个实例，只需要聚焦自身范围即可。

解决方案2：利用组件唯一标识锁定范围 #

如果组件渲染时能自动生成唯一标识（比如后端渲染时给每个组件加data-component-id属性），可以通过组合选择器限定查询范围：

<!-- 渲染后的组件实例 -->
<div data-component-id="article-123">
  <ul>
    <li data-path="/article/1">文章1</li>
  </ul>

  <script>
    // 获取当前组件的唯一ID
    const componentId = document.currentScript.closest('[data-component-id]').dataset.componentId;
    const path = window.location.pathname;
    // 通过组件ID+路径属性锁定当前实例内的元素
    const currentLi = document.querySelector(`[data-component-id="${componentId}"] [data-path="${path}"]`);

    if (!currentLi) return;

    let parent = currentLi.parentElement;
    while(parent) {
        if (parent.nodeName.toLowerCase() !== "ul") break;
        parent.classList.remove('hidden');
        parent = parent.parentElement?.parentElement;
    }
  </script>
</div>

同样不需要组件感知多实例，只需要确保每个实例有唯一标识即可。

解决方案3：依赖DOM结构顺序快速定位 #

如果脚本紧跟在组件内的目标元素之后，可以直接用previousElementSibling获取元素上下文：

<ul class="article-list">
  <li data-path="/article/1">文章1</li>
</ul>
<script>
  // 获取当前脚本的前一个兄弟元素（即组件内的ul）
  const listElement = document.currentScript.previousElementSibling;
  if (!listElement) return;

  const path = window.location.pathname;
  const currentLi = listElement.querySelector(`[data-path="${path}"]`);

  if (!currentLi) return;

  let parent = currentLi.parentElement;
  while(parent) {
      if (parent.nodeName.toLowerCase() !== "ul") break;
      parent.classList.remove('hidden');
      parent = parent.parentElement?.parentElement;
  }
</script>

这种方式更简洁，但要求脚本和目标元素的DOM顺序固定。

内容的提问来源于stack exchange，提问作者mnj