我如何检查一个元素是否存在于可见的DOM?

如何在不使用getElementById方法的情况下测试元素的存在性?

我已经设置了一个现场演示供参考。我也将在这里打印代码:

<!DOCTYPE html>
<html>
<head>
    <script>
    var getRandomID = function (size) {
            var str = "",
                i = 0,
                chars = "0123456789abcdefghijklmnopqurstuvwxyzABCDEFGHIJKLMNOPQURSTUVWXYZ";
            while (i < size) {
                str += chars.substr(Math.floor(Math.random() * 62), 1);
                i++;
            }
            return str;
        },
        isNull = function (element) {
            var randomID = getRandomID(12),
                savedID = (element.id)? element.id : null;
            element.id = randomID;
            var foundElm = document.getElementById(randomID);
            element.removeAttribute('id');
            if (savedID !== null) {
                element.id = savedID;
            }
            return (foundElm) ? false : true;
        };
    window.onload = function () {
        var image = document.getElementById("demo");
        console.log('undefined', (typeof image === 'undefined') ? true : false); // false
        console.log('null', (image === null) ? true : false); // false
        console.log('find-by-id', isNull(image)); // false
        image.parentNode.removeChild(image);
        console.log('undefined', (typeof image === 'undefined') ? true : false); // false ~ should be true?
        console.log('null', (image === null) ? true : false); // false ~ should be true?
        console.log('find-by-id', isNull(image)); // true ~ correct but there must be a better way than this?
    };
    </script>
</head>
<body>
    <div id="demo"></div>
</body>
</html>

基本上，上面的代码演示了一个元素被存储到一个变量中，然后从DOM中删除。即使元素已经从DOM中删除，变量仍然保留第一次声明时的元素。换句话说，它不是对元素本身的动态引用，而是一个副本。因此，检查变量的值(元素)是否存在将会得到一个意想不到的结果。

isNull函数是我试图从变量中检查元素的存在，它可以工作，但我想知道是否有更简单的方法来实现相同的结果。

PS:如果有人知道一些与这个主题相关的好文章，我还对JavaScript变量为什么会这样表现感兴趣。

当前回答

而不是迭代父元素，当元素从DOM中分离出来时，你可以得到一个全为0的边界矩形:

function isInDOM(element) {
    if (!element)
        return false;
    var rect = element.getBoundingClientRect();
    return (rect.top || rect.left || rect.height || rect.width)?true:false;
}

如果你想处理宽度和高度都为零的元素的边缘情况，你可以通过迭代父元素直到document.body:

function isInDOM(element) {
    if (!element)
        return false;
    var rect = element.getBoundingClientRect();
    if (element.top || element.left || element.height || element.width)
        return true;
    while(element) {
        if (element == document.body)
            return true;
        element = element.parentNode;
    }
    return false;
}

2018-06-10 16:47:49

其他回答

你也可以使用jQuery。包含，它检查一个元素是否是另一个元素的后代。我传入document作为父元素进行搜索，因为页面DOM中存在的任何元素都是document的后代。

jQuery.contains( document, YOUR_ELEMENT)

2017-08-09 06:08:20

而不是迭代父元素，当元素从DOM中分离出来时，你可以得到一个全为0的边界矩形:

function isInDOM(element) {
    if (!element)
        return false;
    var rect = element.getBoundingClientRect();
    return (rect.top || rect.left || rect.height || rect.width)?true:false;
}

如果你想处理宽度和高度都为零的元素的边缘情况，你可以通过迭代父元素直到document.body:

function isInDOM(element) {
    if (!element)
        return false;
    var rect = element.getBoundingClientRect();
    if (element.top || element.left || element.height || element.width)
        return true;
    while(element) {
        if (element == document.body)
            return true;
        element = element.parentNode;
    }
    return false;
}

2018-06-10 16:47:49

我更喜欢使用节点。isConnected属性(访问MDN)。

注意:如果元素被附加到暗影根，这将返回true，这可能不是每个人都想要的行为。

例子:

const element = document.createElement('div');
console.log(element.isConnected); // Returns false
document.body.append(element);
console.log(element.isConnected); // Returns true

2020-06-10 09:46:40

检查元素是否是<html> via Node::contains()的子元素:

const div = document.createElement('div'); console.log ( document.documentElement.contains (div) ); / / - >错误的 document.body.appendChild (div); console.log ( document.documentElement.contains (div) ）; / / - - - - - - >正确的

我在is-dom-detached中已经讲过了。

2019-06-24 19:26:31

在forEach中使用querySelectorAll

document.querySelectorAll('.my-element').forEach((element) => {
  element.classList.add('new-class');
});

相反的:

const myElement = document.querySelector('.my-element');
if (myElement) {
  element.classList.add('new-class');
}

2018-08-23 16:20:34

我如何检查一个元素是否存在于可见的DOM?

推荐文章

最新文章

标签