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

有人建议我使用document.querySelectorAll("#tagContainingWrittenEls > *")来获取所有写入标签的引用。然后，您可以循环播放所有内容，并在列表中的每个元素上执行.tagName和.attributes以获取信息。我们如何使用document.querySelectorAll获取html页面中的所有标签

但这只能在名为#tagContainingWrittenEls的类中完成。我认为这是一些方法

来源

2012-04-11 user1275375

'document.querySelectorAll（'body> *'）;'会给你页面中的所有元素。正如你所说，你的解决方案只有在该ID或类别存在时才有效。由于网络的工作原理，车身标签将始终可用。 – 2018-02-02 14:46:49

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的节点。在这里，使用假设ID为tagContainingWrittenEls - 您的ID可能会是不同的（和更短）。
语法>表示“该节点的子节点”。
*是一个简单的“全部”选择器。

两者一起，选择字符串说“选择节点的所有儿童的ID‘tagContainingWrittenEls’

见http://www.w3.org/TR/selectors/#selectors对CSS3选择器的列表;它们是非常重要的（方便）以先进的Web开发。

来源

2012-04-11 05:58:21 apsillers

我不明白这个例子中的选择符字符串是什么意思，输出是否包含html中的所有标签，或者只包含由document.write或document.body.innerHTML创建的标签 – user1275375 2012-04-11 06:04:20

'＃nodeid'语法是指到具有给定ID的节点（这里是'tagContainingWrittenEls'的假设ID），'>'语法意思是“该节点的子节点”。 '*'是一个简单的“全部”选择器。综合起来，选择器说：“得到节点的所有孩子的id为”tagContainingWrittenEls“。 – apsillers 2012-04-11 06:08:48

好吧，现在我没有任何像tagContainingWrittenEls那么这意味着它不适合我，因为我跟踪带有class id的标签，但我试图跟踪动态创建的标签 – user1275375 2012-04-11 06:12:37

根据MDN，.querySelectorAll

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

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

这就像你在CSS中的样式：你创建一个选择器，放入你想应用到这些目标元素的属性，然后这些元素得到样式。

说，在CSS，你想样式的所有<a>在<li>是<ul>下与list的id与颜色red。我们将看到这样：

ul#list li a{ 
    color:red; 
}

实际上，所有<a>在<li>下一个<ul>用的listid变为红色。

现在采取同样的选择通过JavaScript来获得这些相同<a>元件

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

现在anchors将包含NodeList（阵列状结构），其包含下一个<ul>在<li>所有<a>参考id的list。由于NodeList与Array相似，因此您可以循环浏览它，并且每个项目都是中的<a>,<ul>,id的list。

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

来源

2012-04-11 06:09:55 Joseph

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

回答

相关问题