Question

我正在尝试使用querySelectorAll（）来获取每个＆＃39; td＆＃39;具有对齐属性的元素＆amp;＆amp;是＆＃39; tr＆＃39;

的孩子

这有效：

document.querySelectorAll('tr>td');

这有效：

document.querySelectorAll('[align]');

但如何将它们结合起来？

Answer 1

前言：在tr>：The only valid parent element for a td is a tr前面td没有任何意义。所以我把它从下面留下了。

这取决于你想做什么。

如果您只想要具有td属性的align元素：
```
document.querySelectorAll("td[align]")
```
或仅td元素属于具有tr属性的align元素的子元素
```
document.querySelectorAll("tr[align]>td")
```
或者只有align属性 children td元素的元素：
```
document.querySelectorAll("td[align]")
```
或者只有align属性的元素是后代（不一定是直接子元素）的td元素：
```
document.querySelectorAll("td [align]")
```

......等等; full details in the spec

重新评论以下内容：

它有效，但有没有办法不从每个tr中选择第一个td？

你的问题中没有任何相关内容。

你可以使用td:not(:nth-child(0))，这意味着＆＃34; td不是其父母的第一个孩子＆＃34; 提供您永远不会将script元素作为tr的第一个子元素（这是有效的，但却是一件奇怪的事情）。有了这个条件，它就可以了，因为只有td和script是tr的有效子项。

或者您可以直接选择所有相关的td然后：

var list = Array.prototype.slice.call(document.querySelector("whatever"), 1);

...它将为您提供一个数组，跳过querySelectorAll返回的列表中的第一个条目。

你的进一步评论：

tr[style]>td[align]:not(:nth-child(0))返回了550个节点列表，与tr[style]>td[align]
相同

右。同样，:nth-child会查看它是什么孩子，不它位于前一个选择器所选列表的位置。

如果您想跳过每个行中的第一个td，并且您想忽略不具有tr属性的style ，它更复杂：

var result = Array.prototype.reduce.call(
    document.querySelectorAll("tr[style]"),
    function(list, row) {
        list.push.call(
            list,
            Array.prototype.slice.call(row.querySelectorAll("tr[align]"), 1)
        );
        return list;
    },
    []
);

Answer 2

将它们组合在一起：

document.querySelectorAll('tr>td[align]');

更多信息：CSS Attribute Selectors

注意：<td>仅允许作为<tr>的孩子。

Answer 3

您可以使用与CSS相同的方式组合选择器，例如：

document.querySelectorAll('tr>td[align]');

如果您没有嵌套表格，则表示为document.querySelectorAll('td[align]');。

CSS选择器与And operation'＆amp;＆amp;'结合使用

3 个答案: