JavaScript を使用して HTML コンテンツを変更する方法

JavaScript はフロントエンド開発において非常に重要な言語です。 JavaScript では、DOM を操作することで、HTML ドキュメントの内容、スタイル、構造などを変更できます。この記事では、JavaScriptを使用してHTMLコンテンツを変更する方法を紹介します。

1. DOM の操作

DOM (Document Object Model) は、HTML、XML、SVG ドキュメントにアクセスするために W3C によって定義されたプログラミング インターフェイスです。 DOM を使用すると、HTML ドキュメント内の要素と属性を JavaScript コードで操作できます。

HTML コンテンツを変更するには、まず変更する要素を取得する必要があります。 JavaScript のドキュメント オブジェクトを通じて、getElementById()、getElementsByClassName()、getElementsByTagName() などのメソッドを使用して HTML ドキュメント内の要素を取得し、これらの要素を操作できます。

たとえば、次のコードを通じて ID「demo」を持つ要素を取得できます:

var demo = document.getElementById("demo");

2. HTML コンテンツを変更します

要素を取得した後、 JavaScript を使用できます この要素の内容を変更します。 JavaScript には、HTML コンテンツを変更するためのさまざまなメソッドが用意されています。

1. innerHTML 属性

innerHTML 属性にアクセスすることで、HTML 要素のコンテンツを変更できます。 innerHTML プロパティは、要素の HTML コンテンツを設定または返します。

たとえば、次のコードを使用して、p 要素のテキスト コンテンツを「Hello World」に変更できます。

var p = document.getElementById("myParagraph");
p.innerHTML = "Hello World";

2. textContent 属性

textContent属性 要素のテキスト内容を返す読み取り専用プロパティです。 innerHTML 属性とは異なり、textContent は HTML マークアップを除いた要素のプレーン テキスト コンテンツを返します。

たとえば、次のコードを通じて p 要素のテキスト コンテンツを取得できます。

var p = document.getElementById("myParagraph");
var text = p.textContent;

3. innerText 属性

innerText 属性は次のようになります。 innerHTML 属性、および要素のテキスト コンテンツを設定または返すためにも使用されます。違いは、innerText は要素とその子孫要素のテキスト コンテンツを返すのに対し、innerHTML は HTML タグを含むテキスト コンテンツを返すことです。

たとえば、次のコードを使用して、p 要素のテキスト コンテンツを「Hello World」に変更できます。

var p = document.getElementById("myParagraph");
p.innerText = "Hello World";

4. value 属性

value属性 主にテキスト入力ボックス、ドロップダウンボックス、ラジオボタンボックスなどのフォーム要素の値を変更するために使用されます。

たとえば、次のコードを使用してテキスト入力ボックスの値を変更できます:

var input = document.getElementById("myInput");
input.value = "Hello World";

3. 概要

JavaScript では、DOM 要素を操作することで、次のことができます。 HTMLドキュメントの内容を簡単に変更できます。この記事では、innerHTML、textContent、innerText、value 属性などの HTML コンテンツを変更するいくつかの方法を紹介します。フロントエンド開発におけるさまざまなニーズを実現するために、実情に応じてHTML要素の操作方法を適切に選択することができます。

以上がJavaScript を使用して HTML コンテンツを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。