)。
テキスト ノード: 要素内のテキストを表します。
属性ノード: 要素の属性 (クラス、ID など) を表します。
コメント ノード: HTML 内のコメントを表します。
DOM ツリーの例
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
DOM 表現:
Document
├── html (Element)
│ ├── head (Element)
│ │ └── title (Element)
│ │ └── "My Page" (Text)
│ └── body (Element)
│ ├── h1 (Element)
│ │ └── "Hello, World!" (Text)
│ └── p (Element)
│ └── "This is a paragraph." (Text)
DOM へのアクセス
要素の選択
-
getElementById: ID によって単一の要素を選択します。
const element = document.getElementById('myId');
-
getElementsByClassName: 指定されたクラス名を持つ要素のライブ HTMLCollection を返します。
const elements = document.getElementsByClassName('myClass');
-
getElementsByTagName: 指定されたタグ名を持つ要素のライブ HTMLCollection を返します。
const elements = document.getElementsByTagName('div');
-
querySelector: CSS セレクターに一致する最初の要素を選択します。
const element = document.querySelector('.myClass');
-
querySelectorAll: CSS セレクターに一致するすべての要素の静的な NodeList を返します。
const elements = document.querySelectorAll('div.myClass');
要素の操作
const element = document.getElementById('myId');
element.textContent = 'New Content';
const element = document.getElementById('myId');
element.setAttribute('class', 'newClass');
const element = document.getElementById('myId');
element.style.color = 'blue';
const newElement = document.createElement('div');
newElement.textContent = 'I am a new div';
document.body.appendChild(newElement);
const element = document.getElementById('myId');
element.parentNode.removeChild(element);
DOMイベント
イベントはブラウザ内で発生するアクションまたは出来事であり、イベント ハンドラーを使用してイベントに応答できます。
イベントリスナーの追加
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
一般的なイベント
-
click: 要素がクリックされるとトリガーされます。
-
mouseover: 要素の上にマウスを置くとトリガーされます。
-
keydown: キーが押されるとトリガーされます。
-
submit: フォームが送信されるとトリガーされます。
結論
DOM を理解することは、Web ページと対話して操作する方法を提供するため、Web 開発にとって不可欠です。 DOM 操作をマスターすると、動的でインタラクティブな Web アプリケーションを作成できるようになります。
ドキュメントを詳しく調べて、DOM API で使用できるさまざまなメソッドやプロパティを試してみてください。コーディングを楽しんでください!
以上がドキュメント オブジェクト モデル (DOM) について理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
