如何检查可见DOM中是否存在元素？
如何检查可见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变量的行为感兴趣。
叮当猫咪浏览 753回答 3
3回答
-
噜噜哒
似乎有些人正在这里登陆，只是想知道一个元素是否存在（与原始问题有点不同）。这就像使用任何浏览器的选择方法一样简单，并检查它的真实值（通常）。例如，如果我的元素有一个id的"find-me"，我可以简单地使用...var elementExists = document.getElementById("find-me");这被指定要么返回对元素的引用，要么返回null。如果必须有布尔值，只需!!在方法调用之前抛出一个。此外，您可以使用其他许多方法来查找元素，例如（所有生活document）：querySelector()/querySelectorAll()getElementsByClassName()getElementsByName()其中一些方法返回一个NodeList，所以一定要检查它的length属性，因为a NodeList是一个对象，因此是真实的。为了实际确定一个元素是否作为可见DOM的一部分存在（如最初提出的问题），Csuwldcat提供了一个比滚动自己更好的解决方案（如此答案所包含）。也就是说，contains()在DOM元素上使用该方法。你可以像这样使用它......document.body.contains(someReferenceToADomElement); -
明月笑刀无情
getElementById()如果它可用，为什么不使用？此外，这是使用jQuery执行此操作的简单方法：if ($('#elementId').length > 0) { // exists.}如果你不能使用第三方库，只需坚持基础JavaScript：var element = document.getElementById('elementId');if (typeof(element) != 'undefined' && element != null){ // exists.} -
犯罪嫌疑人X
使用Node.contains DOM API，您可以非常轻松地检查页面中任何元素的存在（当前在DOM中）：document.body.contains(YOUR_ELEMENT_HERE);交叉浏览器注意：documentIE中的对象没有contains()方法 - 为确保跨浏览器兼容性，请document.body.contains()改用
随时随地看视频慕课网APP
相关分类
JavaScript