3

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

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

4

2 回答 2

7

该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 开发非常重要（并且方便）。

于 2012-04-11T05:58:21.457 回答
2

根据 MDN，.querySelectorAll

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

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

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

<a>比如说在 CSS中，你想用color<li>来设置下面的所有样式。你会有这个：<ul>idlistred

ul#list li a{
    color:red;
}

实际上，所有<a>在 a<li>下，并且 a变为<ul>红色。idlist

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

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

现在anchors将包含一个NodeList（类似数组的结构），其中包含对 a under a和 an of 的all<a>的引用。由于 a类似于 and ，因此您可以循环遍历它，并且每个项目都是a under a with an of 。<li><ul>idlistNodeListArray<a><li><ul>idlist

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

于 2012-04-11T06:09:55.710 回答