DOM操作でクラスの中のテキスト要素をいじりたかったのだが少し戸惑ったのでまとめる
<class>
<img>
"テキスト"
<button></button>
</class>
今回のいじりたいクラスはこんな感じテキストにidとかpタグがついていない →子要素並べて順番を指定して要素をとろう。
childrenで要素を取得してみる
getElementByClassName("クラス名")[0].children;
これを実行すると
HTMLCollection(2) [img, button]
で返ってきます テキストはとれずimgとbuttonしかとれません
childnodesで要素を取得してみる
getElementByClassName("クラス名")[0].childNodes;
これで実行すると
NodeList(3) [img, text, button]
で返ってきます。テキストも取れました。
HTMLCollectionとNodeListの違いは何か
childrenとchildNodesでは返ってくる形がHTMLCollectionとNodeListというふうに違いました。またテキストの有無の違いもありました。 両者の違いは何なのでしょうか
HTMLCollection
HTMLの要素集
<p>とか<html>とか<button>とかいう要素はHTMLCollectionです。
NodeList
HTML要素のみならずすべての要素です
まとめ
childNodesはあらゆる種類の子要素(ノード)を呼ぶが、childrenはHTMLの子要素(要素ノード)だけを呼ぶ。
使う場面があれば参考にしてみてください!