如何在不使用getElementById方法的情况下测试元素的存在？我已经设置了live demo作为参考。我也会在这里打印代码：
<!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()其中一些方法返回NodeList，所以一定要检查它的length属性，因为NodeList是一个对象，因此真实。
为了实际确定元素是否作为可见DOM的一部分存在（如最初提出的问题），Csuwldcat provides a better solution than rolling your own（如此答案用于包含）。也就是说，在DOM元素上使用contains()方法。
你可以像这样使用它......
document.body.contains(someReferenceToADomElement);
检查元素是否存在的简单方法可以通过jQuery的单行代码完成。
以下是代码：
if ($('#elementId').length > 0) {
// do stuff here if element exists
}else {
// do stuff here if element not exists
}
另一种选择element.closest：
element.closest('body') === null
使用jQuery的简单解决方案
$('body').find(yourElement)[0] != null
您还可以使用jQuery.contains，它检查元素是否是另一个元素的后代。我传入document作为搜索的父元素，因为页面DOM上存在的任何元素都是document的后代。
jQuery.contains( document, YOUR_ELEMENT)
而不是迭代父级，你可以得到边界矩形，当元素从dom分离时，它都是零
function isInDOM(element) {
if (!element) return false;
var rect=element.getBoundingClientRect();
return (rect.top || rect.left || rect.height || rect.width)?true:false;
}
如果你想在零顶部和零左边处理零宽度和高度元素的边缘情况，你可以通过迭代父级直到文档来进行双重检查。
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;
}
我喜欢这种方法
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
用这个：
var isInDOM = function(element, inBody) {
var _ = element, last;
while (_) {
last = _;
if (inBody && last === document.body) { break;}
_ = _.parentNode;
}
return inBody ? last === document.body : last === document;
};
使用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');
}
试试这个，这是最可靠的解决方案：
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>检查元素是否是Node::contains()的子元素：
const div = document.createElement('div');
document.documentElement.contains(div); //-> false
document.body.appendChild(div);
document.documentElement.contains(div); //-> true
我在is-dom-detached中已经涵盖了这个和更多。
如果可用，为什么不使用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);
交叉浏览器注意：IE中的document对象没有contains()方法 - 为了确保跨浏览器兼容性，请使用document.body.contains()代替
我只是这样做：
if(document.getElementById("myElementId")){
alert("Element exists");
} else {
alert("Element does not exist");
}
适合我，并没有任何问题....
此函数检查元素是否在页面的正文中。由于包含是包容性的并且确定主体是否包含自身不是isInPage的意图，这种情况显式返回false。
function isInPage(node) {
return (node === document.body) ? false : document.body.contains(node);
}
node是我们要在中检查的节点。
你能检查一下parentNode属性是否为null？
即
if(!myElement.parentNode)
{
//node is NOT on the dom
}
else
{
//element is on the dom
}
最简单的解决方案是检查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>csuwldcat's solution似乎是最好的，但需要稍微修改才能使其与一个不同于javascript运行的文档中的元素一起正常工作，例如iframe：
YOUR_ELEMENT.ownerDocument.body.contains(YOUR_ELEMENT);
注意元素的ownerDocument属性的使用，而不仅仅是普通的'document（可能或可能不是指元素的所有者文档）。
torazaburo发布了一个even simpler method，它也适用于非本地元素，但遗憾的是，它使用的是baseURI属性，目前在浏览器中并不统一实现（我只能在基于webkit的工作中使用它）。我找不到任何其他可以以类似方式使用的元素或节点属性，所以我认为目前上述解决方案是最好的。
jQuery解决方案：
if ($('#elementId').length) {
// element exists, do something...
}
这对我来说使用jQuery并且不需要使用$('#elementId')[0]。