DOM要素の問い合わせ – Dart逆引きリファレンス

DOM要素の問い合わせ（Finding elements in DOM）

要素の探索にはCSSのような「パターンマッチング」が用いられます。
要素の取得に用いる関数は以下の二種類です。単純なので覚え易いですね。(^^)

document.query(selectors)

指定されたセレクタに該当する要素をひとつ返します。複数の要素が該当する場合は先頭の要素が返されます。

document.queryAll(selectors)

指定されたセレクタに該当する全ての要素をリストで返します。

<h1>Finding elements in DOM</h1>
<h2 id="toc-heading2" id="h2">Heading2</h2>
<h3 class="h3">Heading3-1</h3>
<h3 class="h3">Heading3-2</h3>
<h3 class="h3">Heading3-3</h3>
<h4>Heading4-1</h4>
<h4>Heading4-2</h4>
<h4>Heading4-3</h4>
<h5 data-heading-level="5">Heading5-1</h5>
<h5 data-heading-level="5">Heading5-2</h5>
<h5 data-heading-level="5">Heading5-3</h5>
<div id="main">
  <div>
    <p class="visible">Paragraph-1</p>
    <p class="invisible">Paragraph-2</p>
    <p class="visible">Paragraph-3</p>
  </div>
  <div></div>
  <div></div>
  <div></div>
</div>

id名で要素を取得したい

IDセレクタ「E#id」を利用します。

Element elem = document.query('#h2')
print(elem.text); // Heading2

class名で要素を取得したい

クラスセレクタ「E.class」を利用します。

Element elem = document.query('.h3');
print(elem.text); // Heading3-1

List elems = document.queryAll('.h3');
for (Element elem in elems) {
  print(elem.text); // Heading3-1 Heading3-2 Heading3-3
}

要素名で要素を取得したい

タイプセレクタ「E」を利用します。

Element elem = document.query('h4');
print(elem.text); // Heading4-1

List elems = document.queryAll('h4');
for (Element elem in elems) {
  print(elem.text); // Heading4-1 Heading4-2 Heading4-3
}

属性で要素を取得したい

属性セレクタ「E[name="value"]」を利用します。

Element elem = document.query('[data-heading-level="5"]');
print(elem.text); // Heading5-1

List elems = document.queryAll('[data-heading-level="5"]');
for (Element elem in elems) {
  print(elem.text); // Heading5-1 Heading5-2 Heading5-3
}

複数のセレクタを併用して要素を取得したい

子孫セレクタ「E F」や子セレクタ「E > F」、隣接セレクタ「E + F」等を利用します。

List elems = document.queryAll('#main div:first-of-type .visible');
for (Element elem in elems) {
  print(elem.text); // Paragraph-1 Paragraph-3
}

この例ではセレクタを半角スペースで区切って指定する子孫セレクタを用いています。

先頭の子要素へアクセスしたい

子要素が格納された配列「nodes」プロパティを利用してアクセスします。

elem.nodes[0];

要素が子要素を持っているかどうかを調べたい

子要素の配列で「isEmpty()」メソッドを利用して判断します。

!elem.nodes.isEmpty();