ドム・とは？ Web の世界を支える DOM の基本をやさしく解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

ドム・とは？

ドムとは Document Object Model の略であり日本語では文書オブジェクトモデルと呼ばれます。この仕組みはウェブページをプログラムで操作するための設計図のようなものです。

要するにドムは HTML や XML の各要素を木構造のノードとして扱いそのノードを親子関係でつなぎます。木構造の頂点は document という最上位のノードから始まり html の根を作ります。中の要素は子ノードとして配置されそれぞれの要素には名前や中身があり文字色や表示内容も変えられます。

なぜ大事か

ドムを理解するとウェブページを動かす力がわかる というのが大きな理由です。JavaScript を使って要素を選び出力を書き換え追加や削除そしてイベントに反応させるにはまず DOM の仕組みを知っておく必要があります。たとえばボタンを押したときに文字を変える総称のデザインを整えるなどの動作が DOM の操作です。

木構造のイメージ

DOM は木のような階層で構成されます。最上位は文書全体を表す document ノードです。次に html ノードがありその下に head と body が並びます。体の中には見出しの h1 や段落の p などの要素がぶらさがっています。親ノードの一部が子ノードを持ち子ノードはさらに子を持つことができます。これらの関係によりページ全体の構造をプログラムで辿ったり変更したりできるのです。

実例と表

以下はドムの要素と役割を簡単にまとめた表です

用語	説明
document	木構造の根となるノード
html	HTML 文書の根の子ノード
body	ページに表示される内容を含むノード
div や p	実際の表示要素段落や区分を作る

実際の使い方はたとえば以下のようなイメージです

<div class='sample'>こんにちは</div> のようなタグの内容を JavaScript で変えることができます

このようにドムは単なるHTMLの一覧ではなくページを動かす道具として機能します。慣れるとユーザーの操作に合わせて表示を変えることができ体験を向上させます。

よくある使い方

よくある使い方には次のようなものがあります。要素を追加する設定を変更するイベントに対応する要素の内容を取得するなどです。これらはすべて DOM を介して行われます。

注意点

DOM の変更はページ全体のレンダリングに影響するため速さやパフォーマンスに気をつける必要があります。頻繁な変更を行う場合はバッチ処理一時的な変更の後に再描画をまとめるなどの工夫が役立ちます。

要約すると DOM はウェブページをプログラムで操作するための枠組みです。木構造のノードを使って要素を管理し JavaScript から自由に動かせるのが大きな特徴です。

ドムの関連サジェスト解説

サブドムとは: サブドムとは、インターネット用語の「サブドメイン（subdomain）」のことを指します。基本のドメイン example.com の前に新しい名前をつけたものを例として blog.example.com や shop.example.com などがあります。この仕組みは、同じドメイン配下に新しい名前空間を作り、別のサイトやサービスを分けて運用するのに便利です。対して example.com/blog のようにURLの中でディレクトリを追加する方法はサブディレクトリと呼ばれ、同じドメイン内の階層を表します。使い方の例として、多言語サイトを作る際の ja.example.com, en.example.com のような分け方、地域別・サービス別のサイト分離、開発・テスト環境の分離などがあります。設定のイメージとして、まず DNS でサブドメインの名前解決を設定し、Aレコードや CNAME で指すサーバーを決めます。次にウェブサーバーの設定（Apache の仮想ホスト、Nginx の server ブロックなど）を行い、実際のページを配信します。必要に応じて SSL 証明書をサブドメインもカバーするように取得します。SEO の観点では、サブドメインは検索エンジンにとって別のサイトとして扱われることがあり、メインサイトと評価が分かれる場合があります。重複コンテンツ対策として canonical タグを活用したり、内部リンクを整えたりすることが大切です。メリットは運用の分離・セキュリティの分離・異なる地域や言語の対応、デメリットは管理コストの増加・評価の分散・引き継ぎの難しさです。目的を明確にして、サブドメインを使うべきかサブディレクトリに統一するべきかを判断しましょう。
シャア専用ドムとは: シャア専用ドムとは、ガンダムシリーズに登場する“シャア・アズナブル”が操縦する特別仕様のモビルスーツ、ドムのことです。ドムは地上戦に強い重MSで、厚い装甲と強力な近接戦闘能力を特徴とします。シャア専用ドムは、その名のとおりシャアのために塗装と微調整が施された機体で、全体が赤色に塗られているのが大きな特徴です。赤いカラーはシャアの代名詞として視覚的に強い印象を与え、ファンの間でも非常に有名なデザインとなっています。設定上は通常のドムより機動性や攻撃力のバランスが良いと説明されることがありますが、作品によって描写は異なります。この機体が登場する理由は、シャアという人気キャラクターの象徴性を高め、視聴者に強い印象を残すための演出が大きいです。実戦的には、ドムの長所である地上戦向きの重量感と火力を活かす戦い方が想定され、近接戦闘と突撃を組み合わせる使い方が描かれます。塗装カラーを赤にすることで存在感を際立たせ、敵味方の速度や動きよりも見た目の印象を重視する演出となることが多いです。初心者に伝えたいポイントは3つです。1）シャア専用ドムは“赤いドム”としての象徴で、機体の色だけで実力が決まるわけではない、という点。2）作品ごとに描写は異なるため、どのシリーズを見ているかで解釈が変わること。3）ガンダムの世界では、特定のパイロットと特定の機体の組み合わせが物語の核になることが多い、ということです。

