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

似乎有些人在这里登陆，只是想知道一个元素是否存在（与原始问题有点不同）。

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

例如，如果我的元素的 id 是 "find-me"，我可以简单地使用...

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

这被指定为返回对元素的引用或 null。如果您必须有一个布尔值，只需在方法调用之前扔一个 !!。

此外，您可以使用现有的许多其他方法来查找元素，例如（全部靠 document）：

querySelector()/querySelectorAll()

getElementsByClassName()

getElementsByName()

其中一些方法返回 NodeList，因此请务必检查其 length 属性，因为 NodeList 是一个对象，因此 真实。

为了实际确定元素是否作为可见 DOM 的一部分存在（就像最初提出的问题一样），Csuwldcat provides a better solution than rolling your own（就像这个答案曾经包含的那样）。也就是说，在 DOM 元素上使用 the 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);

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

---

我只是这样做：

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

它对我有用，而且还没有问题......

---

我更喜欢使用 node.isConnected 属性 (Visit MDN)。

注意：如果元素也附加到 ShadowRoot，这将返回 true，这可能不是每个人都希望的行为。

例子：

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

---

最简单的方法：

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>

function test() { pt = document.querySelector('#result') iv = document.querySelector('#f') cond = document.querySelector('#'+iv.value) || false if (cond) { pt.innerText = '找到！' } else { pt.innerText = '未找到！' } } 输入一个id看是否存在： Test!

我是 ap 标签。我会根据结果改变。

---

从 Mozilla Developer Network：

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

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

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

---

您可以只检查 parentNode 属性是否为空。

那是，

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

---

最简单的解决方案是检查 baseURI 属性，该属性仅在元素插入 DOM 时设置，在移除时恢复为空字符串。

var div = document.querySelector('div'); // “div”在 DOM 中，所以应该打印一个字符串 console.log(div.baseURI); // 从 DOM 中移除“div” document.body.removeChild(div); // 应该打印一个空字符串 console.log(div.baseURI);

---

jQuery解决方案：

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

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

---

csuwldcat's solution 似乎是其中最好的，但需要稍作修改才能使其与运行 JavaScript 代码不同文档中的元素（例如 iframe）正常工作：

YOUR_ELEMENT.ownerDocument.body.contains(YOUR_ELEMENT);

请注意元素的 ownerDocument 属性的使用，而不是简单的旧 document（可能会或可能不会引用元素的所有者文档）。

torazaburo 发布了一个同样适用于非本地元素的 even simpler method，但不幸的是，它使用了 baseURI 属性，目前尚未在浏览器中统一实现（我只能让它在 WebKit-基于的）。我找不到可以以类似方式使用的任何其他元素或节点属性，所以我认为目前上述解决方案已经足够好了。

---

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

下面是代码：

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

---

当元素与 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;
}

---

另一个选项是 element.closest：

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

---

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

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

---

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

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

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

我已在 is-dom-detached 中介绍了这一点以及更多内容。

---

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

jQuery.contains( document, YOUR_ELEMENT)

---

一个简单的 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;
}

---

所有现有元素都设置了 parentElement，除了 HTML 元素！

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

---

如果一个元素在 DOM 中，它的父元素也应该在

最后的祖父母应该是文件

所以要检查我们是否只是循环到元素的 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;
};

---

这种情况小鸡所有的情况下。

function del() { //chick if dom 有这个元素 //如果不是 true 条件意味着 null 或 undifind 或 false 。 if (!document.querySelector("#ul_list ")===true){ // msg to user alert("click btn load "); // 如果为您提供控制台小鸡并显示空清除控制台。控制台.clear(); // 函数将停止。返回假； } // 如果它的真正函数将记录删除。 console.log("删除"); }

---

使用下面的这个命令来返回元素是否存在于 DOM 中：

return !!document.getElementById('myElement');

---

检查元素是否存在

const elementExists = document.getElementById("find-me");
if(elementExists){
    console.log("have this element");
}else{
    console.log("this element doesn't exist");
}

---

将 querySelectorAll 与 forEach 一起使用，

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

与以下相反：

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

---

由于这个问题，我来到这里。上面的几个解决方案都不能解决问题。经过几次查找后，我在互联网上找到了一个解决方案，该解决方案提供了一个节点是否存在于当前视口中，而我尝试解决的答案是否存在于正文中。

function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

isInViewport(document.querySelector('.selector-i-am-looking-for'));

该片段取自 HERE 以保留作为备份，因为链接可能在一段时间后不可用。检查链接以获取解释。

而且，不打算在评论中发帖，因为在大多数情况下，它们被忽略了。

---

我喜欢这种方法：

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

---