我如何检查一个元素是否存在于可见的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变量为什么会这样表现感兴趣。

当前回答

我只是这样做:

if(document.getElementById("myElementId")){
    alert("Element exists");
} else {
    alert("Element does not exist");
}

这对我来说很有效，而且还没有任何问题……

2013-02-11 12:59:13

其他回答

简单的方法:

const cond = document.getElementById('elem') || false
if (cond) {
    //does
} else {
    //does not
}

如果需要在严格可见的DOM中，这意味着不是在整个页面上，使用像view-js这样的东西(我的lib因此尽可能多地击败它)


<script src='https://view-js.glitch.me/view-main.js'></script>
<script>
elem = $sel('#myelem');
if (isVis(elem)) { //yes } else { //no }
</script>

函数测试(){ pt = document.querySelector('#result') iv = document.querySelector('#f') cond = document.querySelector('#'+iv.value) || false If (cond) { pt.innerText = '发现!' }其他{ pt.innerText = '未找到!' ｝｝输入一个id，看看它是否存在:<input id='f'></input> <按钮onclick = '测试()' >测试!< /按钮> < br / > <p id='result'>我是一个p标签。我会根据结果来改变 < br / > <div id='demo'>我是一个div.我的id是demo

2021-04-21 18:26:46

一个简单的解决方案与jQuery:

$('body').find(yourElement)[0] != null

2012-12-04 18:21:43

这段代码适合我，我没有遇到任何问题。


    if(document.getElementById("mySPAN")) {
        // If the element exists, execute this code
        alert("Element exists");
    }
    else {
        // If the element does not exist execute this code
        alert("Element does not exists");
    }

2019-12-04 15:21:57

在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

来自Mozilla开发者网络:

这个函数检查元素是否在页面主体中。由于contains()是包含的，而isInPage的目的不是确定正文是否包含自身，因此这种情况显式返回false。

function isInPage(node) {
  return (node === document.body) ? false : document.body.contains(node);
}

Node是我们要在<body>中检查的节点。

2013-09-15 11:32:12

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

推荐文章

最新文章

标签