Pengumpulan mata pengetahuan JavaScript: mendapatkan elemen dan nod

Artikel ini membawakan anda pengetahuan yang berkaitan tentang javascript terutamanya kandungan yang berkaitan tentang mendapatkan elemen dan nod, termasuk mendapatkan elemen melalui id, nama kelas, nama dan nama teg , mencipta, memadam, pengklonan nod dan isu-isu lain, mari kita lihat bersama-sama, saya harap ia akan membantu semua orang.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Dapatkan elemen

• Dapatkan melalui ID (getElementById)
• Dengan atribut nama (getElementsByName)
• Dengan nama teg ( getElementsByTagName)
• Dapatkan elemen mengikut nama kelas (getElementsByClassName)
• Dapatkan elemen mengikut pemilih (querySelector) 🎜>Dengan memilih Dapatkan set elemen (
• querySelectorAll)
Dapatkan kaedah html (
• document.documentElement)
Dapatkan kaedah badan (
• dokumen .body)

1 Dapatkan melalui ID (getElementById)

// 1 获取元素节点
    // 通过id的方式( 通过id查找元素，大小写敏感，如果有多个id只找到第一个)
    document.getElementById('p1');

Konteks mestilah dokumen.
• Anda mesti lulus parameter Parameter adalah jenis rentetan dan digunakan untuk mendapatkan id elemen.
• Nilai pulangan hanya memperoleh satu elemen, dan mengembalikan null jika ia tidak ditemui.

2. Mengikut nama kelas (getElementsByClassName)

    // 通过类名查找元素，多个类名用空格分隔,得到一个HTMLCollection(一个元素集合，有length属性，可以通过索引号访问里面的某一个元素)
    var cls = document.getElementsByClassName('a b');
    console.log(cls);

Parameter ialah nama kelas bagi elemen.
• Nilai pulangan adalah seperti tatasusunan, jika tidak dijumpai, tatasusunan kosong dikembalikan

3 Melalui atribut nama (getElementsByName)

 // 通过name属性查找，返回一个NodeList(一个节点集合，有length属性，可以通过索引号访问)
   var nm =  document.getElementsByName('c');
    console.log(nm);

4. Melalui nama teg (getElementsByTagName)

    // 通过标签名查找元素 返回一个HTMLCollection
    document.getElementsByTagName('p');

Parameter adalah untuk mendapatkan atribut nama teg bagi elemen, yang bukan huruf besar. -sensitif.
• Nilai pulangan adalah seperti tatasusunan, jika tidak dijumpai, tatasusunan kosong dikembalikan

5 Dapatkan elemen melalui pemilih (querySelector)

document.querySelector('.animated')

Parameter ialah pemilih, seperti: "p .className".
• Mengembalikan satu nod, jika terdapat berbilang elemen padanan, mengembalikan yang pertama

6. Dapatkan set elemen melalui pemilih (querySelectorAll)

document.querySelector('.animated')

Nilai pulangan adalah seperti tatasusunan

Dapatkan nod

Dalam Model Objek Dokumen (DOM), setiap nod ialah sesuatu objek. Nod DOM mempunyai tiga atribut penting

1Nama nod: nama nod

2 Nilai nod

3 nodeJenis: jenis nod

1. nodeName atribut: nama. daripada nod, Ia adalah baca sahaja.

Nama nod nod elemen adalah sama dengan nama label
• Nama nod nod atribut ialah nama atribut
• Nama nodeName nod teks sentiasa #text
• NodeName nod dokumen sentiasa #document

2. atribut nodeValue: Nilai nod

Nilai nod nod elemen tidak ditentukan atau batal
• Nilai nod nod teks ialah teks itu sendiri
• Nilai nod nod atribut ialah nilai daripada atribut

3. atribut nodeType: jenis nod, Ia adalah baca sahaja. Jenis nod berikut yang biasa digunakan:

Jenis elemen Jenis nod
• Elemen 1
• Atribut 2
• Teks 3 Ruang Juga kembali 3
• Ulasan 8
• Dokumen 9

Buat nod:

1. Cipta nod: createElement('')

 // 创建元素，只是创建出来并未添加到html中，需要与appendChild 配合使用
    var elem = document.createElement('p');
    elem.id = 'test';
    elem.style = 'color: red';
    elem.innerHTML = '我是新创建的节点';
    document.body.appendChild(elem);

2. Sisipkan nod: appendChild ()

Penggunaan ialah: ibu bapa. appendChild(child)
• akan menambah nod anak kepada
• terakhir dalam induk
Jika nod anak sudah wujud, nod asal akan dialih keluar dan nod baharu akan ditambahkan. Nod mencapai penghujung, tetapi acara akan kekal

 var oNewp=document.createElement("p");
      var oText=document.createTextNode("World Hello");
      oNewp.appendChild(oText);

2-1 Sisipkan nod: insertBefore()

• 用法是 parent.insertBefore(newNode,refNode);

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

  删除节点

1.删除节点：removeChild

• 用法是：parent.removeChild(child) 
• 如果删除的不是父元素的子节点会报错

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

   克隆节点

1.克隆节点：parent.cloneNode() false 或者true

• 克隆节点（需要接受一个参数来表示是否复制元素）

  // 克隆节点（需要接受一个参数来表示是否复制元素）
    var form =  document.getElementById('test');
    var clone = form.cloneNode(true);
    clone.id = 'test2';
    document.body.appendChild(clone);

   替换节点

1.替换节点 方法node.replace(new,old) 

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

  文档碎片框 

• 作用：当向document中添加大量的节点时,如果逐个添加将会十分缓慢,这时可以使用文档碎片一次性添加到document中
• 语法：document.createDocumentFragment()；
• 承载节点

 (function()
    {
        var start = Date.now();
        var str = '', li;
        var ul = document.getElementById('ul');
        var fragment = document.createDocumentFragment();
        for(var i=0; i<10000; i++)
        {
            li = document.createElement('li');
            li.textContent = '第'+i+'个子节点';
            fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        console.log('耗时：'+(Date.now()-start)+'毫秒'); // 63毫秒
    })();

【相关推荐：javascript视频教程、web前端】

Atas ialah kandungan terperinci Pengumpulan mata pengetahuan JavaScript: mendapatkan elemen dan nod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!