Pengumpulan poin pengetahuan JavaScript: mendapatkan elemen dan node

[Rekomendasi terkait: tutorial video javascript, web front-end]

Dapatkan elemen

• melalui ID ( getElementById )
• melalui atribut nama ( getElementsByName )
• melalui nama tag ( getElementsByTagName )
• melalui nama kelas ( getElementsByClassName )
• Dapatkan elemen melalui pemilih ( querySelector )
• melalui pemilih Sekelompok elemen ( querySelectorAll )
• metode untuk mendapatkan html ( document.documentElement )
• metode untuk mendapatkan isi ( document.body )

1. Dapatkan berdasarkan ID (getElementById)

// 1 Dapatkan simpul elemen // berdasarkan id (temukan elemen berdasarkan id, Peka huruf besar-kecil, jika ada beberapa id, hanya yang pertama yang akan ditemukan)
    dokumen.getElementById('p1');

• Konteksnya harus berupa dokumen.
• Parameter harus diteruskan. Parameter bertipe string dan digunakan untuk mendapatkan id elemen.
• Nilai yang dikembalikan hanya memperoleh satu elemen, dan mengembalikan null jika tidak ditemukan.

2. Temukan elemen berdasarkan nama kelas (getElementsByClassName)

// Cari elemen berdasarkan nama kelas. Pisahkan beberapa nama kelas dengan spasi untuk mendapatkan HTMLCollection (kumpulan elemen dengan atribut panjang, dan Anda dapat mengakses elemen di dalamnya melalui nomor indeks )
    var cls = dokumen.getElementsByClassName('a b');
    console.log(cls);

• Parameternya adalah nama kelas elemen.
• Nilai yang dikembalikan adalah array seperti array. Jika tidak ditemukan, array kosong akan dikembalikan

3. Melalui atribut nama (getElementsByName)

// Cari melalui atribut nama dan kembalikan NodeList (kumpulan node dengan atribut panjang yang dapat diakses melalui nomor indeks)
   var nm = dokumen.getElementsByName('c');
    console.log(nm);

4. Berdasarkan nama tag (getElementsByTagName)

// Temukan elemen berdasarkan nama tag dan kembalikan HTMLCollection
    document.getElementsByTagName('p');

• Parameternya adalah untuk mendapatkan atribut nama tag elemen, yang tidak peka huruf besar-kecil.
• Nilai yang dikembalikan adalah array kelas. Jika tidak ditemukan, array kosong akan dikembalikan.

5. Dapatkan elemen melalui pemilih (querySelector)

document.querySelector('.animated')

• adalah pemilih, seperti: "p. nama kelas".
• Kembalikan satu node, jika ada beberapa elemen yang cocok, kembalikan yang pertama

6. Dapatkan satu set elemen melalui pemilih (querySelectorAll)

document.querySelector('.animated')

• Nilai yang dikembalikan adalah array kelas

untuk mendapatkan node

di Model Objek Dokumen (DOM) ), setiap node adalah objek. Node DOM mempunyai tiga atribut penting

: 1. nodeName: nama node

2. nodeValue: nilai node

3. nodeType: tipe node

1. atribut nodeName: nama node yang bersifat read-only .

• NodeName dari node elemen sama dengan nama label.
• NodeName dari node atribut adalah nama atribut
• . NodeName dari node teks selalu #text.
• NodeName dari node dokumen selalu #document

2

Atribut

nodeValue: Nilai node.

• NodeValue dari node elemen tidak ditentukan atau nol.
• Node teks NodeValue adalah
• atribut teks dari node. NodeValue adalah nilai atribut

dari node, yang bersifat read-only. Tipe node yang umum digunakan berikut ini:

• Tipe elemen Tipe node
• Elemen 1
• Atribut 2
• Teks 3 Spasi juga mengembalikan 3
• Komentar 8
• Dokumen 9

Membuat sebuah node:

1. Membuat sebuah node: createElement('')

// Membuat sebuah elemen. Itu hanya dibuat dan tidak ditambahkan ke html. Ini perlu digunakan bersama dengan appendChild. P');
    elem.id = 'tes';
    elem.style = 'warna: merah';
    elem.innerHTML = 'Saya adalah node yang baru dibuat';
    document.body.appendChild(elem);

2. Sisipkan node: appendChild ()

• penggunaannya adalah: parent.appendChild(child)
akan menambahkan node
• anak
• ke akhir node induk
• dihapus. Tambahkan node baru di akhir, tetapi acara akan tetap ada

var oNewp=document.createElement("p");
      var oText=document.createTextNode("Halo Dunia");
      oNewp.appendChild(oText);

2-1. Sisipkan simpul:

• penggunaan insertBefore() adalah parent.insertBefore(newNode,refNode);

var oOldp=document.body.getElementsByTagName("p")[0];
      document.body.insertBefore(oNewp,oOldp);

Hapus node

1. Hapus node:

• penggunaan deleteChild adalah: parent.removeChild(child)
• Jika Anda menghapus node anak yang bukan elemen induk, kesalahan akan dilaporkan

var op=document .body.getElementsByTagName("p ")[0];
         op.parentNode.removeChild(op);

Node klon

1. Node klon: parent.cloneNode() node klon palsu atau benar

• (perlu menerima parameter untuk menunjukkan apakah akan menyalin elemen)

// Node klon (perlu menerima parameter untuk menunjukkan apakah akan menyalin elemen) elemen)
    var form = document.getElementById('test');
    var clone = form.cloneNode(benar);
    clone.id = 'tes2';
    document.body.appendChild(clone);

Ganti node

1. Ganti metode node node.replace(new,old)

var oOldp=document.body.getElementsByTagName("p")[0];
       oOldp.parentNode.replaceChild(oNewp,oOldp);

kotak fragmen dokumen

• : Saat menambahkan node dalam jumlah besar ke dokumen, akan sangat lambat jika ditambahkan satu per satu

sekaligus

• .
Sintaks
• :
• document.createDocumentFragment();

    {
        var start = Tanggal.sekarang();
        var str = '',li;
        var ul = dokumen.getElementById('ul');
        var fragment = dokumen.createDocumentFragment();
        untuk(var i=0; i<10000; i++)
        {
            li = dokumen.createElement('li');
            li.textContent = ''+i+'simpul anak ke-';
            fragment.appendChild(li);
        }
        ul.appendChild(fragmen);
        console.log('Memakan waktu:'+(Date.now()-start)+'milidetik'); // 63 milidetik})();

[Rekomendasi terkait: tutorial video javascript, front-end web]

Di atas adalah Poin pengetahuan JavaScript Atur detail perolehan elemen dan node. Untuk informasi lebih lanjut, harap perhatikan artikel terkait lainnya di jaringan kode sumber!