js—parentElement返回元素的父元素

parentElement只读属性返回指定元素的父元素。

如果指定的元素没有父元素，则此属性返回null。

<div id="box">
  <p>第1个段落</p>
  <p class="txt" style="background-color: skyblue;">第2个段落</p>
  <p>第3个段落</p>
</div> <button id="btn">点击</button>
<div id="result"></div>

1、找到父节点

var btn = document.querySelector('#btn');
var txt = document.getElementsByClassName('txt')[0];
console.log(txt);
// 单击按钮，获取指定节点的父节点 
var result = document.querySelector('#result') btn.onclick = function () {
  // 找到父节点 
  result.innerHTML = txt.parentElement;
}

代码演示：

2、找到父节点的节点名

// 找到父节点的节点名 
result.innerHTML = txt.parentElement.nodeName;

代码演示：

3、父节点的父节点

//父节点的父节点
result.innerHTML = txt.parentElement.parentElement.nodeName;

代码演示：