HTMLやスクレイピングの勉強を始めたばかりの方にとって、「DOM（ドム）」という言葉は少し難しく感じるかもしれません。でも、安心してください。
DOMは、Webページの構造をプログラムから操作するための“設計図”や“地図”のようなものです。
この記事では、DOMの基本的な仕組みや使い方を、初心者にもわかりやすく解説します。
DOMとは
DOM（Document Object Model）**とは、HTMLやXMLなどの文書をプログラムで扱うための仕組みです。
たとえば、WebページはHTMLで作られていますが、DOMはそのHTMLをツリー構造で表現して、JavaScriptやPythonなどから操作できるようにしたものです。 <img src=”https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction/dom-tree.png” alt=”DOM構造の例” width=”600″/>
簡単に言えば：
「Webページをプログラムでいじるためのルールブック」
DOM要素とは？
HTMLでは次のようなタグを使ってWebページの内容を記述します。
<div>
<p>こんにちは</p>
<a href="https://example.com">リンク</a>
</div>これらの各タグ（<div>, <p>, <a> など）は、**DOMの要素（Element）**になります。
JavaScriptやPythonからこのDOM要素を取得し、表示内容を変更したり、非表示にしたりすることができます。
DOM要素の例と説明
| タグ | 説明 |
|---|---|
<div> | 領域やグループをまとめるタグ |
<p> | 段落を表すタグ |
<a> | リンクを作成するタグ（href属性が重要） |
<img> | 画像を表示するタグ（src属性が必要） |
<ul> | 箇条書きリストを作るタグ |
<li> | リストの項目（<ul>の中で使う） |
JavaScriptでDOMを操作する例
以下のコードは、Webページ内の見出し（<h1>）を変更するJavaScriptの例です。
let heading = document.querySelector('h1');
heading.textContent = '新しい見出し';ポイント：
document.querySelector('h1')で、ページ内の<h1>要素を取得textContentプロパティを使って、中身のテキストを変更
このようにして、ページの内容を動的に変更できます。
DOM要素の「属性」とは？
HTMLタグには、「属性（Attribute）」という追加情報を記述できます。これもDOMで操作できます。
<a href="https://example.com" target="_blank">リンク</a>この <a> タグには href や target という属性が含まれています。
| 属性名 | 説明 |
|---|---|
href | リンク先のURL |
target | リンクを新しいタブで開く（_blank）など |
PythonでDOMを使ったスクレイピング（BeautifulSoup）
DOMの知識は、スクレイピングでも活躍します。Pythonで有名なライブラリ「BeautifulSoup」を使えば、DOM要素を取得できます。
使用例
from bs4 import BeautifulSoup
import requests
url = "https://example.com"
response = requests.get(url)
soup = BeautifulSoup(response.text, 'html.parser')
# h1要素のテキストを取得
heading = soup.find('h1').text
print(heading)初心者向けワンポイント
- DOMをツリー構造としてイメージしよう（親子関係が大事）
- 属性は「タグの追加情報」。
hrefやsrcなどがよく出てくる - JavaScriptやPythonから簡単に操作できる
- スクレイピングで要素を取り出すときもDOMを意識する
よく出る関連用語（用語集）
| 用語 | 説明 |
|---|---|
| DOMツリー | ページ内のHTML構造を木構造で表したもの |
| ノード（Node） | DOMの各要素（タグ、テキストなど）の総称 |
| 属性（Attribute） | タグに追加された情報（例：href, class） |
| 親・子要素 | タグの入れ子構造での関係（<ul> と <li> など） |
まとめ
- DOMはHTMLをプログラムから操作するための“地図”や“設計図”
- JavaScriptやPythonからDOMを操作して、Webページを動的に扱える
- スクレイピングでもDOM要素の構造を理解することが重要