プログラミング

DOM操作の基本ガイド

最終更新： 06/04/2025
1 分の読み

DOM（Document Object Model）は、HTMLやXMLドキュメントの構造をプログラム的に操作するためのインターフェースです。DOMを利用することで、ウェブページの要素（ノード）を動的に変更したり、操作したりすることができます。この記事では、DOMの特性や、DOMツリー内の要素に対してどのように「特性（プロパティ）」「クラス（クラス名）」「スタイル」を変更するかについて、包括的に解説します。

DOMツリーとその基本

DOMツリーは、HTMLやXMLドキュメントをノードの階層構造として表現したものです。各ノードは文書の要素、属性、テキスト内容などに対応します。例えば、HTMLで記述されたページは次のようにDOMツリーとして表されます。

関連記事
html
html>
<html>
  <head>
    <title>ページタイトルtitle>
  head>
  <body>
    <h1>ウェブページのヘッダーh1>
    <p>これは段落です。p>
  body>
html>

この例では、がツリーのルートノードで、、、

、

などが子ノードに相当します。これらのノードはJavaScriptを使って操作できます。

1. DOMのプロパティの変更

DOMのプロパティは、HTML要素の属性やその内容を管理するためのものです。これらのプロパティを変更することで、ウェブページの内容や構造を動的に変更することができます。

1.1 innerHTML プロパティ

innerHTMLは、要素の内部のHTMLコードを取得したり、設定したりするためのプロパティです。このプロパティを使うことで、要素の内容を動的に変更できます。

javascript
document.getElementById("myElement").innerHTML = "新しいコンテンツ";

1.2 textContent プロパティ

textContentは、要素内のテキストコンテンツを操作するためのプロパティです。innerHTMLとは異なり、textContentはHTMLタグを含まず、純粋なテキストのみを操作します。

javascript
document.getElementById("myElement").textContent = "テキスト内容が変更されました";

1.3 value プロパティ

フォーム要素（例えばや