ドムの同意語

ドミナント: 支配的・優位な立場を指す語。文脈により、世界の中で最も影響力がある人物や状態を表します。
支配者: 他を支配する人。権限を持つ立場の人を指す一般的な表現です。
主導者: 何かを先導する人・リーダー的な役割を担う人を指します。
優勢: 他より有利な立場・状態を表す名詞。競争で“dominant”な状態を指すときに使われます。
主導的: 物事を引っ張る性質・リードする性質を表す形容詞です。
文書オブジェクトモデル: ウェブページの構造を木構造で表し、プログラムで操作する標準仕様。HTMLやXMLのノードを操作します。
ドキュメントオブジェクトモデル: 同じDOMを指す別表現。文書のノードを操作するためのAPIの総称です。
DOM: Document Object Model の略称。HTMLやXML文書をノードとして扱い、プログラムから操作する仕組み。
文書オブジェクトツリー: DOMの木構造を別の言い方で表現した表現。ノードが親子関係でつながっています。

ドムの対義語・反対語

サブ: 対義語としてよく使われる用語。ドムが支配的な立場をとる場合の反対で、従属・受け身の姿勢を指す。
サブミッシブ: サブの別表現。従順で力を委ねる態度・関係性を指します。
従属: 他者の支配・指示に従う関係・地位。ドムの対義語として広く用いられます。
被支配: 支配される側の状態。力関係の逆転を表す表現。
受け身: 自ら能動的に動かず、外部の力に委ねる態度。
自立: 自分の力で判断・行動できる状態。ドムの能動的・支配的な側と対になる概念。
独立: 他者に依存せず自立している状態。支配関係の反対のニュアンスを持つことが多い。
非支配: 支配していない、支配される関係ではない状態。ドムの対義語として使われることがある。
平等: 力関係が対等である状態。支配・被支配の不均衡を解消する意味合いで対義語として用いられることもある。

ドムの共起語

ガンダムシリーズ: 機動戦士ガンダムを中心とした作品群の総称。ドムはこの世界観に登場する機体の一つです。
MS-07 ドム: ジオン公国が開発した重装甲の実戦用モビルスーツ。ドムという名称の機体そのもの。
MS-07: 機体の型式番号表記。MS-07はドムの正式番号です。
モビルスーツ: 人型の可動する戦闘用ロボット。ドムはこのカテゴリの兵器です。
ジオン公国: ガンダム世界の対抗勢力。ドムを配備する国家として描かれます。
地球連邦軍: 地球連邦の軍事組織。ドムと戦う相手側の勢力です。
宇宙世紀: ガンダムの主要時代設定。ドムが活躍する時代の呼称です。
一年戦争: ジオン公国と地球連邦軍が戦った初期戦争。ドムが活躍する局面が描かれます。
ガンプラ: ガンダムのプラモデルの略称。ドムの模型も人気の対象です。
プラモデル: プラスチック製の組み立て模型の総称。ドムの模型も含まれます。
ガンダム: シリーズ全体の名称。ドムはこの世界観の機体として位置づけられます。
ファンアート: ファンが描く絵や作品の総称。ドムを題材にした作品も多く見られます。
武装: 機体が搭載する武器・装備の総称。ドムにも複数の武装が設定されています。
重装甲: 防御力の高い厚い装甲を指す特徴。ドムはその点で語られることが多いです。
戦術タイプ: 近接・重火力寄りの戦闘特性を指す分類。ドムは前線での運用が語られることがあります。
名称表記: 機体名の公式表記や略称の表し方（例: MS-07 ドム、ドム）。

ドムの関連用語

