私の React の旅: 5 日目

今日、私は Web 開発の基本概念である DOM 操作の世界に足を踏み入れました。ドキュメント オブジェクト モデル (DOM) は HTML と JavaScript の間の橋渡しとなり、Web ページを動的に操作したり変更したりできるようにします。私が学んだことは次のとおりです:

DOM 操作とは何ですか?
DOM 操作は、JavaScript を使用して Web ページの構造、スタイル、コンテンツと対話し、構造、スタイル、またはコンテンツを変更するプロセスです。

要素へのアクセス
DOM を操作するには、まず要素を選択またはアクセスする必要があります。 JavaScript には、これを実現するためのいくつかのメソッドが用意されています。

getElementById: ID によって要素を選択します。

const header = document.getElementById('main-header');
console.log(header); // Logs the element with ID 'main-header'

querySelector: CSS セレクターを使用して、最初に一致する要素を選択します。

const firstButton = document.querySelector('.btn');
console.log(firstButton); // Logs the first element with class 'btn'

querySelectorAll: 一致するすべての要素を NodeList として選択します。

const allButtons = document.querySelectorAll('.btn');
console.log(allButtons); // Logs a list of all elements with class 'btn'

その他の方法:

• getElementsByClassName (クラス名で要素を選択します).
• getElementsByTagName (タグ名で要素を選択します).

要素の操作
1.コンテンツの変更
要素のコンテンツを変更するには、innerHTML または textContent プロパティを使用します。

const title = document.getElementById('title');
title.innerHTML = 'Welcome to My React Journey!';
title.textContent = 'Day 5 - DOM Manipulation';

2.スタイルを変更する
style プロパティを使用して、スタイルを動的に更新できます。

const button = document.querySelector('.btn');
button.style.backgroundColor = 'blue';
button.style.color = 'white';

3.クラスの追加/削除
classList プロパティを使用して、クラスを追加、削除、または切り替えます。

button.classList.add('active');   // Adds 'active' class
button.classList.remove('btn');  // Removes 'btn' class
button.classList.toggle('hidden'); // Toggles 'hidden' class

4.属性
src、alt、href などの属性を変更できます。

const image = document.querySelector('img');
image.setAttribute('src', 'new-image.jpg');
image.setAttribute('alt', 'A beautiful scenery');

イベント処理
DOM 操作は多くの場合、イベントと連動して行われます。クリック、キー押下、マウスの動きなどのユーザー インタラクションをリッスンできます。

例: クリック イベントの追加

const button = document.querySelector('.btn');
button.addEventListener('click', () => {
    alert('Button clicked!');
});

例: 入力時のコンテンツの更新

const input = document.querySelector('#name-input');
input.addEventListener('input', () => {
    const display = document.querySelector('#name-display');
    display.textContent = `Hello, ${input.value}!`;
});

動的要素の作成
要素を動的に作成および追加できます。

const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph added dynamically!';
document.body.appendChild(newElement);

最終的な考え
DOM 操作は非常に強力で、開発者はインタラクティブで動的な Web ページを作成できます。これは React のようなフレームワークの基礎を形成し、仮想 DOM を使用して DOM 更新がより効率的に処理されます。

React Native の旅をさらに進めていく中で、これらのコンセプトがどのように展開されるのかを楽しみにしています。

6 日目、来ました! ?

以上が私の React の旅: 5 日目の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。