取得したエレメントを起点に、その内部のエレメントを取得する方法

Question

初めて質問させてもらいます。よろしくお願いします。

次のようなHTMLがあった場合、

<div id="target">
  <span>その１</span>
  <div>
    <span>その２</span>
  </div>
</div>

Dart言語で、id=targetのエレメントを取得して、
それを起点に「その２」の文字列を取得する方法を教えていただきたいです。
具体的には、

var elm = document.querySelector("#target");
var span = elm.querySelector("div > span");
window.alert("${span.text}");

これでアラートに「その２」と表示してほしいのですが、「その１」と表示されます。
dart2jsでコンパイルして他ブラウザで見ても結果は同じでした。

次の方法も試しました。

var elm = document.querySelector("#target");
var span = elm.querySelector(":scope div > span");
window.alert("${span.text}");

これであれば期待していた「その２」が取得されるのですが、
dart2jsでコンパイルしたJavaScriptを実行した所IEのみエラーが出て正常動作してくれません。
※ その他ブラウザは期待した通りで動作しました。

どのようにすれば、１度取得したエレメントを起点にセレクタでエレメントを取得して、
dart2jsでコンパイルし、どのブラウザでも動作するようにできるでしょうか？

Dart version 1.10.1
IE version 11
Dartiumは今ダウンロードできる最新の物です。

よろしくお願いします。

Answer 1

//var elm = document.querySelector("#target");
var elm = document.getElementById("target");
var span = elm.querySelector("div > div > span");
window.alert("${span.text}");

comment data

<div>
<span>test</span>
<div id="target">
<span>その１</span>
<div>
<span>その２</span>
</div>
</div>
</div>

import 'dart:html';
Element target;
Element span;
void main() {
target = query('#target');
span = target.query('div > span');
print(span.text);
}

コレだ！！！

<div>
   <span>test</span>
   <div id="target">
      <span>その１</span>
      <div>
        <span>その２</span>
      </div>
   </div>
</div>

import 'dart:html';
Element target;
Element span;
void main() {
 target = query('#target');
 span   = target.query('div > div > span');
 print(span.text);
}

その2ではなくその1が取れます。
その為、起点にしているわけではないようです。

起点にして取得するには

import 'dart:html';
Element target;
Element span;
void main() {
 target = query('#target');
 span   = target.childNodes[3].childNodes[1];
 print(span.text);
}

という取り方になるかと思われます。

よろしくお願い申し上げます。

Comments

[circus55]

回答ありがとうございます。
JavaScriptであれば、それで動作するのかもしれませんが、
Dartではそれでは正しく動作しませんでした・・・

[circus55]

ソースの編集をしていただいたのですね、ありがとうございます。
うーん、確かにこれなら狙ったテキストを取得できているのですが、
取得したエレメントを起点にして取得ができていません・・・
むしろ、これで取れる事自体が感覚的におかしいですよね・・・

[nanndemoiikara]

通常のJSでもこの取り方になりました。

また、
```lang-html
<div>
<span>test</span>
<div id="target">
<span>その１</span>
<div>
<span>その２</span>
</div>
</div>
</div>
```
この場合に

```lang-javascript
import 'dart:html';
Element target;
Element span;
void main() {
target = query('#target');
span = target.query('div > span');
print(span.text);
}
```

これで「その1」が取れましたので起点にはなっています。
ただ私自体も感覚的にコレジャナイ感があり狼狽しております。

[circus55]

うーん、うーん・・・
起点にするエレメントも指定してセレクタを組まないといけないのでしょうか・・・・
もしも、そうであったとすると次の方法で正常動作する意味がわからなくなります。

var span = elm.querySelector("div").querySelector("span");

これで取得すると期待していた「その２」が取れます・・・
・・・Dartのバグでしょうか・・・？？？

[nanndemoiikara]

回答になっておらず申し訳ございません。

ずっと調べていたのですが、純正のJavaScriptのquerySelectorも同様の動きをします。
jQueryのfindは内部的にparentNodeの物を取らない様にCSSパースしてごにょごにょしてるっぽかったです。
正確な動作は現在調査中です。。。

その為DartのバグではなくDOM仕様なのかなぁと思っておりますが、
はっきりとはわかりませんでした。

引き続き調査してみます。

[nanndemoiikara]

下記Dartのドキュメントなのですが

https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart:html.Element

セレクタの指定されたグループと一致し、この要素の最初の子孫要素を検索します。
Serekuta no shitei sa reta gurūpu to itchi shi, kono yōso no saisho no shison yōso o kensaku shimasu.

この解釈ですと、id #target内にある「div > span」の条件に一致する物を取得するのではないでしょうか？
なので、「コレだ！！！」の内容だと「その１」というtext nodeが取れます。

[circus55]

わざわざ調査してもらってまで回答していただきありがとうございます！

説明してもらった内容で何となく飲み込めそうなのですが・・・
しかし、その内容で考えていくと・・・

var list = elm.querySelectorAll("div");
window.alert("${list.length}"); // 1

こうすると１つだけエレメントが取れますが、２つエレメントが取れないと感覚的におかしいように思うのです・・・
もう、こういう物として考えるしかないでしょうかね・・・

[circus55]

すみません、上記の方法で２つエレメントが取れたら、
その１つは自分自身であって、それではおかしいですね。

説明してもらった内容で、よくよく考えていくと・・・
「その１」を取得しようとして、

elm.querySelector(" > span");

こんなセレクタは書ける訳なく（jQueryは確か行けた）

elm.querySelector("div > span");　で「その１」を取得するという事ですよね。
なので、何も間違ってなかったって事ですね・・・
完璧に飲み込めました！
わざわざ調べてもらいながら回答していただき本当にありがとうございました！

[nanndemoiikara]

私もすごく勉強になりました。
ありがとうございます。