DOM: Document Object Model の略。HTML や XML を木構造のノードとして表し、JavaScript から文書を動的に操作できるようにする仕様です。
DOMツリー: DOM が表す文書の階層構造。要素ノードや属性ノード、テキストノードが親子関係で連なる木構造のことです。
ノード: DOM の基本要素。文書内の要素・属性・テキストなどはすべてノードとして扱われます。
要素ノード: HTML の要素を表すノード。例: div や p など、DOM の中核をなす単位です。
テキストノード: 要素内のテキストを表すノード。テキストはこのノードとして格納されます。
属性ノード: 要素の属性を表すノード。id や class などが含まれます。
DOM操作: JavaScript を使って DOM の構造を作成・変更・削除すること。画面を動的に更新する基本技術です。
createElement: 新しい要素ノードを作成する DOM メソッド。作成後は appendChild などで追加します。
appendChild: 親ノードの末尾に子ノードを追加する操作。
removeChild: 親ノードから子ノードを削除する操作。
replaceChild: 既存の子ノードを別のノードに置換する操作。
innerHTML: 要素内の HTML を取得・設定するプロパティ。文字列として HTML を扱います。
textContent: 要素内のテキストを取得・設定するプロパティ。HTMLタグは解釈されません。
getElementById: ID で要素を取得する古典的な DOM メソッド。
getElementsByClassName: クラス名で要素を複数取得するメソッド。HTMLCollection を返します。
getElementsByTagName: タグ名で要素を複数取得するメソッド。HTMLCollection を返します。
querySelector: CSS セレクタにマッチする最初の要素を返します。
querySelectorAll: CSS セレクタにマッチする全要素を NodeList で返します。
classList: 要素のクラス操作を行う便利なオブジェクト。add, remove, toggle などが使えます。
setAttribute: 要素の属性を設定するメソッド。値は文字列として保存されます。
removeAttribute: 要素の属性を削除するメソッド。
addEventListener: イベントリスナーを追加して、イベント発生時に処理を実行します。
removeEventListener: 追加したイベントリスナーを削除します。
イベント: ユーザー操作やページ状態の変化など、何かが起きたときに発生する通知のこと。
イベントリスナー: イベントが発生したときに実行される関数のことです。
イベントバブリング: イベントが発生した要素から親へ伝搬する挙動のこと。
イベントデリゲーション: 親要素に一つのイベントリスナーを置き、子要素のイベントを処理する手法。
preventDefault: イベントのデフォルト動作を阻止します。
stopPropagation: イベントの伝搬を止め、さらなる伝搬を防ぎます。
DOMContentLoaded: HTML の読み込みと初期 DOM の構築が完了した時に発生するイベント。
load: ページ全体の読み込みが完了した時に発生するイベント。
MutationObserver: DOM の変化を監視して、変化を通知する仕組み。
Shadow DOM: ウェブコンポーネントの内部 DOM を外部から分離してカプセル化する技法。
Web Components: Custom Elements や Shadow DOM などを使って再利用可能な部品を作る仕組み。
Custom Elements: 独自の HTML 要素を定義して再利用できるようにする API。
HTMLCollection: 複数の要素を集めるコレクション。配列のように見えますが配列ではない点に注意。
NodeList: Node の集合を表すコレクション。forEach などが使える場合があります。
Document: HTML や XML 文書を表すオブジェクト。document プロパティとしてアクセスします。
Window: ブラウザのウィンドウを表すグローバルオブジェクト。document などを含みます。
DOM API: DOM を操作するための標準的な API の総称。
XML DOM: XML 文書を扱う DOM の仕様。HTML DOM とは一部仕様が異なる場合があります。
DOMParser: 文字列を DOM Document に変換する API。
XMLSerializer: DOM Document を文字列に変換する API。
DOMException: DOM 操作で発生するエラーを表す例外型。
ドメイン: インターネット上の住所表現。サイトを識別するための名前空間。
ドメイン名: インターネット上の識別用名称。例: example.com
サブドメイン: ドメインの前に付く名前。例: blog.example.com
DNS: Domain Name System の略。ドメイン名を IP アドレスへ変換する仕組み。
DNSレコード: ドメインに紐づく情報を格納するレコード。A、CNAME、MX、TXT などがある。
Aレコード: ドメイン名を IP アドレスへ紐づける DNS レコード。
CNAMEレコード: 別名としてのドメインを指す DNS レコード。
MXレコード: メールの配信先サーバを指す DNS レコード。
TXTレコード: 任意のテキスト情報を格納する DNS レコード。
トップレベルドメイン: ドメイン名の最上位部分。例: .com, .jp
レジストラ: ドメイン名の登録を代行する事業者。
WHOIS: ドメインの登録情報を照会・取得できる公開データベース。