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

Question

有人建议我用来document.querySelectorAll("#tagContainingWrittenEls > *")获取所有书面标签的引用.然后,你就可以通过"时间都循环,并做.tagName和.attributes列表中的每个元素上得到的信息.

但只有在有一个名为#tagContainingWrittenEls的类时才能这样做.我认为这是一种方法

Answer 1

该querySelectorAll函数接受一个选择器字符串返回一个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的节点.在这里,使用假设的id tagContainingWrittenEls- 你的id可能会不同(和更短).
• 该>语法的意思是"该节点的孩子".
• 这*是一个简单的"全部"选择​​器.

总而言之,选择器字符串表示" 选择id为"tagContainingWrittenEls " 的节点的所有子节点.

有关CSS3选择器的列表,请参见http://www.w3.org/TR/selectors/#selectors ; 它们对于高级Web开发非常重要(而且非常方便).