Question

此请求：

someTag.querySelector("tbody > tr[my-attr='333']").children

返回＆＃34; td＆＃34;的数组。其中一些具有属性＆＃34; attribute1＆＃34;。我怎样才能找到一个＆＃34; td＆＃34;其中有attribute1 =＆＃34; 123＆＃34;？

我尝试了不同的方法，但还没有成功。例如：

someTag.querySelector("tbody > tr[my-attr='333'][attribute1='123']")

返回null

Answer 1

您应该使用querySelectorAll获取所有td attribute1='123'。

检查此片段：

＆＃13;

 var tds = document.querySelectorAll("tbody > tr[my-attr='333'] td[attribute1='123']");
 tds[0].innerHTML = "JavaScript"
 tds[1].innerHTML = "JQuery"

＆＃13;

<table>
  <tbody>
    <tr my-attr='333'>
      <td attribute1='123'>January</td>
      <td>$100</td>
    </tr>
    <tr my-attr='333'>
      <td attribute1='123'>February</td>
      <td>$80</td>
    </tr>
    <tr my-attr='333'>
      <td attribute1='124'>March</td>
      <td>$80</td>
    </tr>
    <tr my-attr='333'>
      <td attribute1='124'>April</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

＆＃13;

<强>更新

根据附件，脚本如下

var tds = document.querySelectorAll("tbody > tr[my-attr='333'] td[attribute1='123']");
for (var i = 0; i < tds.length; i++) {
    tds[i].style.backgroundColor = '#888'
}

<强> FIDDLE DEMO

Answer 2

这有效：

var res = document.querySelectorAll("tbody > tr[my-attr='333'] > [attribute1='123']")
console.log(res)

<table>
  <tbody>
    <tr my-attr="333">
      <td attribute1="123">Cell</td>
      <td attribute1="123">Cell</td>
    </tr>
    <tr></tr>
  </tbody>
</table>

编辑：使用querySelectorAll因为OP想要找到多个节点。

Answer 3

有一个以上的问题。

首先使用querySelector这将导致您只会检索一个元素（匹配的第一个元素）。

改为使用querySelectorAll。

比你使用children。在你的样本中，TD没有孩子，所以你永远不会得到一个结果。即使选择器是正确的。是什么让我到最后一点

这是正确的选择器：

tbody > tr[my-attr='333'] > [attribute1='123']

这里有working Fiddle

无法通过＆＃34; querySelector＆＃34;找到一个元素。

3 个答案: