70883

[code]

    const base = document.getElementById('parent');
    const children = base.children;
    
    console.log(children[0]);
    console.log(children[1]);
    console.log(children[2]);
    
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/wY8BV.png)](https://i.stack.imgur.com/wY8BV.png)

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

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

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

[![HTML](https://i.stack.imgur.com/XtQDN.png)](https://i.stack.imgur.com/XtQDN.png)


CC BY-SA 4.0
2020-10-02T05:23:50.557
70880
2020-10-02T13:07:43.583
2020-10-02T13:07:43.583
32986
42150
question
javascript html dom
JavaScriptでタグを含む要素が返ってくる


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


CC BY-SA 4.0
2020-10-02T07:10:29.697
70883
2020-10-02T07:10:29.697
4236
70880
answer


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

[code]

    [HTMLUListElement](https://html.spec.whatwg.org/C/#htmlulistelement)
     ┣ [HTMLLIElement](https://html.spec.whatwg.org/C/#htmllielement)
     ┃  ┗ [Text](https://dom.spec.whatwg.org/#text) "1番目"
     ┣ [HTMLLIElement](https://html.spec.whatwg.org/C/#htmllielement)
     ┃  ┗ [Text](https://dom.spec.whatwg.org/#text) "2番目"
     ┗ [HTMLLIElement](https://html.spec.whatwg.org/C/#htmllielement)
        ┗ [Text](https://dom.spec.whatwg.org/#text) "3番目"
    
[/code]

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

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


CC BY-SA 4.0
2020-10-02T07:54:58.427
70884
2020-10-02T07:54:58.427
3475
70880
answer