Apakah cara untuk mencipta nod dalam javascript-Soal Jawab bahagian hadapan-php.cn

Apakah cara untuk mencipta nod dalam javascript

青灯夜游

Lepaskan： 2021-10-13 17:00:45

asal

14999 orang telah melayarinya

Kaedah untuk mencipta nod dalam JavaScript: 1. Kaedah createElement() boleh mencipta nod elemen; 2. Kaedah createTextNode() boleh mencipta nod teks 3. Kaedah createAttribute() boleh mencipta nod atribut.

Apakah cara untuk mencipta nod dalam javascript

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Kaedah untuk mencipta nod dalam javascript

kaedah createElement(): Cipta nod elemen

Gunakan kaedah createElement() objek dokumen untuk mencipta nod elemen baharu berdasarkan nama teg yang ditentukan oleh parameter dan kembalikan rujukan kepada elemen yang baru dibuat. Penggunaannya adalah seperti berikut:

var element = document.getElement("tagName");

Salin selepas log masuk

Antaranya, elemen mewakili rujukan kepada elemen baharu, dan createElement() ialah kaedah objek dokumen Kaedah ini hanya mempunyai satu parameter, yang digunakan untuk nyatakan nama tag bagi elemen yang dibuat.

[Contoh 1] Kod berikut mencipta tanda perenggan p dalam dokumen semasa dan menyimpannya dalam pembolehubah p. Oleh kerana pembolehubah ini mewakili nod elemen, nilai atribut nodeTypenya adalah sama dengan 1 dan nilai atribut nodeNamenya adalah sama dengan p.

var p = document.createElement("p");  //创建段落元素
var info = "nodeName:" + p.nodeName;  //获取元素名称
info += ", nodeType:" + p.nodeType;  //获取元素类型，如果为1则表示元素节点
console.log(info);

Salin selepas log masuk

Elemen baharu yang dibuat menggunakan kaedah createElement() tidak akan ditambahkan secara automatik pada dokumen. Jika anda ingin menambah elemen ini pada dokumen, anda juga perlu menggunakan kaedah appendChild(), insertBefore() atau replaceChild().

[Contoh 2] Kod berikut menunjukkan cara menambah elemen p yang baru dicipta pada elemen badan. Apabila elemen ditambahkan pada pepohon dokumen, ia dipaparkan serta-merta.

var p = document.createElement("p");  //创建段落元素
document.body.appendChild(p);  //增加段落元素到body元素下

Salin selepas log masuk

2. kaedah createTextNode(): Cipta nod teks

Gunakan kaedah createTextNode() bagi objek dokumen untuk mencipta nod teks. Penggunaannya adalah seperti berikut:

document.createTextNode(data)

Salin selepas log masuk

Data parameter mewakili rentetan.

Contoh

Contoh berikut mencipta elemen div baharu, menetapkan nilai kelasnya kepada merah dan kemudian menambahkannya pada dokumen.

var element = document.createElement("div");
element.className = "red";
document.body.appendChild(element);

Salin selepas log masuk

Disebabkan oleh operasi DOM dan sebab lain, nod teks mungkin tidak mengandungi teks atau dua nod teks mungkin muncul berturut-turut. Untuk mengelakkan situasi ini, kaedah normalize() biasanya dipanggil pada elemen induk untuk memadamkan nod teks kosong dan menggabungkan nod teks bersebelahan.

3. kaedah createAttribute(): Cipta nod atribut

Gunakan kaedah createAttribute() objek dokumen untuk mencipta nod atribut adalah seperti berikut:

document.createAttribute(name)

Salin selepas log masuk

Nama parameter mewakili nama atribut yang baru dibuat.

Contoh 1

Contoh berikut mencipta nod atribut dengan penjajaran nama dan pusat nilai, kemudian menetapkan penjajaran atribut untuk label

, dan akhirnya menggunakan 3 masing-masing Kaedah ini membaca nilai penjajaran atribut.

<div id="box">document.createAttribute(name)</div>
<script>
    var element = document.getElementById("box");
    var attr = document.createAttribute("align");
    attr.value = "center";
    element.setAttributeNode(attr);
    console.log(element.attributes["align"].value);  //"center"
    console.log(element.getAttributeNode("align").value);  //"center"
    console.log(element.getAttribute("align"));  //"center"
</script>

Salin selepas log masuk

Nod atribut biasanya terletak dalam teg kepala elemen. Senarai atribut elemen dimuatkan dengan maklumat elemen dan disimpan dalam tatasusunan bersekutu. Sebagai contoh, ambil struktur HTML berikut.

<div id="div1" title="div"></div>

Salin selepas log masuk

Apabila DOM dimuatkan, pembolehubah divElement yang mewakili elemen div HTML akan secara automatik menjana koleksi berkaitan yang mendapatkan semula atribut ini sebagai pasangan nilai-nama.

divElement.attributes = {
    id : "div1",
    class : "style1",
    lang : "en",
    title : "div"
}

Salin selepas log masuk

Dalam DOM tradisional, sintaks titik biasanya digunakan untuk mengakses atribut HTML secara langsung melalui elemen, seperti img.src, a.href, dll. Walaupun kaedah ini tidak standard, ia disokong oleh semua pelayar.

Contoh 2

Elemen img mempunyai atribut src, dan semua objek imej mempunyai atribut skrip src, yang dikaitkan dengan atribut src HTML. Kedua-dua penggunaan di bawah berfungsi dengan baik dalam penyemak imbas yang berbeza.

<img id="img1" src="" />
<script>
    var img = document.getElementById("img1");
    img.setAttribute("src", "http://www.w3.org");  //HTML 属性
    img.src = "http://www.w3.org";  //JavaScript 属性
</script>

Salin selepas log masuk

Begitu juga, terdapat onclick, gaya dan href, dsb. Untuk memastikan bahawa skrip JavaScript boleh berfungsi dengan baik dalam penyemak imbas yang berbeza, adalah disyorkan untuk menggunakan penggunaan standard, dan banyak atribut HTML tidak dipetakan oleh JavaScript, jadi ia tidak boleh dibaca dan ditulis secara langsung melalui atribut skrip.

[Pembelajaran yang disyorkan: Tutorial JavaScript Lanjutan]

Atas ialah kandungan terperinci Apakah cara untuk mencipta nod dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!