javascript - 父母的javascript父母

Question

在javascript中有一种简单的方法来定位父母的父母吗？

我使用this.parentNode作为函数的元素来选择父级，我尝试了this.parent.parentNodeand this.parentNode.parentNode，但都简单地返回了直接父级。
我试图影响围绕“this”的 div 周围的 div。我确实设法使用一个简单的循环语句使其工作，该循环语句重复 parentNode 选择两次，但我认为有更好的方法。

Answer 1

this.parentNode.parentNode是正确的，您必须（道歉！）在您尝试的测试中出现错误。

示例：Live Copy | 来源

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);
}

输出（假设按指示单击）：

内部 2.id = 内部 2
inner2.parentNode.id = inner1
inner2.parentNode.parentNode.id = 最外层
尝试点击上方的蓝色“inner2”
点击：e.target.id = inner2
点击：e.target.parentNode.id = inner1
点击：e.target.parentNode.parentNode.id = 最外层