Jus*_*ull 377 javascript variables dom element exists
如何在不使用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变量的行为感兴趣.
ale*_*lex 492
似乎有些人正在这里登陆,只是想知道一个元素是否存在(与原始问题有点不同).
这就像使用任何浏览器的选择方法一样简单,并检查它的真实值(通常).
例如,如果我的元素有一个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);
Kon*_*Kon 291
getElementById()如果它可用,为什么不使用？
此外,这是使用jQuery执行此操作的简单方法:
if ($('#elementId').length > 0) {
// exists.
}
如果你不能使用第三方库,只需坚持基础JavaScript:
var element = document.getElementById('elementId');
if (typeof(element) != 'undefined' && element != null)
{
// exists.
}
csu*_*cat 172
使用Node.contains DOM API,您可以非常轻松地检查页面中任何元素的存在(当前在DOM中):
document.body.contains(YOUR_ELEMENT_HERE);
交叉浏览器注意:documentIE中的对象没有contains()方法 - 为确保跨浏览器兼容性,请document.body.contains()改用
Ano*_*aly 59
我只是这样做:
if(document.getElementById("myElementId")){
alert("Element exists");
} else {
alert("Element does not exist");
}
适合我,并没有任何问题....
小智 33
最简单的方法：
const cond = document.getElementById('elem') || false
if (cond) {
//does
} else {
//does not
}
如果需要在严格可见的 DOM 中，即不在整个页面上，请使用类似 view-js 的东西（我的库，所以可以根据需要使用它）
<script src='https://view-js.glitch.me/view-main.js'></script>
<script>
elem = $sel('#myelem');
if (isVis(elem)) { //yes } else { //no }
</script>
const cond = document.getElementById('elem') || false
if (cond) {
//does
} else {
//does not
}
<script src='https://view-js.glitch.me/view-main.js'></script>
<script>
elem = $sel('#myelem');
if (isVis(elem)) { //yes } else { //no }
</script>
Ekr*_*que 11
此函数检查元素是否在页面的正文中.由于包含是包容性的并且确定主体是否包含自身不是isInPage的意图,这种情况显式返回false.
function isInPage(node) {
return (node === document.body) ? false : document.body.contains(node);
}
node是我们要在中检查的节点.
Rob*_*ene 11
我更喜欢使用该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
mik*_*ers 10
你能检查一下parentNode属性是否为null？
即
if(!myElement.parentNode)
{
//node is NOT on the dom
}
else
{
//element is on the dom
}
小智 7
最简单的解决方案是检查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]使用。
小智 5
一种检查元素是否存在的简单方法可以通过 jQuery 的一行代码来完成。
这是下面的代码：
if ($('#elementId').length > 0) {
// Do stuff here if the element exists
} else {
// Do stuff here if the element does not exist
}
这段代码对我有用，我没有遇到任何问题。
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");
}