querySelectorAllで直下の要素を指定する方法を教えてください

Question

以下のようなネストしたテーブルがあるとします。

  <table id="parent-table">
    <tr>
      <td>parent-cell0</td>
      <td>parent-cell1
        <table>
          <tr>
            <td>nest-cell</td>
          </tr>
        </table>
      </td>
    </tr>
  </table><!-- End #parent-table -->

var parentTable = document.getElementById("parent-table");

parentTable.querySelectorAllで、#parent-table直下のtr要素を取得したいです。
可能でしょうか？

IDやクラス名を付けて指定、またはdocument.querySelectorAll("#parent-table > tr");で取得する方法以外でお願いします。

querySelectorAllで自分自身の要素を指定できればいいのですが。。。

Answer 1

:scope がルートになるはず。

var parentTable = document.getElementById("parent-table");
console.log( parentTable.querySelectorAll(":scope > tbody > tr") );
```**動くサンプル：**[https://jsfiddle.net/68utpw2m/](https://jsfiddle.net/68utpw2m/)



`tbody` は仕様上入れる必要があったはず。（ブラウザが自動で入れてしまうはず）

---

【CSS4セレクタ (Selectors Level 4) の新機能】
[https://myakura.github.io/n/selectors4.html#scope](https://myakura.github.io/n/selectors4.html#scope)

【Selectors API Level 2】
[https://dev.w3.org/2006/webapi/selectors-api2/#processing-selectors](https://dev.w3.org/2006/webapi/selectors-api2/#processing-selectors)

【<table> - HTML | MDN】
[https://developer.mozilla.org/ja/docs/Web/HTML/Element/table](https://developer.mozilla.org/ja/docs/Web/HTML/Element/table)

Comments

[think49]

:scope は IE11- 未対応なのでご注意ください。
https://developer.mozilla.org/ja/docs/Web/CSS/:scope
手元に環境がないので未検証ですが、以下の解決方法が考えられます。
- IE11- が SyntaxError を返すのなら try-catch で分岐処理させる
- querySelrctorAll を諦めて document.evaluate を使う
- TreeWalker
- table.tBodies[0].children

[kei344]

補足＆代替案ありがとうございます！

[think49]

table.tBodies[0].children と書きましたが、よく考えたら table.tBodies[0].rows が使えますね。
thead, tfoot, tbody(2個目)が存在しない前提ですが…。
http://www2u.biglobe.ne.jp/~oz-07ams/2003/HTML/HTMLTableSectionElement.html

[kei344]

To: think49さん
> thead, tfoot, tbody(2個目)が存在しない前提ですが…。
テーブルの構造や、querySelrctorAll でどういったクエリにするかによりますが、汎用的に考えるのであれば tBodies も length見て全走査してしまえば良いと思います。

いつも指摘ありがとうございます。私は早くからjQueryに逃げてきたので、今jQueryを使わないで書くのがとても楽しいです。これからも（気が向いたらでいいので）よろしくお願いします。