Question

今天早上我正在玩一个小游戏，我认为做一些愚蠢的事情会很有趣，并尝试使用类似的东西在页面上写下所有页面的标记名

var elements = document.getElementsByTagName("*");

for(var element in elements) {

document.write(element.tagName + "<br />");

}

然而，所有写的都是未定义的。为什么是这样？哦，我正在使用Firefox。

Answer 1

for...in不能保证适用于NodeList（这是document.getElementsByTagName()返回的内容），即使它确实如此，您将获得element的值NodeList 1}}不是对元素的引用，而是属性名称，例如for中元素的数字索引。改为使用普通的var elements = document.getElementsByTagName("*"); for (var i = 0; i < elements.length; ++i) { document.write(elements[i].tagName + "<br />"); }循环。

document.write()

此外，document.getElementsByTagName()在文档加载后无法正常工作，即您通常使用<div id="debug"></div>时。更好的机制是填充页面中的元素：

var elements = document.getElementsByTagName("*");
var debugDiv = document.getElementById("debug");
var tagNames = [];

for (var i = 0; i < elements.length; ++i) {
    tagNames.push(elements[i].tagName);
}

debugDiv.innerHTML = tagNames.join("<br>");

脚本：

{{1}}

Answer 2

因为您使用的是for...in循环，element实际上是项目的键而不是值。 elements[element]会为您提供正确的结果，但您应该使用正确的for循环：

for (var i = 0; i < elements.length; i++) {
    document.write(elements[i].tagName + "<br />");
}

这是因为for...in可能会迭代不是集合元素的其他可枚举属性。浏览器之间的这些属性可能不同。

Answer 3

你可以尝试：

var elements = document.getElementsByTagName("*");

for (int i = 0; i < elements.length; i++)
{
     document.write(elements.item(i).tagName + "<br />");
}

Answer 4

我认为这是不可能的，并且可以使用jQuery / Sizzle HTML / CSS Selector：

$('*');

使用该功能/方法，您只能在当前文档中选择“所有可用的HTML标记”。

例如：

document.getElementByTagName('html');
document.getElementByTagName('head');
document.getElementByTagName('body');
document.getElementByTagName('h3');
document.getElementByTagName('p');
document.getElementByTagName('pre');
document.getElementByTagName('code');
document.getElementByTagName('metaforce'); // being a custom HTML(5) tag

为什么element.tagName未定义？

4 个答案: