javascript - 我们如何使用 document.querySelectorAll 获取 html 页面中的所有标签

Question

有人建议我使用 document.querySelectorAll("#tagContainingWrittenEls > *") 来获取对所有书面标签的引用。然后你可以循环遍历它们，并对列表中的每个元素执行 .tagName 和 .attributes 以获取信息。

但这只有在有一个名为#tagContainingWrittenEls 的类时才能完成。我以为这是某种方法

Answer 1

querySelectorAll 函数接受 selector string返回一个 NodeList，它可以像数组一样被迭代。

// get a NodeList of all child elements of the element with the given id
var list = document.querySelectorAll("#tagContainingWrittenEls > *");

for(var i = 0; i < list.length; ++i) {
    // print the tag name of the node (DIV, SPAN, etc.)
    var curr_node = list[i];
    console.log(curr_node.tagName);

    // show all the attributes of the node (id, class, etc.)
    for(var j = 0; j < curr_node.attributes.length; ++j) {
        var curr_attr = curr_node.attributes[j];
        console.log(curr_attr.name, curr_attr.value);
    }
}

选择器字符串分解如下:

• #nodeid 语法引用具有给定 ID 的节点。在这里，使用了 tagContainingWrittenEls 的假设 ID——您的 ID 可能会与众不同(并且更短)。
• > 语法表示“该节点的子节点”。
• * 是一个简单的“全部”选择​​器。

总而言之，选择器字符串表示“选择 ID 为“tagContainingWrittenEls”的节点的所有子节点。

参见 http://www.w3.org/TR/selectors/#selectors获取 CSS3 选择器列表；它们对高级 Web 开发非常重要(而且很方便)。