Operasi simpul JavaScript yang komprehensif dalam satu artikel

Di halaman web kita, selain menggunakan metode yang disediakan oleh DOM untuk mendapatkan node, kita juga dapat menggunakan hubungan hierarki node untuk mendapatkan node. Ini relatif sederhana.

Ikhtisar Node

Semua konten di halaman web adalah sebuah node (label, atribut, teks, komentar, dll.), dan di DOM, node diwakili oleh node.
Semua node di pohon DOM HTML dapat diakses melalui JavaScript, dan semua elemen HTML (node) dapat dimodifikasi, dibuat, atau dihapus.

Secara umum, node memiliki setidaknya tiga atribut dasar: nodeType (tipe node), nodeName (nama node), dan nodeValue (nilai node).

• Elemen node nodeType adalah 1,
• atribut node nodeType adalah 2,
• dan node teks nodeType adalah 3 (node ​​teks mencakup teks, spasi, jeda baris, dll.)

Dalam pengembangan aktual kami, operasi node terutama beroperasi pada node elemen.

Tingkat node

menggunakan pohon DOM untuk membagi node ke dalam hubungan hierarki yang berbeda. Yang paling umum adalah hubungan hierarki orangtua-anak-saudara.

1. Node induk

node.parentNode

• Atribut parentNode dapat mengembalikan node induk dari sebuah node.
• Mengembalikan null jika node yang ditentukan tidak memiliki node induk.

<p kelas="induk">
        <p kelas="anak"></p>
    </p>
    <skrip>
        var anak = dokumen.querySelector(".son");
        console.log(son.parentNode);
    </skrip>

2. Node anak

1.node.childNodes (standar)

node.childNodes mengembalikan koleksi yang berisi node anak dari node yang ditentukan. Koleksi ini adalah koleksi yang segera diperbarui.

<ul>
        <li>Saya li</li>
        <li>Saya li</li>
        <li>Saya li</li>
        <li>Saya li</li>
    </ul>
    <skrip>
        var ul = dokumen.querySelector('ul');
        //Node anak childNodes Semua node anak, termasuk node elemen, node teks, dll.
        console.log(ul.childNodes);
    </skrip>

Mengapa ada lima node teks di sini? Mereka sebenarnya berhubungan dengan lima jeda baris.

Lima jeda baris ini adalah node teks, ditambah empat node elemen li, totalnya 9.

Catatan: Nilai yang dikembalikan berisi semua node anak, termasuk node elemen, node teks, dll.
Jika Anda hanya ingin memasukkan node elemen ke dalamnya, Anda perlu menanganinya secara khusus. Oleh karena itu, kami secara umum tidak menganjurkan penggunaan childNodes.

var ul = dokumen.querySelector('ul');
	for (var i = 0;i<ul.panjang;i++){
	    if (ul.childNodes[i].nodeType == 1){
	        console.log(ul.childNodes[i]);
	    }
	}

2.node.children (non-standar)

node.children adalah properti read-only yang mengembalikan semua node elemen turunan. Ini hanya mengembalikan node elemen anak, dan node lainnya tidak dikembalikan (inilah yang kami fokuskan).
Meskipun untuk anak-anak tidak standar, namun didukung oleh berbagai browser, sehingga kita dapat menggunakannya dengan percaya diri.

<ul>
        <li>Saya li</li>
        <li>Saya li</li>
        <li>Saya li</li>
        <li>Saya li</li>
    </ul>
    <skrip>
       var ul = dokumen.querySelector('ul');
       console.log(ul.anak-anak);
    </skrip>

3. Node anak pertama dan node anak terakhir

1.node pertama
2.node.lastChild
firstChild mengembalikan node anak pertama. Jika tidak dapat menemukannya, ia mengembalikan null. Demikian pula, semua node disertakan.

3.node.firstElementChild
firstElementChild mengembalikan node elemen anak pertama, atau null jika tidak ditemukan.
4.node.lastElementChild
lastElementChild mengembalikan node elemen anak terakhir, atau null jika tidak ditemukan.

Catatan: Kedua metode ini memiliki masalah kompatibilitas dan hanya didukung oleh IE9 dan yang lebih baru.

5.node.anak-anak[0]
5.node.children[node.children.length - 1]
Catatan: Tidak ada masalah kompatibilitas dengan metode penulisan pengembangan sebenarnya.

