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

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。
这可能吗？谢谢。

标签： javascripthtmldom

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>