JavaScript - 获取一个元素的所有父级元素

Question

<div id="parent">
    <div id="child1">
        <div id="child2">
          <div id="child3">
            <div id="child4">
            </div>
          </div>
        </div>
    </div>      
</div>

如何获取父元素，即如果以目标节点child3为例，则需要获取父元素child2，child1和根元素。有没有办法在JavaScript中从子元素获取父元素。能否有人帮我？ 谢谢。

- raj

Answer 1

var elem = document.getElementById("child3");

function getParents(elem) {
  var parents = [];
  while(elem.parentNode && elem.parentNode.nodeName.toLowerCase() != 'body') {
    elem = elem.parentNode;
    parents.push(elem);
  }
  return parents;
}

console.log(getParents(elem));

<div id="parent">
    <div id="child1">
        <div id="child2">
          <div id="child3">
            <div id="child4">
            </div>
          </div>
        </div>
    </div>
    
</div>

elem.parentNode.nodeName.toLowerCase() != 'body'

这将防止它将body和html元素添加到父数组中

- fanjabi

---

谢谢Fanjabi，它运行良好，但我需要另一个解决方案，有没有办法在不使用循环的情况下获取所有父元素，就像我们可以使用ele.children获取子元素一样。 - raj

Answer 2

您可以使用 for...in 来检查 parentNode：

var a = document.getElementById("child3");
var arr = [];
for(var n in a){
  a = a.parentNode;
  if(a.nodeName == 'BODY') // return if the element is the body element
    break;
  arr.push(a);
}
console.log(arr);

<div id="parent">
    <div id="child1">
        <div id="child2">
          <div id="child3">
            <div id="child4">
            </div>
          </div>
        </div>
    </div>   
</div>

- Mamun

---

谢谢Mamun，它运行得很好，但我需要另一个解决方案，有没有办法在不使用循环的情况下获取所有父元素，就像我们可以使用a.children获取子元素一样。 - raj

@raj，“children”获取元素子项的集合而不是父项。据我所知，没有办法在没有某种循环的情况下获取元素的所有父项。 - Mamun