JavaScript を使用して DOM ノードを変更する方法

Web アプリケーションの開発では、JavaScript が不可欠な部分になりました。 JavaScript を使用すると、Web コンテンツを変更し、動的な効果を実現できます。その中でも、DOM の変更は Web ページを操作するための鍵となるため、非常に重要な部分です。

DOM とは何ですか?
DOM はドキュメント オブジェクト モデルであり、HTML ドキュメントのツリー構造表現です。このドキュメントでは、各 HTML 要素は、、

、

などのノードです。これらのノードは子ノードと属性を持つことができます。たとえば、ノード

には子ノード を含めることができ、クラス、ID などの属性も含めることができます。 JavaScript はこれらのノードを操作して Web ページのコンテンツを変更します。

ノードを選択するにはどうすればよいですか?
DOM を操作するには、ノードを選択する必要があります。これはさまざまな方法で実現できますが、主に次の方法があります。

1. ID によるノードの選択

document.getElementById() メソッドを使用して、以下に基づいてノードを選択します。指定された ID ノードを選択します。以下に示すように:

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

上記のコードは、id="myNode" を持つ HTML 要素を選択します。

2. クラスによるノードの選択

同じクラス属性を持つ 1 つ以上のノードを選択するには、getElementsByClassName() メソッドを使用できます。以下に示すように:

var myNodes = document.getElementsByClassName("classNode");

上記のコードは、クラス属性が「classNode」と等しいすべての HTML 要素を選択します。

3. タグ名によるノードの選択

指定したタグ名を持つすべてのノードを選択するには、getElementsByTagName() メソッドを使用できます。以下に示すように:

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

上記のコードは、ドキュメント内のすべての

タグを選択します。

DOM ノード属性の操作
DOM ノードには、ID、クラス、タイトルなどの多くの属性があります。 JavaScript を通じてこれらのプロパティの値を変更または取得できます。一般的に使用される DOM ノード属性の操作メソッドの一部を次に示します。

1. innerHTML 属性の取得または設定

getInnerHTML() メソッドを使用して、次の DOM ノード属性の innerHTML 属性を取得できます。ノード。 setInnerHTML() メソッドを使用して、ノードの innerHTML プロパティを設定することもできます。以下に示すように:

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

// 获取节点的innerHTML属性
var myNodeInnerHTML = myNode.innerHTML;

// 设置节点的innerHTML属性
myNode.innerHTML = "新的HTML内容";

2. innerText プロパティの取得または設定

getInnerText() メソッドを使用して innerText プロパティを取得し、setInnerText() を使用して innerText プロパティを設定します。方法。以下に示すように:

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

// 获取节点的innerText属性
var myNodeInnerText = myNode.innerText;

// 设置节点的innerText属性
myNode.innerText = "新的文本内容";

3. nodeType 属性の取得または設定

NodeType 属性は現在のノードのタイプを返します。getNodeType() メソッドを使用して取得できます。ノードのnodeType属性。 setNodeType() メソッドを使用して、ノードの nodeType 属性を設定することもできます。以下に示すように:

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

// 获取节点的nodeType属性
var myNodeType = myNode.nodeType;

// 设置节点的nodeType属性
myNode.nodeType = 1;

4. nodeName 属性の取得または設定

nodeName 属性はノードの名前を返します。getnodeName() メソッドを使用して取得できます。ノードのnodeName属性。 setnodeName() メソッドを使用して、ノードの nodeName 属性を設定することもできます。以下に示すように:

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

// 获取节点的nodeName属性
var myNodeName = myNode.nodeName;

// 设置节点的nodeName属性
myNode.nodeName = "span";

5. nodeValue プロパティの取得または設定

nodeValue プロパティはノードの値を返すか設定します。 nodeValue プロパティは、getNodeValue() メソッドを使用して取得できます。プロパティ値を設定するには、setNodeValue() メソッドを使用します。以下に示すように:

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

// 获取节点的nodeValue属性
var myNodeValue = myNode.nodeValue;

// 设置节点的nodeValue属性
myNode.nodeValue = "新的节点内容";

6. className 属性の取得または設定

className 属性は、ノードのクラス名を返すか、設定します。 className 属性は、getclassName() メソッドを使用して取得できます。属性値を設定するには、setclassName() メソッドを使用できます。以下に示すように:

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

// 获取节点的className属性
var myClassName = myNode.className;

// 设置节点的className属性
myNode.className = "newClass";

7. id ​​属性の取得または設定

id ​​属性はノードの ID を返すか設定します。 id 属性は getId() メソッドを使用して取得できます。属性値を設定するには、setId() メソッドを使用できます。以下に示すように:

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

// 获取节点的id属性
var myId = myNode.id;

// 设置节点的id属性
myNode.id = "newNode";

DOM ノードの作成と挿入
DOM ノード属性の変更に加えて、DOM ノードを作成して既存の DOM 構造に挿入することもできます。

DOM ノードの作成
DOM ノードを作成するには、createElement() メソッドを使用できます。以下に示すように:

// 创建一个新的 <p> 元素
var newNode = document.createElement("p");

// 设置元素的内容
newNode.innerHTML = "新的 HTML 内容";

// 将新元素添加到文档中
document.body.appendChild(newNode);</p>

DOM ノードの挿入
DOM ノードを挿入するには次の点があります:

1. 親ノードの挿入
   appendChild() メソッドを使用して追加します。要素を親ノードの末尾まで追加します。以下に示すように:

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

// 创建新的 

 元素 var newNode = document.createElement("li"); // 设置元素的内容 newNode.innerHTML = "新的列表项"; // 将新元素添加到父节点的末尾 parent.appendChild(newNode);

2. 兄弟ノードの挿入
   insertBefore() メソッドを使用して、別のノードの前に新しいノードを挿入します。以下に示すように:

var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 将新元素添加到 "node" 元素之前
parent.insertBefore(newNode, node);

3. ノードの置換
   replaceChild() メソッドを使用してノードを置換します。以下に示すように:

var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 替换父节点下的第二个子节点
parent.replaceChild(newNode, parent.childNodes[1]);

DOM ノードの削除
DOM ノードはさまざまな方法で削除できます。一般的に使用されるメソッドの一部を次に示します。

1. 子ノードの削除
   removeChild() メソッドを使用して、子ノードを削除します。以下に示すように:

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

// 移除 "node" 元素
parent.removeChild(node);

2. 自身を削除
   remove() メソッドを使用してノード自体を削除します。以下に示すように:

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

// 移除节点本身
node.remove();

概要
JavaScript を使用して DOM を操作すると、HTML タグやテキスト コンテンツを含む Web ページのコンテンツを簡単に変更できます。ノードの選択、ノードのプロパティの変更、新しい要素の作成と挿入、既存のノードの削除を行うことができます。これらの操作により、Web サイトが動的に更新され、ユーザーの行動に応答できるようになります。

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