JavaScript選択変更

JavaScript は Web 開発で広く使用されているプログラミング言語で、DOM 要素を選択して変更することで、Web ページに動的な効果を実現できます。この記事では、JavaScript での選択と変更について説明します。

選択

JavaScript は次の方法で DOM 要素を選択できます:

1. タグ名セレクター

タグ名セレクターを使用して、すべての要素を選択します。 Web ページ このタグ名の要素。たとえば、すべての p 要素を選択するには:

var pElements = document.getElementsByTagName("p");

2. ID セレクター

ID セレクターを使用して、特定の ID を持つ要素を選択します。たとえば、ID「myDiv」を持つ要素を選択します:

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

3. クラス セレクター

クラス セレクターを使用して、特定のクラス名を持つ要素を選択します。たとえば、クラス「myClass」を持つ要素を選択します:

var myElements = document.getElementsByClassName("myClass");

4. 属性セレクター

属性セレクターを使用して、特定の属性を持つ要素を選択します。たとえば、「data-type」属性を持つすべての要素を選択するには、次のようにします。

var elementsWithType = document.querySelectorAll("[data-type]");

Modify

select element メソッドを使用すると、JavaScript で選択した要素を変更することもできます。

1. 要素のテキスト コンテンツを変更する

要素の innerHTML 属性を変更することで、要素のテキスト コンテンツを変更できます。たとえば、ID が「myDiv」の要素のテキスト コンテンツを「Hello World!」に変更します:

var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "Hello World!";

2. 要素のスタイルを変更します

次のスタイルを変更できます。要素の style 属性を変更して要素を変更します。CSS スタイル。たとえば、ID「myDiv」の要素の背景色を赤に変更します:

var myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "red";

3. 要素のクラスを変更します

要素のクラスを変更するには、次のように変更します。要素の className 属性。たとえば、ID「myDiv」の要素のクラスを「newClass」に変更します:

var myDiv = document.getElementById("myDiv");
myDiv.className = "newClass";

4. 要素の属性を変更します

要素の他の属性は、次の方法で変更できます。要素の属性を変更します。たとえば、ID が「myDiv」の要素の alt 属性を「newAlt」に変更します。

var myDiv = document.getElementById("myDiv");
myDiv.alt = "newAlt";

結論

JavaScript は、DOM 要素を選択して変更することで、Web ページに動的な効果を実現できます。 。この記事では、タグ名セレクター、ID セレクター、クラス セレクター、属性セレクター、テキスト コンテンツ、スタイル、クラス、要素の属性の変更など、JavaScript での選択と変更について紹介します。これらのスキルを習得すると、開発者は Web サイト開発で JavaScript をより柔軟に使用できるようになります。

以上がJavaScript選択変更の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。