Cara mengubah suai nod DOM menggunakan JavaScript

Dengan pembangunan aplikasi web, JavaScript telah menjadi bahagian penting. JavaScript boleh digunakan untuk mengubah suai kandungan web dan mencapai kesan dinamik. Antaranya, mengubah suai DOM adalah bahagian yang sangat penting kerana ia adalah kunci untuk berinteraksi dengan halaman web.

Apakah itu DOM?
DOM ialah Model Objek Dokumen, yang merupakan perwakilan struktur pokok bagi dokumen HTML. Dalam dokumen ini, setiap elemen HTML ialah nod, seperti: , ,

, dsb. Nod ini boleh mempunyai nod dan atribut anak Contohnya, nod

boleh mengandungi nod anak , dan ia juga boleh mempunyai atribut, seperti kelas, id, dsb. JavaScript mengubah kandungan halaman web dengan memanipulasi nod ini.

Bagaimana untuk memilih nod?
Untuk memanipulasi DOM, kita perlu memilih nod. Ini boleh dicapai dalam pelbagai cara, terutamanya kaedah berikut:

1. Pilih nod mengikut id

Gunakan kaedah document.getElementById() untuk memilih nod berdasarkan id yang ditentukan Pilih nod. Seperti yang ditunjukkan di bawah:

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

Kod di atas akan memilih elemen HTML dengan id="myNode".

2. Pilih nod mengikut kelas

Untuk memilih satu atau lebih nod dengan atribut kelas yang sama, anda boleh menggunakan kaedah getElementsByClassName(). Seperti yang ditunjukkan di bawah:

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

Kod di atas akan memilih semua elemen HTML yang atribut kelasnya sama dengan "classNode".

3. Pilih nod mengikut nama teg

Untuk memilih semua nod dengan nama teg yang ditentukan, anda boleh menggunakan kaedah getElementsByTagName(). Ia kelihatan seperti ini:

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

Kod di atas akan memilih semua

Pengendalian atribut nod DOM
Nod DOM mempunyai banyak atribut, seperti: id, kelas, tajuk, dsb. Kami boleh mengubah suai atau mendapatkan nilai sifat ini melalui JavaScript. Berikut ialah beberapa kaedah manipulasi atribut nod DOM yang biasa digunakan:

1. Dapatkan atau tetapkan atribut innerHTML

Anda boleh menggunakan kaedah getInnerHTML() untuk mendapatkan atribut innerHTML bagi nod. Anda juga boleh menggunakan kaedah setInnerHTML() untuk menetapkan sifat innerHTML nod. Seperti yang ditunjukkan di bawah:

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

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

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

2. Mendapatkan atau menetapkan sifat innerText

Mendapatkan sifat innerText boleh menggunakan kaedah getInnerText() dan menetapkan sifat innerText menggunakan kaedah setInnerText(). Seperti yang ditunjukkan di bawah:

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

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

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

3. Dapatkan atau tetapkan atribut nodeType

Atribut nodeType mengembalikan jenis nod semasa Anda boleh menggunakan kaedah getNodeType(). untuk mendapatkan atribut nodeType nod. Anda juga boleh menggunakan kaedah setNodeType() untuk menetapkan atribut nodeType sesuatu nod. Seperti yang ditunjukkan di bawah:

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

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

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

4. Dapatkan atau tetapkan atribut nodeName

Atribut nodeName mengembalikan nama nod Anda boleh menggunakan kaedah getnodeName() untuk dapatkan atribut nodeName bagi nod. Anda juga boleh menggunakan kaedah setnodeName() untuk menetapkan atribut nodeName sesuatu nod. Seperti yang ditunjukkan di bawah:

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

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

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

5. Dapatkan atau tetapkan atribut nodeValue

Atribut nodeValue mengembalikan atau menetapkan nilai nod. Sifat nodeValue boleh diperoleh menggunakan kaedah getNodeValue(). Untuk menetapkan nilai harta, gunakan kaedah setNodeValue(). Seperti yang ditunjukkan di bawah:

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

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

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

6. Dapatkan atau tetapkan atribut className

Atribut className mengembalikan atau menetapkan nama kelas nod. Atribut className boleh diperoleh menggunakan kaedah getclassName(). Untuk menetapkan nilai atribut anda boleh menggunakan kaedah setclassName(). Seperti yang ditunjukkan di bawah:

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

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

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

7. Dapatkan atau tetapkan atribut id

Atribut id mengembalikan atau menetapkan id nod. Atribut id boleh diperoleh menggunakan kaedah getId(). Untuk menetapkan nilai atribut anda boleh menggunakan kaedah setId(). Seperti yang ditunjukkan di bawah:

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

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

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

Penciptaan dan Penyisipan Nod DOM
Selain mengubah suai sifat nod DOM, anda juga boleh mencipta nod DOM dan memasukkannya ke dalam struktur DOM sedia ada.

Buat nod DOM
Untuk mencipta nod DOM, anda boleh menggunakan kaedah createElement(). Seperti yang ditunjukkan di bawah:

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

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

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

Sisipkan nod DOM
Terdapat titik berikut untuk memasukkan nod DOM:

1. Sisipkan nod induk
   Gunakan kaedah appendChild() kepada Elemen ditambah pada penghujung nod induk. Seperti yang ditunjukkan di bawah:

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

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

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

// 将新元素添加到父节点的末尾
parent.appendChild(newNode);

2. Sisipkan sibling nod
   Gunakan kaedah insertBefore() untuk memasukkan nod baharu sebelum nod lain. Seperti yang ditunjukkan di bawah:

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

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

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

3. Ganti Nod
   Gunakan kaedah replaceChild() untuk menggantikan nod. Seperti yang ditunjukkan di bawah:

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

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

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

Pengalihan keluar nod DOM
Nod DOM boleh dialih keluar dalam pelbagai cara. Berikut ialah beberapa kaedah yang biasa digunakan:

1. Mengalih keluar nod anak
   Gunakan kaedah removeChild() untuk mengalih keluar nod anak. Seperti yang ditunjukkan di bawah:

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

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

2. Mengalih keluar dirinya sendiri
   Nod itu sendiri boleh dialih keluar menggunakan kaedah remove(). Seperti yang ditunjukkan di bawah:

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

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

Ringkasan
Dengan memanipulasi DOM dengan JavaScript, kandungan halaman web, termasuk penanda HTML dan kandungan teks, boleh diubah suai dengan mudah. Kita boleh memilih nod, menukar sifat nod, mencipta dan memasukkan elemen baharu dan memadamkan nod sedia ada. Operasi ini membolehkan tapak web mengemas kini dan bertindak balas secara dinamik kepada tingkah laku pengguna.

Atas ialah kandungan terperinci Cara mengubah suai nod DOM menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!