0
const base = document.getElementById('parent');
const children = base.children;

console.log(children[0]);
console.log(children[1]);
console.log(children[2]);

画像の説明をここに入力

下に記述したHTMLの <ul> の子要素を取得するために上記のように記述しました。この場合、添付画像のようなタグを含めた要素が返ってきます。タグの中に書かれた内容を取得するにはtextContentを使えば良いようです。

初心者なもので、
<タグを含めた要素を取得してどんな使い道があるのでしょうか?
意味がよくわかりません。 

使い慣れた方、これの使い道を教えてください。宜しくお願いいたします。

HTML

2 件の回答 2

4

文字列が返されるわけではなく、HTMLElementというオブジェクトが返されています。オブジェクトなので、例えばtagNameプロパティを持っておりその値は"LI"となっているはずです。このオブジェクトをconsole.log()で文字列化する際にouterHTMLの内容が出力されたに過ぎません。

1

例としている<ul>はメモリ上では以下のようなツリー構造になり、<ul>の子供はテキストではありません。

HTMLUListElementHTMLLIElement
 ┃  ┗ Text "1番目"
 ┣ HTMLLIElement
 ┃  ┗ Text "2番目"
 ┗ HTMLLIElementText "3番目"

HTMLLIElementをコンソールに表示すると、タグ付きの文字列に見えますが、children[n]が文字列というわけではありません。

現実的には、HTML文書をJavaScriptから操作するときは HTMLUListElement HTMLLIElement などの Element を扱うことが多くなります。IDやclassを付けられるのがElementだけだからです。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。