如何在不使用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变量为什么会这样表现感兴趣。


当前回答

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

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

例子:

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

其他回答

jQuery的解决方案:

if ($('#elementId').length) {
    // element exists, do something...
}

这为我使用jQuery工作,不需要$('#elementId')[0]被使用。

似乎有些人登陆这里,只是想知道一个元素是否存在(与最初的问题略有不同)。

这就像使用浏览器的任何选择方法一样简单,并检查它的真值(通常)。

例如,如果我的元素有一个id为“find-me”,我可以简单地使用…

var elementExists = document.getElementById("find-me");

指定此参数以返回对元素的引用或null。如果必须使用布尔值,只需抛出一个!!在方法调用之前。

此外,你还可以使用其他一些方法来查找元素,比如(all living off document):

querySelector () / querySelectorAll () getElementsByClassName () getElementsByName ()

其中一些方法返回一个NodeList,因此一定要检查它的length属性,因为NodeList是一个对象,因此是真值。


对于实际确定一个元素是否作为可见DOM的一部分存在(就像最初提出的问题一样),Csuwldcat提供了比滚动自己的解决方案更好的解决方案(就像这个答案曾经包含的那样)。也就是说,在DOM元素上使用contains()方法。

你可以这样使用它……

document.body.contains(someReferenceToADomElement);

检查元素是否是<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中已经讲过了。

这种情况适用于所有情况。

函数del() { 如果dom中有这个元素,则返回小鸡 //if not true condition表示null或unfind或false。 如果(!文档。querySelector (" # ul_list ") = = = true) { // MSG给用户 警报(“点击BTN加载”); //如果控制台小鸡为你和显示null清除控制台。 console.clear (); //函数停止。 返回错误; } //如果它的true函数将日志删除。 console.log(“删除”); }

所有现有的元素都有parentElement集,除了HTML元素!

function elExists (e) { 
    return (e.nodeName === 'HTML' || e.parentElement !== null);
};