DOMとは何ですか？
HTML ドキュメントを家系図として考えてみてください。各要素には親があり、子や隣人がいる場合があります。DOMは、ブラウザがページのすべての要素を操作可能なJavaScriptオブジェクトとして整理する方法です。
<!DOCTYPE html>
<html>
<body>
<h1>Привет, мир!</h1>
<p>Это параграф</p>
</body>
</html>この例では、<body>は<h1>と<p>の親であり、それらはその子です。
ページ上の要素を検索する
何かを変更する前に、要素を見つける必要があります。いくつかの方法があります。
// IDで検索
const header = document.getElementById('main-header');
// クラスで検索（要素のコレクションを返します）
const buttons = document.getElementsByClassName('btn');
// タグ検索
const paragraphs = document.getElementsByTagName('p');
// 現代の方法（最も人気があります！）
const firstButton = document.querySelector('.btn'); // 最初の要素
const allButtons = document.querySelectorAll('.btn'); // すべての要素メソッド querySelectorとquerySelectorAllはあなたの親友です。どの CSS セレクターでも動作し、非常に便利です。
コンテンツの変更
要素が見つかったので、次にそれを使用して何かを実行してみましょう。
const title = document.querySelector('h1');
// テキストを変更
title.textContent = 'New title';
// HTML を編集する（タグを挿入できます）
title.innerHTML = 'Title with <span>accent</span>';重要： 通常のテキストには textContent を使用し、HTML を挿入する必要がある場合にのみ innerHTML を使用してください。これはより安全です。
属性の操作
要素の属性も簡単に変更できます。
const link = document.querySelector('a');
// 属性を取得する
const href = link.getAttribute('href');
// 属性を設定する
link.setAttribute('href', 'https://example.com');
// 属性を削除する
link.removeAttribute('target');
// クラスの操作
link.classList.add('active');
link.classList.remove('disabled');
link.classList.toggle('highlighted'); // クラスを切り替えるスタイルの変更
CSSスタイルはJavaScriptから直接変更できます。
const box = document.querySelector('.box');
// 1つのスタイルを変更する
box.style.backgroundColor = 'blue';
box.style.width = '200px';
// 最良の方法はクラスを通じて
box.classList.add('big-box');ヒント： スタイルは直接ではなく、クラスを介して変更するようにしてください。これにより、コードのメンテナンスが容易になります。
新しい要素の作成
要素をゼロから作成してページに追加することができます。
// アイテムを作成する
const newDiv = document.createElement('div');
// コンテンツを追加
newDiv.textContent = 'I am a new element!';
newDiv.classList.add('message');
// ページに追加
document.body.appendChild(newDiv); // bodyの最後に
// または特定の場所に挿入する
const container = document.querySelector('.container');
container.appendChild(newDiv);要素の削除
要素は削除できます。
const oldElement = document.querySelector('.old');
// 現代的な方法
oldElement.remove();
// 古い方法（どこでも機能します）
oldElement.parentNode.removeChild(oldElement);
実例：タスクリスト
タスクリストのシンプルなアプリケーションを作成しましょう。ご自身でお試しください。
マイタスク
このアプリケーションを動作させるコードは次のとおりです。
const input = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');
addBtn.addEventListener('click', function() {
const taskText = input.value.trim();
if (taskText === '') return;
// 新しいリストアイテムを作成します
const li = document.createElement('li');
li.textContent = taskText;
// タスクにマークを付ける機能を追加します
li.addEventListener('click', function() {
li.classList.toggle('completed');
});
// 削除ボタン
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.className = 'delete-btn';
deleteBtn.addEventListener('click', function(e) {
e.stopPropagation(); // liのクリックが機能しないようにするため
li.remove();
});
li.appendChild(deleteBtn);
taskList.appendChild(li);
// 入力フィールドをクリアする
input.value = '';
});
// Enterキーで追加
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
addBtn.click();
}
});役立つヒント
要素をキャッシュします。 要素を複数回使用する場合は、再検索する代わりに変数に保存します。
// 悪い
document.querySelector('.box').style.width = '100px';
document.querySelector('.box').style.height = '100px';
// 良い
const box = document.querySelector('.box');
box.style.width = '100px';
box.style.height = '100px';イベントの委任を使用します。 各要素にハンドラを追加する代わりに、親に1つ追加します。
リフローを最小限に抑えます。 頻繁にDOMを変更すると、ページの速度が低下する可能性があります。変更をグループ化するか、DocumentFragmentを使用します。
要素の存在を確認する エラーを避けるために、それらを操作する前に。
const element = document.querySelector('.maybe-exists');
if (element) {
element.textContent = 'Found it!';
}結論
DOM操作は、インタラクティブなWebページの基礎です。これらを使用して、動的インターフェースを作成し、ユーザーアクションに応答し、サイトをライブにすることができます。練習し、例を試してみてください。すぐに自然になります。
Pythonやその他の言語を学ぶことができます コディケ — 当社には実践的なタスクを伴う便利な学習プラットフォームがあります。
そして、私たちは素晴らしい テレグラムチャンネル 質問をしたり、経験を共有したり、志を同じくする人々と一緒に成長したりできる友好的なコミュニティ。
参加する!