我如何检查一个元素是否存在于可见的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变量为什么会这样表现感兴趣。

1269097 次浏览
小开
最佳答案

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

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

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

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

它被指定为返回对元素或null的引用。如果必须使用布尔值，只需在方法调用之前抛出!!。

此外，您还可以使用许多其他方法中的一些方法来查找元素，例如(都依赖于document):

  • # EYZ0 / # EYZ1
  • # EYZ0
  • # EYZ0

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

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

你可以这样使用它……

document.body.contains(someReferenceToADomElement);
小开

如果可用，请使用getElementById()。

另外，这里有一个简单的方法来用jQuery:

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

如果你不能使用第三方库，那就坚持使用基本的JavaScript:

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

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

也就是说,

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

一个简单的解决方案与jQuery:

$('body').find(yourElement)[0] != null
小开

jQuery的解决方案:

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

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

小开

我只是这样做:

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

这对我来说很有效，而且还没有任何问题……

小开

使用节点。包含DOM API，你可以很容易地检查页面中任何元素的存在(当前在DOM中):

document.body.contains(YOUR_ELEMENT_HERE);

跨浏览器的注意: Internet Explorer中的document对象没有contains()方法——为了确保跨浏览器兼容性，请使用document.body.contains()代替。

小开

从# EYZ0:

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

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

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

小开

我喜欢这种方法:

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
小开

最简单的解决方案是检查< >强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的解决方案似乎是最好的一组，但需要做一些轻微的修改，以使它正确地工作在一个不同于JavaScript代码运行的文档中的元素，例如iframe:

YOUR_ELEMENT.ownerDocument.body.contains(YOUR_ELEMENT);

注意元素的ownerDocument属性的使用，而不是简单的旧的document(它可能引用也可能不引用元素的所有者文档)。

torazaburo发布了一个更简单的方法，它也适用于非本地元素，但不幸的是，它使用了baseURI属性，这个属性目前还没有在不同的浏览器中统一实现(我只能让它在基于# eyz2的浏览器中工作)。我找不到任何其他可以以类似方式使用的元素或节点属性，所以我认为目前上述解决方案是最好的。

小开

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

jQuery.contains( document, YOUR_ELEMENT)
小开
  • 如果一个元素在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;
};
小开

而不是迭代父元素，当元素从DOM中分离出来时，你可以得到一个全为0的边界矩形:

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

使用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');
}
小开

通过jQuery的一行代码，可以简单地检查元素是否存在。

下面是代码:

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

另一个选项是element.closest:

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

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

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


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

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

小开 
// 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);
};
小开

这段代码适合我，我没有遇到任何问题。


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

# EYZ0

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


}

小开

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

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

例子:

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

使用下面的命令返回元素是否存在于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");
}
小开

由于这个问题，我降落在这里。上面提到的解决方案很少不能解决问题。经过几次查找，我在互联网上找到了一个解决方案，如果一个节点存在于当前视口中，我尝试解决的答案是否存在于主体中。

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


console.log(
isInViewport(document.querySelector('.selector-i-am-looking-for'))
);
<div class="selector-i-am-looking-for"></div>

The snippet is taken from HERE to keep as a backup as the links may be unavailable after some time. Check the link for an explanation.

And, didn't intend to post in the comment, as in most cases, they are ignored.

小开

简单的方法:

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 = 'Found!'
} else {
pt.innerText = 'Not found!'
}
}

Enter an id to see if it exists: <input id='f'></input>
<button onclick='test()'>Test!</button>


<br />
<p id='result'>I am a p tag. I will change depending on the result.</p>
<br />
<div id='demo'>I am a div. My id is demo.</div>


提交答案