<ul>
        <li>Saya li</li>
        <li>Saya li</li>
        <li>Saya li</li>
        <li>Saya li</li>
    </ul>
    <skrip>
       var ul = dokumen.querySelector('ul');
       // 1. Baik itu node teks atau node elemen console.log(ul.firstChild);
       console.log(ul.lastChild);
       // 2. Mengembalikan node elemen mandiri yang sesuai. Hanya IE9 dan di atasnya yang mendukung console.log(ul.firstElementChild);
       console.log(ul.lastElementChild);
       // 3. Tidak ada masalah kompatibilitas console.log(ul.children[0]);
       console.log(ul.children[ul.children.length - 1]);
    </skrip>

4.Simpul saudara

1.simpul berikutnya
nextSibling mengembalikan simpul saudara berikutnya dari elemen saat ini, atau null jika tidak ditemukan. Demikian pula, semua node disertakan.
2.node.saudara sebelumnya
previousSibling mengembalikan simpul saudara sebelumnya dari elemen saat ini, atau null jika tidak ditemukan. Demikian pula, semua node disertakan.
3.node.nextElementSibling
nextElementSibling mengembalikan node elemen saudara berikutnya dari elemen saat ini. Jika tidak ditemukan, mengembalikan null.
4.node.ElementSibling sebelumnya
previousElementSibling mengembalikan simpul elemen saudara sebelumnya dari elemen saat ini, atau null jika tidak ditemukan.
Catatan: Kedua metode ini memiliki masalah kompatibilitas dan hanya didukung oleh IE9 dan yang lebih baru.

Jadi bagaimana cara merangkum fungsi yang memenuhi kompatibilitas dan dapat menemukan node elemen saudara?

function getNextElementSibling(element){
       var el = elemen;
       while(el = el.saudara berikutnya){
           if(el.nodeType == 1){
               kembalikan;
           }
       }
       kembalikan nol;
   }

Kode enkapsulasi di atas dapat diselesaikan, tetapi Anda tidak perlu terlalu banyak berpikir, karena browser IE akan berhenti melayani, jadi Anda hanya perlu mengingat node.nextElementSibling, dan Anda tidak perlu khawatir tentang kompatibilitas masalah.

Buat simpul

document.createElement (' tagName ')

Metode document.createElenent () membuat elemen Н TML yang ditentukan oleh tagName. Karena elemen-elemen ini awalnya tidak ada dan dihasilkan secara dinamis berdasarkan kebutuhan saya, kami juga disebut membuat elemen node secara dinamis .

Menambah node dan menambahkan node

1.node.appendChild(child)

Metode node.appendChild () menambahkan node ke akhir daftar node anak dari node induk yang ditentukan. Mirip dengan elemen semu setelahnya di CSS.

2.node.insertBefore(anak, elemen tertentu)

<ul></ul>
    <skrip>
        var ul = dokumen.querySelector("ul");
        var li =document.createElement("li");
        var span = dokumen.createElement("span")
        ul.appendChild(li);
        ul.insertBefore(span,ul.children[0]);
    </skrip>

Hapus node

node.removeChild(child)

Metode node.removeChild(child) menghapus node anak dari DOM dan mengembalikan node yang dihapus.

<ul>
        <li>aniu</li>
        <li>menikah</li>
        <li>tom</li>
    </ul>
    <skrip>
        var ul = dokumen.querySelector("ul");
        ul.removeChild(ul.anak-anak[2]);
    </skrip>

Salin simpul (simpul klon)

node.cloneNode ()

Metode node.cloneNode () mengembalikan salinan simpul yang memanggil metode ini. Disebut juga simpul klon/simpul penyalinan
1. Jika parameter braket kosong atau salah, itu adalah salinan dangkal, yaitu hanya node itu sendiri yang dikloning dan node anak di dalamnya tidak dikloning.
2. Jika parameter braket benar, itu adalah salinan dalam, yang akan menyalin node itu sendiri dan semua node turunannya.

<ul>
        <li>aniu</li>
        <li>menikah</li>
        <li>tom</li>
    </ul>
    <skrip>
        var ul = dokumen.querySelector("ul");
        var li1 = ul.children[0].cloneNode(); //Salinan dangkal var li2 = ul.children[0].cloneNode(true);
        ul.appendChild(li2);
    </skrip>