// Modify an element\\'s content, access it using its IDdocument.getElementById(\\\"myElement\\\").innerHTML = \\\"New content\\\";

内の最初の

を選択しますconst 段落 = document.querySelector('div p');

// Modify an element\\'s content, access it using its IDdocument.getElementById(\\\"myElement\\\").innerHTML = \\\"New content\\\";

2. 動的コンテンツ

innerHTML または textContent を変更して、ページのコンテンツをその場で更新します。

説明: innerHTML または textContent を使用すると、要素のコンテンツを動的に変更して、インタラクティブで応答性の高い Web ページを実現できます。

例

// innerHTML を使用します (HTML タグを含めることができます)document.querySelector('#myDiv').innerHTML = '新しいコンテンツ!';// textContent を使用します (プレーンテキストのみ、ユーザー入力にとってより安全です)document.querySelector('#myParagraph').textContent = '更新されたテキスト コンテンツ';

// Modify an element\\'s content, access it using its IDdocument.getElementById(\\\"myElement\\\").innerHTML = \\\"New content\\\";

3. イベントリスニング

インタラクティブなユーザー エクスペリエンスの要素に addEventListener() をアタッチします。

説明: addEventListener() を使用すると、クリック、キーの押下、マウスの動きなどのユーザー アクションに応答して、対話型 Web アプリケーションを作成できます。

例

const button = document.querySelector('#myButton' );ボタン。 addEventListener( 'クリック', function( ) { alert( 'ボタンがクリックされました!')});// アロー関数を使用するdocument.addEventListener('keydown', (イベント) => { コンソール。 log( 'キーが押されました:',event.key);});

// Modify an element\\'s content, access it using its IDdocument.getElementById(\\\"myElement\\\").innerHTML = \\\"New content\\\";

4. DOM トラバーサル

parentNode、子、兄弟のプロパティを使用して DOM ツリーを移動します。

説明: DOM トラバーサルを使用すると、ドキュメント構造内を移動し、DOM ツリー内の位置に基づいて関連要素にアクセスできます。

例

const child = document.querySelector('#childElement');// 親にアクセスするconst 親 = child.parentNode;// 兄弟にアクセスするconst nextSibling = child.nextElementSibling;const prevSibling = child.previousElementSibling;// 子にアクセスするconst firstChild = 親.firstElementChild;const allChildren = 親.子供たち;

// Modify an element\\'s content, access it using its IDdocument.getElementById(\\\"myElement\\\").innerHTML = \\\"New content\\\";

結論

DOM は、開発者がリッチでインタラクティブな Web エクスペリエンスを作成できるようにする JavaScript の強力なツールです。 DOM を理解して利用することで、開発者は Web ページの動作と外観を制御し、Web ページをより魅力的でユーザー インタラクションに応答できるものにすることができます。

// Modify an element's content, access it using its ID
document.getElementById("myElement").innerHTML = "New content";

// Modify an element's content, access it using its ID
document.getElementById("myElement").innerHTML = "New content";