とっちゃん@nyanco! です。
今回はDOMにおけるノードオブジェクト取得方法の自分用アーカイブです。
「DOM」とは？
DOM（ドム）とは「Document Object Model（ドキュメント オブジェクト モデル）」の略で、Java Scriptなどのプログラムからwebページ（HTML）やXML文書などを操作するための仕組みのことを指します。
決してガンダムのモビルスーツではありません。
ざっくり言うと、操作対象となる要素を特定すること。
例えば、下記のようなHTMLがあるとします。
<!DOCTYPE HTML>
<html>
<head>
<title>nyanco! blog</title>
</head>
<body>
<h1>「DOM」とは？</h1>
<p>「ドム」と読む。ドムドムではない</p>
</body>
</html>
上記の pタグ を非表示にしたい！とかテキスト内容を変更したい！といった操作をJavaScriptでおこなう際に操作対象の pタグ を特定することです。
こんな単純なHTML構造なら超簡単に特定できるのですが、実際はそうもいかないので、色んな特定方法が用意されています。
ちなみにHTML構造は下図のように木（ツリー）に見立ててDOMツリーと呼ばれます。
なお、枝葉にあたる要素は「ノード（node）」とも呼ばれます。
ノードの取得方法
ノードオブジェクトの取得方法の簡単なまとめです。
ID名から取得
document.getElementById('id名');
これが使えると一番分かりやすいですが、当然ID名が指定されてないと使えません。
操作対象となるノードにID名が指定されてることは経験上ほぼないので、筆者はあまり使うことはありませんね。。
クラス名から取得
document.getElementsByClassName('クラス名');
IDと似てますが「getElements」と複数形になってるので要注意！
複数形ということで指定したクラスの要素全てを「HTMLCollection」という形で取得される。
・半角スペースで区切ると複数のクラスの指定も可能
document.getElementsByClassName('クラス名1 クラス名2');
・「HTMLCollection」からピンポイントで取得する場合は何番目かを示す[数字]を後ろにつける（「0」からスタートなので、「0」が1番目）
document.getElementsByClassName('クラス名')[1];
タグ名（要素名）から取得
document.getElementsByTagName('要素名');
タグネーム（p とか h1 とか）でノードを指定できる。
クラスと同様、指定した要素名全てを「HTMLCollection」という形で取得される。
ワイルドカード（*）も使用できる。
name属性から取得
document.getElementsByName('名前');
クラス名・タグ名と同様の仕様です。
CSSセレクタから取得
CSSセレクタでノードを指定することができ、複雑なHTML構造のページでも簡単に特定要素を取得できる。
document.querySelector('CSSセレクタ');
該当するノードのうちの1番目のノードを取得
document.querySelectorAll('CSSセレクタ');
該当する全てのノードをNodeListという形式で取得
CSSセレクタなので、「絞り込み指定（子孫セレクタ）」や「:nth-child(n)」などももちろん使えてかなり柔軟に特定ができるので便利。
おわりに
もう全部「CSSセレクタ」でいいじゃないかって思います。
CSSとHTML、勉強しといて良かった…と改めて思いました。
「HTMLCollection」と「NodeList」の違いがいまいち分かってませんが、また理解できた時に記事にしたいと思います。
本記事がどなたかの参考になれば幸いです。
今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧
コメント