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);

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

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

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

// 创建新的 <li> 元素
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 サイトの他の関連記事を参照してください。