YMLib - HTML - DOMの取得と操作

DOMの取得と操作

2026/01/27

DOMの取得と操作をしてみます。

DOMとは

DOMの取得と操作

DOMとは

DOMとはDocument Object Modelの略です。 HTMLやXML文書をブラウザが解釈しプログラムから動的にアクセスできるようにする仕組みです。

DOMの取得と操作

◆環境

OS	Windows 11 Home 25H2
Browser	Google Chrome 143.0.7499.193

index.htmlではscriptタグでmain.jsを指定します。 DOMの取得で使うh1タグを追記しました。

index.html

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:

<!doctype html>
<head>
<meta charset="utf-8">
<title>DOMの取得と操作</title>
</head>
<body>
<script type="module" src="main.js"></script>
<h1>DOMの取得と操作</h1>
</body>
</html>

main.jsではquerySelectorでh1のDOMを取得し内容の表示とtextContentを書き換えてみます。

デバッグで動きを確認したいのでdebuggerをquerySelectorに次に記載します。

main.js

1:
2:
3:
4:
5:

const h1 = document.querySelector('h1');
debugger
console.log(h1);
console.dir(h1);
h1.textContent = 'Hello DOM!!'

index.htmlを右クリックしOpen with Live Serverをクリック後、開いたブラウザでF12でDeveloper toolsを開きF5でリロードするとdebuggerの位置で止まります。

F11で進めます。 console.logではHTMLがそのまま表示されました。

console.dirではDOMオブジェクトが表示されました。

最後まで実行するとh1タグの内容を書き換わりました。

期待通りに動作しました。

▲ PageTop ■ Home