Tingkatkan kemahiran JavaScript anda: Fahami perkara yang dilakukan oleh pemilih dan masa untuk menggunakannya

. mempunyai untuk pembangun Salah satu kemahiran. Pemilih boleh mengawal dan mengendalikan elemen dalam dokumen HTML dengan mudah, membolehkan kami memilih dan mengendalikan elemen tertentu dengan tepat mengikut keperluan. Artikel ini akan memperkenalkan pemilih biasa, ciri-ciri mereka dan senario yang berkenaan serta memberikan contoh kod khusus untuk membantu anda menguasai kemahiran penting ini dengan lebih baik.

1. Pemilih asas:

Pemilih berdasarkan ID (document.getElementById): Pilih elemen berdasarkan atribut ID mereka dan kembalikan objek elemen unik.
Contoh kod:

let element = document.getElementById('myId');

Senario yang berkenaan: Pemilih ini boleh digunakan apabila kita perlu mengendalikan elemen tertentu dan elemen tersebut mempunyai atribut ID yang unik.

1. Pemilih berdasarkan nama teg (document.getElementsByTagName): Pilih elemen berdasarkan nama tegnya dan kembalikan tatasusunan objek elemen.
   Contoh kod:

   let elements = document.getElementsByTagName('div');

   Salin selepas log masuk

   Senario yang berkenaan: Pemilih ini boleh digunakan apabila kita perlu memilih satu atau lebih elemen dengan nama tag yang sama.

2. Pemilih berdasarkan nama kelas (document.getElementsByClassName): Memilih elemen berdasarkan nama kelasnya dan mengembalikan tatasusunan objek elemen.
   Contoh kod:

   let elements = document.getElementsByClassName('myClass');

   Salin selepas log masuk

   Senario yang berkenaan: Pemilih ini boleh digunakan apabila kita perlu memilih satu atau lebih elemen dengan nama kelas yang sama.

3. 2. Pemilih lanjutan:
   

   Pemilih atribut (querySelector): Memilih elemen berdasarkan atributnya dan mengembalikan objek elemen pertama yang dipilih.
Contoh kod:

let element = document.querySelector('input[type=text]');

Senario yang berkenaan: Pemilih ini boleh digunakan apabila kita perlu memilih elemen dengan atribut atau nilai atribut tertentu.

1. Pemilih serupa dengan pemilih CSS (querySelectorAll): Pilih elemen berdasarkan sintaks yang serupa dengan pemilih CSS dan kembalikan tatasusunan objek elemen.
   Contoh kod:

   let elements = document.querySelectorAll('.myClass');

   Salin selepas log masuk

   Senario yang berkenaan: Pemilih ini boleh digunakan apabila kita perlu memilih elemen mengikut peraturan pemilih CSS yang kompleks.

2. 3. Pemilih digabungkan dengan atribut lain:
   

   Pemilih elemen anak (parentNode.children): Memilih elemen anak langsung bagi elemen dan mengembalikan susunan objek elemen.
Contoh kod:

let parentElement = document.getElementById('parent');
let elements = parentElement.children;

Senario yang berkenaan: Apabila kita perlu memilih elemen anak langsung sesuatu elemen, kita boleh menggunakan pemilih ini.

1. Pemilih elemen turunan (querySelectorAll): Memilih semua elemen turunan elemen dan mengembalikan tatasusunan objek elemen.
   Contoh kod:

   let elements = document.querySelectorAll('#parent span');

   Salin selepas log masuk

   Senario yang berkenaan: Pemilih ini boleh digunakan apabila kita perlu memilih semua unsur turunan sesuatu elemen.

2. 4. Penggunaan lanjutan:
   

   Pemilih kelas pseudo: Tambah kelas pseudo berdasarkan pemilih untuk memilih elemen mengikut syarat khas.
Contoh kod:

let element = document.querySelector('a:hover');

Senario yang berkenaan: Pemilih ini boleh digunakan apabila kita perlu memilih elemen apabila tetikus melayang di atasnya.

1. Pemilih adik beradik seterusnya (Sibling seterusnya): Memilih semua elemen adik beradik bersebelahan selepas elemen (tidak termasuk elemen sendiri).
   Contoh kod:

   let siblings = element.nextSibling;

   Salin selepas log masuk

   Senario yang berkenaan: Apabila kita perlu memilih elemen adik beradik bersebelahan selepas elemen, kita boleh menggunakan pemilih ini.

2. Pemilih elemen induk (parentNode): Pilih elemen induk langsung unsur.
   Contoh kod:

   let parentElement = element.parentNode;

   Salin selepas log masuk

   Senario yang berkenaan: Apabila kita perlu memilih elemen induk langsung sesuatu elemen, kita boleh menggunakan pemilih ini.

3. Ringkasan:
   Dengan membiasakan diri dan memahami ciri-ciri dan senario yang boleh digunakan bagi pelbagai pemilih, kami boleh memilih dan mengendalikan elemen dalam dokumen HTML dengan lebih tepat. Pemilih adalah kemahiran yang amat diperlukan dan penting dalam pembangunan JavaScript Melalui latihan dan pembelajaran berterusan, kami boleh meningkatkan kemahiran JavaScript kami dan membangunkan aplikasi web dengan lebih cekap. Saya harap contoh kod yang disediakan dalam artikel ini dapat membantu anda menguasai penggunaan pemilih dengan lebih baik dan meningkatkan lagi kemahiran JavaScript anda.

Atas ialah kandungan terperinci Tingkatkan kemahiran JavaScript anda: Fahami perkara yang dilakukan oleh pemilih dan masa untuk menggunakannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!