JavaScriptでノードを変更する

JavaScript でノードを変更する

JavaScript は、Web デザインおよび開発でクライアント側のスクリプト言語として一般的に使用される動的プログラミング言語です。 HTML (Hypertext Markup Language) は、Web デザインにおける最も基本的な言語の 1 つであり、タグを使用して Web ドキュメントの構造を記述し、JavaScript は HTML ドキュメントのオブジェクトと属性にアクセスすることで HTML ドキュメント内のノードを変更できます。 。

ノードは HTML ドキュメントの構築単位であり、要素 (タグ)、属性、またはテキスト ノードになります。したがって、HTML ドキュメント内のノードを変更するには、まずノードのタイプを理解する必要があります。

要素ノードの変更

まず、要素ノードを変更する方法を見てみましょう。要素ノードは、開始タグと終了タグを持つ HTML タグを指します。たとえば、次のコード:

<div id="myDiv">这是一个div标签</div>

ここの div タグには id 属性があり、タグ内にテキスト コンテンツが含まれています。この要素を変更するには、次の手順に従います。

1. DOM (ドキュメント オブジェクト モデル) を通じてこの要素ノード オブジェクトを取得します。

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

2. 要素ノード内の属性またはサブノードを変更します。

myDiv.style.backgroundColor = "red";  // 修改背景颜色
myDiv.innerHTML = "这是经过修改后的内容";  // 修改文本内容

ここで使用される style 属性は要素ノードのスタイルを変更でき、innerHTML 属性は要素ノード内のテキスト コンテンツを変更できます。

3. 変更したノードをドキュメントに再挿入します。

let parentDiv = myDiv.parentNode;
parentDiv.replaceChild(myDiv, myDiv); // 将修改后的节点重新插入到文档中

ここで使用される replaceChild メソッドは、元のノードを変更されたノードに置き換えることができます。

属性ノードの変更

属性ノードを変更する方法を見てみましょう。属性ノードは、HTML タグ内の属性を参照します。たとえば、次のコード:

<img src="image.jpg" alt="这是一张图片">

ここの img タグには src 属性と alt 属性があります。この属性を変更するには、次の手順に従います。

1. DOM を通じてこの要素ノード オブジェクトを取得します。

let myImg = document.getElementsByTagName("img")[0];

2. 属性ノードの値を変更します。

myImg.src = "new_image.jpg";  // 修改src属性的值
myImg.alt = "新的图片描述文字";  // 修改alt属性的值

属性ノードの値はここで直接変更されます。

テキスト ノードを変更する

最後に、テキスト ノードを変更する方法を見てみましょう。テキスト ノードは、HTML タグ内のテキスト情報を参照します。たとえば、次のコード:

<p>这是一段文本</p>

ここの p タグにはテキストが含まれています。このテキストを変更するには、次の手順に従います。

1. DOM を通じて要素ノード オブジェクトを取得します。

let myP = document.getElementsByTagName("p")[0];
let myText = myP.childNodes[0];  // 获取文本节点

2. テキスト ノードの値を変更します。

myText.nodeValue = "这是经过修改后的文本";  // 修改文本内容

ここでテキスト ノードを取得した後、その nodeValue 属性が直接変更されます。

概要

上記は、JavaScript でノードを変更する方法です。ノードを変更するには、まず対応するノード オブジェクトを取得し、次に属性またはテキストを変更する必要があります。上記の方法により、HTML ドキュメントのさまざまなノードを柔軟に変更して、Web 開発のさまざまなニーズを実現できます。

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