Question

我正在尝试检查 html 页面中是否存在 DOM js 元素。像这样：

var a = document.querySelector('div'),
    b = document.createElement('div');
    
var f = () => {
  // some code
}

<div>hello world</div>

本质上，执行 f(a) 应该返回 true，但是执行 f(b) 应该返回 false。
这可能吗？谢谢。

Answer 1

您可以使用 contains 方法来做到这一点，在 document 上调用它。

const
    a = document.querySelector('div'),
    b = document.createElement('div');
    
const f = element => {
    return document.contains(element);
};

console.log(f(a)); // true
console.log(f(b)); // false

<div>hello world</div>

或者，您可以跟随元素的 parentNode 直到它是 null（没有进一步的父级）或它是 document：

const
    a = document.querySelector('div'),
    b = document.createElement('div');
    
const f = node => {
    let inDom = false;
    while (node && node.parentNode) {
        if (node.parentNode === document) {
            inDom = true;
            break;
        }
        node = node.parentNode;
    }
    return inDom;
};

console.log(f(a)); // true
console.log(f(b)); // false

<div>hello world</div>

检查页面中是否呈现了 javascript DOM 元素

1 个答案: