JavaScript的父级元素的父级元素

Question

在JavaScript中，有没有一种简单的方法来定位祖先级的父元素？

我正在使用this.parentNode作为函数的元素来选择父元素，我尝试了this.parent.parentNode和this.parentNode.parentNode，但两者都只返回直接父元素。
我想要影响包围'this'的

包围层。我设法使用一个简单的循环语句来重复选择parentNode两次，但我认为可能有更好的方法。

- user2126833

---

this.parentNode.parentNode 应该可以正常工作。我看不出它为什么不行。 - Christoph

this.parentNode.parentNode 应该可以正常工作。 - Starx

Answer 1

< p > this.parentNode.parentNode 是正确的，你在测试中尝试时可能犯了错误（请原谅！）。

示例：现场演示 | 源代码

HTML：

<div id="outermost">Outermost
  <div id="inner1">Inner 1
    <div id="inner2">Inner 2</div>
  </div>
</div>

JavaScript：

var inner2 = document.getElementById("inner2");

display("inner2.id = " + inner2.id);
display("inner2.parentNode.id = " + inner2.parentNode.id);
display("inner2.parentNode.parentNode.id = " + inner2.parentNode.parentNode.id);

display("Try clicking the blue 'inner2' above");

inner2.onclick = function(e) {
  display("Click: this.id = " + this.id);
  if (this.parentNode) {
    display("Click: this.parentNode.id = " + this.parentNode.id);
    if (this.parentNode.parentNode) {
      display("Click: this.parentNode.parentNode.id = " + this.parentNode.parentNode.id);
    }
  }
};

function display(msg) {
  var p = document.createElement('p');
  p.innerHTML = String(msg);
  document.body.appendChild(p);
}

输出（假设按照指示进行点击）:

inner2.id = inner2
inner2.parentNode.id = inner1
inner2.parentNode.parentNode.id = outermost
尝试点击上述蓝色的'inner2'
点击：e.target.id = inner2
点击：e.target.parentNode.id = inner1
点击：e.target.parentNode.parentNode.id = outermost

- T.J. Crowder

---

@user2126833：不用担心。这个解决了吗，还是你在真实代码中仍然遇到问题？如果是这样，你可能需要发布一个新的问题，给出完整的上下文（标记和代码），人们会很乐意帮助你。例如，它只是看起来给你相同的父元素吗？例如，如果你有一个div内部有一个div内部有一个div，所有三个级别都将是div元素，所以很容易认为.parentNode和.parentNode.parentNode都给了你相同的元素... - T.J. Crowder

谢谢你的回答非常有帮助。应该有一个明确的指南来解析所有 HTML 元素，无论是动态的还是静态的，从这里和那里收集所有这些信息真的很令人困惑。 - Sushant Bhargav