如何用原生JS获取iframe的两个上层div元素的ID？

你之前的代码之所以不行，问题出在这两点：

• modal.previousSibling 获取到的是iframe标签前面的空白文本节点（就是HTML里的换行、空格），这类节点没有id属性，所以输出undefined
• modal.previousElementSibling 返回null，是因为iframe在它的父容器<div id="page">里是第一个元素节点，前面根本没有其他同级的元素节点

要拿到那两个上层div的ID，直接通过parentNode属性向上遍历DOM树就行：

let modal = document.getElementById("modal");
// 获取直接父元素page的ID
let pageId = modal.parentNode.id;
console.log(pageId); // 输出page

// 获取page的父元素mask的ID
let maskId = modal.parentNode.parentNode.id;
console.log(maskId); // 输出mask

如果怕后续DOM结构有小变动，也可以用closest()方法直接匹配指定选择器的祖先元素，写法更灵活：

let modal = document.getElementById("modal");
// 直接找最近的id为page的祖先元素
let pageEl = modal.closest("#page");
console.log(pageEl.id); // 输出page

// 直接找最近的id为mask的祖先元素
let maskEl = modal.closest("#mask");
console.log(maskEl.id); // 输出mask

closest()会从当前元素开始往上找，匹配第一个符合选择器的元素，除了IE之外，主流浏览器都支持，很适合这种场景。

内容的提问来源于stack exchange，提问作者CharlesEF