Apply ⏱ 120 min

JavaScript DOM Manipulation – Full Course for Beginners

What You Will Learn

DOM（Document Object Model）について学ぶ
JavaScriptを使用してDOM要素を選択する方法を学ぶ
DOM要素の属性とクラスを変更する方法を学ぶ

Key Concepts

DOMはHTMLドキュメントの構造と内容を表すツリー状のモデルである
DOM要素は、ID、クラス、タグ名などを使用して選択できる
DOM要素の属性とクラスは、JavaScriptを使用して変更できる
DOM要素の選択には、getElementById、getElementsByClassName、getElementsByTagName、querySelector、querySelectorAllなどのメソッドを使用する

Code Examples

const title = document.getElementById('main-heading');

このコードは、IDがmain-headingのDOM要素を選択する。

const listItems = document.querySelectorAll('.list-item');

このコードは、クラスがlist-itemのすべてのDOM要素を選択する。

const li = document.createElement('li');

このコードは、新しいli要素を生成する。

Lesson Summary

このレッスンでは、DOMとその構造について学びました。DOMは、HTMLドキュメントの構造と内容を表すツリー状のモデルであることを理解しました。また、JavaScriptを使用してDOM要素を選択する方法、DOM要素の属性とクラスを変更する方法についても学びました。具体的には、getElementById、getElementsByClassName、getElementsByTagName、querySelector、querySelectorAllなどのメソッドを使用してDOM要素を選択する方法を学びました。さらに、DOM要素の属性とクラスを変更する方法についても学びました。最後に、DOM要素の生成と追加についても学びました。

Practice Exercise

次のコードを完成させてください。

const ul = document.querySelector('ul');
const newLi = document.createElement('li');
newLi.textContent = '新しいリストアイテム';
// 新しいリストアイテムをul要素に追加するコードをここに書いてください

このコードは、新しいli要素を生成し、テキストコンテンツを設定しています。新しいリストアイテムをul要素に追加するには、どのようなコードが必要でしょうか。

What Is Next

次のレッスンでは、イベントハンドリングについて学びます。イベントハンドリングは、ユーザーの行動に応じてJavaScriptコードを実行するために使用されます。具体的には、クリックイベント、ホバーイベント、フォーム送信イベントなどについて学びます。

Choose Language