Javascript 如何使用document.querySelectorAll获取html页面中的所有标记

有人建议我使用

document.queryselectoral（“#tagcontainingwritenels>*”）

来获取对所有已写入标记的引用。然后，您可以对所有元素进行循环，并对列表中的每个元素执行

.tagName

和

.attributes

以获取信息

---

但只有在有一个名为#tagcontainingwritenels的类的情况下才能实现这一点。我认为这是某种方法

querySelectorAll函数接受一个返回一个

节点列表

，它可以像数组一样迭代

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

//获取具有给定id的元素的所有子元素的节点列表
var list=document.queryselectoral（“#tagcontainingwritenels>*”；
对于（变量i=0；i

选择器字符串的细分如下所示：

• #nodeid

  语法指具有给定id的节点 使用了

  tagcontainingwritenels

  的假设id——您的id可能会 要与众不同（而且更短）

• 语法表示“该节点的子节点”

• *

  是一个简单的“全部”选择器

综上所述，选择器字符串表示“选择id为“tagContainingWrittenEls”的节点的所有子节点”

有关CSS3选择器的列表，请参阅；它们对于高级Web开发非常重要（而且非常方便）。

根据MDN

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

---

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

这与CSS中的样式类似：创建一个选择器，输入要应用于这些目标元素的属性，然后对这些元素进行样式设置

比如说，在CSS中，您希望将

中
下的所有
样式设置为
id
为
列表
，颜色为
红色

ul#list li a{
    color:red;
}

实际上，在
下的
中，id为
的
列表中的所有
变为红色

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

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

现在，
锚点
将包含一个
节点列表
（类似于数组的结构）它包含对
下
中所有
的引用，id
为
列表
。由于
节点列表
类似于和
数组
，因此可以循环遍历它，并且每个项都是
下
的
中的
项，id
为
列表
中的
项ist


当然，它只获取执行代码时DOM中的元素。
我不明白本例中的选择器字符串指示的是什么，而且输出是否包含html中的所有标记，还是仅包含document.write或document.body.innerHTMLTH创建的标记
#nodeid
语法指的是带有给定id的ode（这里，假设id为
tagcontainingwritenels
），语法表示“该节点的子节点”。
*
是一个简单的“全部”选择器。综上所述，选择器表示“获取id为“tagcontainingwritenels”的节点的所有子节点”.好的，现在我没有任何类似的TagContainingWritenels，这是否意味着它对我不起作用，因为我正在跟踪具有类id的标记，但我正在尝试跟踪动态创建的标记。我使用的id只是一个示例；您可以将其设置为实际位于页面上的元素的id。此外，选择器还可以收集整个页面中的元素：例如，如果您想获得包含
tagbox
类的所有元素的节点列表，只需使用句点运算符：
queryselectoral（.tagbox”）
。如果您需要同时具有
tagbox
和
darkred
的节点：
querySelectorAll（“.tagbox.darkred”）
。如果您在阅读规范并尝试了一些方法后无法立即获得选择器，则可以发布一个新问题，如，“我有这样的HTML结构。。。获取所需特定元素的正确选择器字符串是什么？”
document.querySelectorAll（'body>*”）；
将为您提供页面中的所有元素。正如您所述，只有当该id或类存在时，您的解决方案才会起作用。由于web的工作方式，body标记始终可用。