Laman » Pengekodan » 15 Kaedah JavaScript Untuk Manipulasi DOM untuk Pembangun Web

    15 Kaedah JavaScript Untuk Manipulasi DOM untuk Pembangun Web

    Sebagai pemaju web, anda sering perlu memanipulasi DOM, model objek yang digunakan oleh penyemak imbas tentukan struktur logik halaman web, dan berdasarkan struktur ini kepada membuat elemen HTML pada skrin.

    HTML mentakrifkan struktur DOM lalai. Walau bagaimanapun dalam banyak kes anda mungkin mahu memanipulasi ini dengan JavaScript, biasanya untuk menambah fungsi tambahan ke laman web.

    IMAGE: Google Developers

    Dalam siaran ini, anda akan dapati senarai 15 kaedah JavaScript asas itu manipulasi DOM bantuan. Anda mungkin menggunakan kaedah ini dengan kerap dalam kod anda, dan anda juga akan bertemu dengan mereka dalam tutorial JavaScript kami.

    1. querySelector ()

    The querySelector () kaedah mengembalikan elemen pertama yang sepadan dengan satu atau lebih pemilih CSS. Sekiranya tiada perlawanan dijumpai, ia akan kembali null.

    Sebelum ini querySelector () diperkenalkan, pemaju meluas menggunakan getElementById () kaedah yang mengambil elemen dengan spesifikasi ID nilai.

    Walaupun getElementById () masih merupakan kaedah yang berguna, tetapi dengan yang lebih baru querySelector () dan querySelectorAll () kaedah kita bebas elemen sasaran berdasarkan mana-mana pemilih CSS, oleh itu kami mempunyai lebih banyak fleksibiliti.

    Sintaks
    var ele = document.querySelector (selector);
    • ele - Elemen sepadan pertama atau null (jika tiada unsur sepadan dengan pemilih)
    • pemilih - satu atau lebih pemilih CSS, seperti "#fooId", ".fooClassName", ".class1.class2", atau ".class1, .class2"
    Contoh Kod

    Dalam contoh ini, yang pertama

    dipilih dengan querySelector () kaedah dan warnanya berubah menjadi merah.

     
    perenggan satu
     
    perenggan dua
     
    div satu
     
    perenggan tiga
     
    div dua
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'red';
    Demo Interaktif

    Uji querySelector () kaedah dalam demo interaktif berikut. Catat pemilih yang sepadan dengan yang anda dapati di dalam kotak biru (mis. #three), dan klik butang Pilih. Perhatikan bahawa jika anda menaip .blok, hanya contoh pertama akan dipilih.

    2. querySelectorAll ()

    Tidak seperti querySelector () yang mengembalikan hanya contoh pertama semua elemen yang sepadan, querySelectorAll () mengembalikan semua elemen yang sepadan dengan pemilih CSS yang ditentukan.

    Unsur yang sepadan dikembalikan sebagai a NodeList objek yang akan menjadi objek kosong jika tiada elemen padanan yang dijumpai.

    Sintaks
    var eles = document.querySelectorAll (selector);
    • eles - A NodeList objek dengan semua elemen yang sesuai sebagai nilai harta. Objek kosong jika tiada padanan ditemui.
    • pemilih - satu atau lebih pemilih CSS, seperti "#fooId", ".fooClassName", ".class1.class2", atau ".class1, .class2"
    Contoh Kod

    Contoh di bawah menggunakan HTML yang sama seperti sebelumnya. Walau bagaimanapun, dalam contoh ini, semua perenggan dipilih dengan querySelectorAll (), dan berwarna biru.

     
    perenggan satu
     
    perenggan dua
     
    div satu
     
    perenggan tiga
     
    div dua
     
     var paragraf = document.querySelectorAll ('p'); untuk (var p perenggan) p.style.color = 'blue';

    3. addEventListener ()

    Peristiwa rujuk kepada apa yang berlaku kepada elemen HTML, seperti mengklik, memfokus, atau memuatkan, yang mana kita boleh bertindak balas dengan JavaScript. Kita boleh menetapkan fungsi JS ke mendengar untuk peristiwa-peristiwa ini dalam unsur-unsur dan melakukan sesuatu apabila peristiwa itu berlaku.

    Terdapat tiga cara yang anda boleh memberikan fungsi kepada acara tertentu.

    Jika foo () adalah fungsi tersuai, anda boleh mendaftarkannya sebagai pendengar acara klik (memanggilnya apabila elemen butang diklik) dalam tiga cara:

    1.  
    2.  var btn = document.querySelector ('button'); btn.onclick = foo;
    3.  var btn = document.querySelector ('button'); btn.addEventListener ('klik', foo);

    Cara addEventListener () (penyelesaian ketiga) ada beberapa kebaikan; ia adalah piawai terkini - yang membolehkan tugasan lebih daripada satu fungsi sebagai pendengar acara kepada satu acara - dan dilengkapi dengan set pilihan yang berguna.

    Sintaks
    ele.addEventListener (evt, pendengar, [pilihan]);
    • ele - Elemen HTML pendengar acara akan didengar.
    • evt - Acara yang disasarkan.
    • pendengar - Biasanya, fungsi JavaScript.
    • pilihan - (pilihan) Objek dengan satu set sifat boolean (disenaraikan di bawah).
    Pilihan Apa yang berlaku, apabila ia ditetapkan benar?
    tangkap

    Menghentikan peristiwa menggelegak, iaitu menghalang memanggil mana-mana pendengar acara untuk jenis peristiwa yang sama dalam nenek moyang elemen.

    Untuk menggunakan ciri ini, anda boleh menggunakan 2 sintaks:

    1. ele.addEventListener (evt, pendengar, benar)
    2. ele.addEventListener (evt, pendengar, capture: true);
    sekali

    Pendengar hanya dipanggil kali pertama peristiwa berlaku, maka ia secara automatik terpisah daripada peristiwa, dan tidak akan dicetuskan olehnya lagi.
    pasif

    Tindakan lalai acara tidak dapat dihentikan dengan metode preventDefault ().
    Contoh Kod

    Dalam contoh ini, kami menambah pendengar acara klik dipanggil foo, kepada 

     var btn = document.querySelector ('button'); btn.addEventListener ('klik', foo); fungsi foo () alert ('hello');
    Demo Interaktif

    Berikan foo () fungsi tersuai sebagai pendengar peristiwa kepada mana-mana tiga peristiwa berikut: input, klik atau tetikus & mencetuskan peristiwa yang dipilih dalam medan input bawah dengan melayang, mengklik atau menaip di dalamnya.

    4. removeEventListener ()

    The removeEventListener () kaedah membongkar pendengar acara sebelum ini ditambah dengan addEventListener () kaedah dari acara yang sedang didengarkan.

    Sintaks
    ele.removeEventListener (evt, pendengar, [opsyen]);

    Menggunakan sintaks yang sama seperti yang disebutkan di atas addEventListener () kaedah (kecuali untuk sekali pilihan yang dikecualikan). Pilihannya digunakan untuk menjadi sangat spesifik tentang mengenal pasti pendengar yang terpencil.

    Contoh Kod

    Mengikuti Contoh Kod yang kami gunakan di addEventListener (), di sini kami mengalih keluar pendengar acara klik dipanggil foo daripada