Question

我在这里有一个奇怪的问题，但是我想问社区。一位同事问我有关DOM结构的问题。他想知道确定父节点/元素包含子节点/元素的最佳方法，以及如何收集/确定从父节点到子节点的DOM路径/选择器。例如，我们有一个这样的DOM，其父节点ID为parentItem，子节点ID为childItem

<body>
<div id="parentItem">
  <div>
    <div>I am some text</div>
    <div>Today is Wednesday, 15th May, 2019</div>
    <div>
      <article>
        <h1>Article 1</h1>
        <img src="/img.png">
        <div>I am a sibling</div>
        <div id="childItem">I am the Child</div>
      </article>
      <article>
        <h1>Article 2</h1>
        <img src="/img2.png">
        <div>I am another Article</div>
      </article>
    </div>
  </div>
</div>
<div>
  <div>I am a footer</div>
</div>
</body>

因此，我说过，确定关系的最佳方法是确定子节点存在于父节点中，并沿DOM向上直到到达父节点为止。我编写了以下函数来检查该关系是否存在，然后从子节点处理DOM，以制作一个Node路径数组以及关于其父项的node项目的索引。我这样写：

function childRelationship(parent, child) {
  if(document.getElementById(parent).contains(document.getElementById(child))) {
    let el = document.getElementById(child);
    const end = document.getElementById(parent).id;
    const pathArray = [];


    while(el.parentNode && el.id !== end) {
      let chosenIndex = ([...el.parentNode.children].filter((node) => node.tagName === el.tagName).indexOf(el));
      chosenIndex = `[${chosenIndex}]`;
      pathArray.unshift(el.tagName + chosenIndex);
      el = el.parentNode;
    }
    return 'Exists: ' + pathArray.join(' > ');
  } else {
    return 'No Child Exists Within Parent';
  }
}

当我运行childRelationship('parentItem','childItem')时，使用示例DOM的输出为Exists: DIV[0] > DIV[2] > ARTICLE[0] > DIV[1]。

一切都很好，但我不得不问，有一种更好或更优雅的方法：a）确定父子之间的路径（如ES6方法）？ b）确定正确的DOM项的索引，因为([...el.parentNode.children].filter((node) => node.tagName === el.tagName).indexOf(el));的解决方案似乎太复杂了。有没有更简单的方法来获取路径和索引而无需向后遍历？

如果这是一个不好的问题，或者我措辞不好，请这样说，我将重做我的问题。

遍历DOM以确定子元素的存在，并使用JavaScript / ES6输出从父元素到子元素的路径

0 个答案: