如何检查可见DOM中是否存在元素?

2020/09/27 04:01 · javascript ·  · 0评论

您如何在不使用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变量会如此表现呢?

似乎有人在这里着陆,只是想知道某个元素是否存在(与原始问题略有不同)。

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

例如,如果我的元素有一个id"find-me",我可以简单地使用...

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

可以指定返回元素或的引用null如果必须具有布尔值,则只需!!在方法调用之前扔一个

此外,您可以使用许多其他方法来查找元素,例如(全部靠document):

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

其中一些方法返回a NodeList,因此请务必检查其length属性,因为a NodeList是一个对象,因此为true


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

您可以像这样使用它...

document.body.contains(someReferenceToADomElement);

使用getElementById()如果它是可用的。

另外,这是使用jQuery的一种简单方法:

if ($('#elementId').length > 0) {
  // Exists.
}

而且,如果您不能使用第三方库,请坚持使用基本的JavaScript:

var element =  document.getElementById('elementId');
if (typeof(element) != 'undefined' && element != null)
{
  // Exists.
}

使用Node.contains DOM API,您可以很容易地检查页面中是否存在任何元素(当前在DOM中):

document.body.contains(YOUR_ELEMENT_HERE);

跨浏览器注意documentInternet Explorer中对象没有contains()方法-要确保跨浏览器的兼容性,请document.body.contains()改用。

我只是做:

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

它对我有用,但还没有问题...

您可以检查一下parentNode属性是否为null。

那是,

if(!myElement.parentNode)
{
    // The node is NOT in the DOM
}
else
{
    // The element is in the DOM
}

来自Mozilla开发人员网络

此函数检查元素是否在页面的正文中。因为contains()是包含性的,并且确定主体是否包含自身不是isInPage的意图,所以此例显式返回false。

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

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

最简单的解决方案是检查baseURI属性,该属性仅在将元素插入DOM中时设置,并且在删除元素时将其还原为空字符串。

var div = document.querySelector('div');

// "div" is in the DOM, so should print a string
console.log(div.baseURI);

// Remove "div" from the DOM
document.body.removeChild(div);

// Should print an empty string
console.log(div.baseURI);
<div></div>

jQuery解决方案:

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

这对我使用jQuery $('#elementId')[0]有用,不需要使用。

通过jQuery的单行代码可以完成一种检查元素是否存在的简单方法。

这是下面的代码:

if ($('#elementId').length > 0) {
    // Do stuff here if the element exists
} else {
    // Do stuff here if the element does not exist
}

csuwldcat的解决方案似乎是最好的解决方案,但需要稍作修改以使其与运行JavaScript代码的文件位于不同文档中的元素(例如iframe)正确运行:

YOUR_ELEMENT.ownerDocument.body.contains(YOUR_ELEMENT);

注意元素的ownerDocument属性的使用,而不是普通的旧属性document(可能引用或可能不引用元素的所有者文档)。

torazaburo发布了一种甚至更简单的方法,该方法也可以用于非本地元素,但是不幸的是,它使用的baseURI属性,目前在浏览器之间并没有统一实现(我只能在基于WebKit浏览器中使用它)。我找不到可以类似方式使用的任何其他元素或节点属性,所以我认为目前上述解决方案目前为止已经很好。

无需迭代父对象,只需将元素从DOM分离出来,就可以得到全部为零的边界矩形:

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;
}

这段代码对我有用,但我没有任何问题。


    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");
    }

另一个选择是element.closest

element.closest('body') === null

我更喜欢使用该node.isConnected属性(访问MDN)。

注意:如果元素也附加到ShadowRoot,则返回true,这可能不是每个人都想要的行为。

例:

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

您还可以使用jQuery.contains,它检查一个元素是否是另一个元素的后代。document作为搜索的父元素传入,因为页面DOM上存在的任何元素都是的后代document

jQuery.contains( document, YOUR_ELEMENT)

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

const div = document.createElement('div');
document.documentElement.contains(div); //-> false

document.body.appendChild(div);
document.documentElement.contains(div); //-> true

我已经在is-dom-detach对此进行了介绍

jQuery的简单解决方案:

$('body').find(yourElement)[0] != null
// This will work prefectly in all :D
function basedInDocument(el) {

    // This function is used for checking if this element in the real DOM
    while (el.parentElement != null) {
        if (el.parentElement == document.body) {
            return true;
        }
        el = el.parentElement; // For checking the parent of.
    } // If the loop breaks, it will return false, meaning
      // the element is not in the real DOM.

    return false;
}
  • 如果元素位于中DOM,则其父元素也应位于中
  • 最后一个祖父母应该是 document

因此要检查我们是否循环到元素的parentNode树,直到到达最后一个祖父母

用这个:

/**
 * @param {HTMLElement} element - The element to check
 * @param {boolean}     inBody  - Checks if the element is in the body
 * @return {boolean}
 */
var isInDOM = function(element, inBody) {
    var _ = element, last;

    while (_) {
        last = _;
        if (inBody && last === document.body) { break;}
        _ = _.parentNode;
    }

    return inBody ? last === document.body : last === document;
};

我喜欢这种方法:

var elem = document.getElementById('elementID');

if (elem)
    do this
else
    do that

var elem = ((document.getElementById('elemID')) ? true:false);

if (elem)
    do this
else
    do that

使用querySelectorAllforEach

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

与此相反:

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

请尝试以下方法。这是最可靠的解决方案:

window.getComputedStyle(x).display == ""

例如,

var x = document.createElement("html")
var y = document.createElement("body")
var z = document.createElement("div")
x.appendChild(y);
y.appendChild(z);

z.style.display = "block";

console.log(z.closest("html") == null); // 'false'
console.log(z.style.display); // 'block'
console.log(window.getComputedStyle(z).display == ""); // 'true'

除HTML元素外,所有现有元素都设置有parentElement!

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

这种情况小鸡所有情况。

function del() {
//chick if dom has this element 
//if not true condition means null or undifind or false .

if (!document.querySelector("#ul_list ")===true){

// msg to user
    alert("click btn load ");

// if console chick for you and show null clear console.
    console.clear();

// the function will stop.
    return false;
}

// if its true function will log delet .
console.log("delet");

}

在下面使用此命令返回DOM中是否存在该元素

return !!document.getElementById('myElement');
本文地址:http://javascript.askforanswer.com/ruhejianchakejiandomzhongshifoucunzaiyuansu.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!