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

how can we use document.querySelectorAll to get all the tags in a html page

提问by user1275375

Someone suggested me to use document.querySelectorAll("#tagContainingWrittenEls > *")to get a reference to all the written tags. Then you can loop over 'em all, and do .tagNameand .attributeson each element in the list to get the info.

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

But This can only be done if there is a class named #tagContainingWrittenEls. I thought this is some method

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

回答by apsillers

The querySelectorAllfunction takes a selector stringreturns a NodeListwhich can be iterated through like an array.

该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);
    }
}

The breakdown of the selector string is as follows:

选择器字符串的细目如下：

• The #nodeidsyntax refers to a node with the given id. Here, the hypothetical id of tagContainingWrittenElsis used -- your id will probably be different (and shorter).
• The >syntax means "children of that node".
• The *is a simple "all" selector.

• 该#nodeid语法是指给定ID的节点。在这里，使用了假设的 id——tagContainingWrittenEls您的 id 可能会有所不同（并且更短）。
• 该>语法的意思是“该节点的孩子”。
• 这*是一个简单的“全部”选择​​器。

Taken all together, the selector string says "select all children of the node with the id of "tagContainingWrittenEls".

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

See http://www.w3.org/TR/selectors/#selectorsfor a list of CSS3 selectors; they are quite important (and handy) to advanced Web development.

请参阅http://www.w3.org/TR/selectors/#selectors以获取 CSS3 选择器列表；它们对于高级 Web 开发非常重要（且方便）。

回答by Joseph

According to MDN, .querySelectorAll

根据 MDN，.querySelectorAll

Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList.

返回文档中与指定选择器组匹配的元素列表（使用文档节点的深度优先预序遍历）。返回的对象是一个 NodeList。

---

---

.querySelectorAllreturns a list of elements that match the selector provided.

.querySelectorAll返回与提供的选择器匹配的元素列表。

it's like how you style in CSS: you create a selector, put in the properties you want to apply to these target elements then these elements get styled.

这就像在 CSS 中设置样式一样：创建一个选择器，放入要应用于这些目标元素的属性，然后对这些元素进行样式设置。

say in CSS, you want to style all <a>in <li>that are under <ul>with an idof listwith the color red. You will have this:

在CSS说，你要的风格都<a>在<li>是在<ul>用id的list用色red。你会有这个：

ul#list li a{
    color:red;
}

in effect, all <a>in an <li>under a <ul>with an idof listturns to red.

实际上，所有都<a>在 a<li>下<ul>，其中id的list变为红色。

now take that same selector to get via JavaScript these same <a>elements

现在使用相同的选择器通过 JavaScript 获取这些相同的<a>元素

var anchors = document.querySelectorAll('ul#list li a');

now anchorswill contain a NodeList(an array-like structure) that contains a reference to all <a>in an <li>under a <ul>with an idof list. Since a NodeListis like and Array, you can loop through it, and each item is an <a>in an <li>under a <ul>with an idof list.

现在anchors将包含一个NodeList包含对所有的引用（阵列状结构）<a>在<li>下一个<ul>用id的list。由于 aNodeList类似于 and Array，您可以循环遍历它，并且每个项目都是一个<a>in an <li>under a <ul>with an idof list。

---

---

and of course, it only gets the elements that are in the DOM at the time the code is executed.

当然，它只获取代码执行时 DOM 中的元素。