不使用该getElementById方法如何测试元素的存在?
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函数是我尝试从变量中检查元素是否存在的方法,它可以工作,但是我想知道是否有更简单的方法来实现相同的结果。
isNull
PS:如果有人知道与该主题相关的一些不错的文章,为什么JavaScript变量为什么会如此表现,我也很感兴趣。
似乎有些人在这里着陆,只是想知道某个元素是否 存在 (与原始问题略有不同)。
就像使用浏览器的任何选择方法,然后检查它的 真实 值一样简单(通常)。
例如,如果我的元素有一个id的"find-me",我可以简单地使用…
id
"find-me"
var elementExists = document.getElementById("find-me");
可以指定返回元素或的引用null。如果必须具有布尔值,则只需!!在方法调用之前扔一个。
null
!!
此外,您可以使用许多其他方法来查找元素,例如(全部靠document):
document
querySelector()
querySelectorAll()
getElementsByClassName()
getElementsByName()
其中一些方法返回a NodeList,因此请务必检查其length属性,因为a NodeList是一个对象,因此为 true 。
NodeList
length
为了实际确定某个元素是否作为可见DOM的一部分存在(就像最初提出的问题一样),Csuwldcat提供了一个比滚动自己的元素更好的解决方案(此答案曾经包含)。也就是说,在DOM元素上使用该contains()方法。
contains()
您可以像这样使用它…
document.body.contains(someReferenceToADomElement);