ホームページ >ウェブフロントエンド >jsチュートリアル >DOM 操作: DOM 要素の選択と操作
DOM 操作: DOM 要素の選択と操作
- PHPzオリジナル
- 2024-08-09 12:34:321022ブラウズ
DOM の概要
ドキュメント オブジェクト モデル (DOM) は、Web 開発にとって重要な概念です。これは、開発者が Web ページの構造、スタイル、コンテンツを操作および変更できるようにするプログラミング インターフェイスとして機能します。 Web ページがブラウザに読み込まれると、HTML ドキュメントは DOM に変換されます。DOM は、各ノードが要素、属性、またはテキストを表すツリー状の構造です。この構造により、開発者はページの一部に動的にアクセスして操作できるようになり、Web エクスペリエンスがよりインタラクティブで魅力的なものになります。
初心者や DOM に慣れていない人は、DOM を家の設計図と考えてください。家具を並べ替えたり、家の壁にペンキを塗ったりできるのと同じように、DOM を使用すると、Web ページの読み込み後にそのコンテンツやスタイルを変更できます。
要素の選択
DOM を操作する前に、操作する要素を選択する必要があります。 JavaScript には要素を選択するためのメソッドがいくつか用意されており、Web ページのさまざまな部分を操作できるようになります。ここでは、いくつかの一般的な方法を見ていきます:
1. ID による要素の選択
getElementById メソッドは、単一の要素を選択する最も簡単な方法の 1 つです。指定された ID に一致する要素を返します。
// Selecting an element by ID
const heading = document.getElementById('heading');
この例では、見出しは見出しの ID を持つ要素を参照するようになります。この参照を使用して要素をさらに操作できます。
2. クラス名による要素の選択
同じクラスを持つ複数の要素を選択するには、getElementsByClassName メソッドを使用できます。このメソッドは要素のライブ HTMLCollection を返します。
// Selecting elements by class name
const items = document.getElementsByClassName('item');
items 変数は、クラス名が item であるすべての要素のコレクションを保持するようになります。このメソッドは、同じアクションを複数の要素に適用する必要がある場合に特に便利です。
3. CSS セレクターを使用した要素の選択
querySelector メソッドと querySelectorAll メソッドを使用すると、CSS セレクターを使用して要素を選択できます。これらのメソッドは多用途であり、タグ名、クラス、ID、またはその他の有効な CSS セレクターによって要素をターゲットにするために使用できます。
// Selecting a single element using a CSS selector
const button = document.querySelector('button');
// Selecting multiple elements using a CSS selector
const listItems = document.querySelectorAll('li');
querySelector はセレクターに一致する最初の要素を選択し、querySelectorAll は一致するすべての要素を選択して、配列に似た NodeList を返します。
要素の操作
要素を選択したら、要素を操作してそのコンテンツ、属性、スタイルを変更できます。これにより、ユーザーの操作やその他のイベントに応答する動的な Web ページを作成できます。
1. テキスト内容の変更
textContent プロパティを使用すると、要素内のテキストを変更できます。これは、ユーザー入力またはその他の条件に基づいてコンテンツを動的に更新する場合に役立ちます。
// Changing text content heading.textContent = 'Hello, World!';
この例では、見出しによって参照される要素内のテキストが「Hello, World!」に更新されます。
2. 属性の変更
setAttribute メソッドを使用すると、src、href、alt、disabled などの要素の属性を変更できます。
// Changing an attribute
button.setAttribute('disabled', true);
ここでは、disabled 属性を true に設定することでボタンを無効にします。これは、特定の条件が満たされるまでユーザーの操作を禁止するために使用できます。
3. スタイルの変更
style プロパティを使用すると、要素のインライン CSS スタイルを変更できます。 color、backgroundColor、fontSize などのプロパティを変更できます。
// Changing styles heading.style.color = 'blue';
この例では、見出し要素内のテキストの色が青に変更されます。
要素の作成と削除
既存の要素を変更するだけでなく、新しい要素を作成して DOM に追加したり、不要になった要素を削除したりすることもできます。
1. 新しい要素の作成
createElement メソッドを使用して新しい要素を作成できます。作成したら、そのプロパティを設定し、DOM 内の既存の要素に追加できます。
// Creating a new element
const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph.';
document.body.appendChild(newElement);
この例では、新しい
要素が作成され、そのテキスト内容が設定され、
の末尾に追加されます。要素。2. 要素の削除
DOM から要素を削除するには、remove メソッドを使用できます。これは、ページ上のコンテンツを動的に管理する場合に特に便利です。
// Removing an element
const oldElement = document.getElementById('old-element');
oldElement.remove();
ここでは、old-element という ID を持つ要素が DOM から削除され、実質的に Web ページから削除されます。
現実世界の例: To-Do リスト
これらの概念が実際に動作していることを確認するために、単純な To-Do リスト アプリケーションを構築してみましょう。この例では、実際のシナリオで DOM 要素を選択して操作する方法を示します。
HTML Structure
First, let's create the HTML structure for our To-Do List.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>To-Do List</title> </head> <body> <h1 id="heading">To-Do List</h1> <ul id="todo-list"></ul> <input type="text" id="new-todo" placeholder="New to-do"> <button id="add-todo">Add To-Do</button> </body> </html>
In this structure:
- We have a heading (
) with an ID of heading.
- An unordered list (
- ) with an ID of todo-list, where our to-do items will be displayed.
- An input field for adding new to-do items, with an ID of new-todo.
- A button with an ID of add-todo to add new items to the list.
JavaScript for Interactivity
Next, we'll add some JavaScript to make the To-Do List interactive.
<script>
// Selecting elements
const todoList = document.getElementById('todo-list');
const newTodoInput = document.getElementById('new-todo');
const addTodoButton = document.getElementById('add-todo');
// Adding a new to-do item
addTodoButton.addEventListener('click', () => {
const newTodoText = newTodoInput.value;
if (newTodoText === '') return; // Prevent adding empty to-do items
// Create a new list item
const newTodoItem = document.createElement('li');
newTodoItem.textContent = newTodoText;
// Append the new item to the list
todoList.appendChild(newTodoItem);
// Clear the input field
newTodoInput.value = '';
});
</script>
Explanation:
- Selecting Elements: We begin by selecting the necessary elements using their IDs.
- Event Listener: We add a click event listener to the "Add To-Do" button. When clicked, the event listener function is triggered.
- Input Validation: Inside the function, we first check if the input field is empty to prevent adding empty to-do items.
- Creating a New Element: If the input is not empty, we create a new
- element and set its text content to the value entered in the input field.
- Appending the New Item: The new
- is then appended to the existing
- element.
- Clearing the Input Field: Finally, the input field is cleared, ready for the next to-do item.
This simple application demonstrates the power of DOM manipulation in creating interactive and dynamic web pages.
Conclusion
DOM manipulation is a fundamental skill for any web developer. By understanding how to select and manipulate DOM elements, you can create web pages that are not only static but also responsive to user interactions. The examples provided in this article serve as a foundation for more advanced topics, such as event handling, animations, and dynamic content loading.
By practicing these techniques and applying them to real-world scenarios, you'll gain a deeper understanding of how the web works and be well on your way to mastering front-end development.
以上がDOM 操作: DOM 要素の選択と操作の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。