【DOM】ノードオブジェクト取得方法の自分用アーカイブ

プログラム

とっちゃん@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」の違いがいまいち分かってませんが、また理解できた時に記事にしたいと思います。

本記事がどなたかの参考になれば幸いです。

今回は以上となります。
最後まで読んでいただきましてありがとうございました!
それではまた〜✧٩(ˊωˋ*)و✧

コメント