Bagaimana Anda memilih elemen dalam javascript?

Question

Metode Document querySelector() mengembalikan Element pertama dalam dokumen yang cocok dengan pemilih tertentu, atau grup pemilih. Jika tidak ditemukan kecocokan, ________16______ dikembalikan

Table of Contents Show

Bagaimana Anda memilih elemen?
Apa itu pilih () dalam JavaScript?
Bagaimana cara menggunakan opsi pilih dalam JavaScript?
Bagaimana cara memilih semua elemen dalam JavaScript?

Catatan. Pencocokan dilakukan menggunakan traversal pre-order depth-first dari node dokumen dimulai dengan elemen pertama dalam markup dokumen dan iterasi melalui node berurutan berdasarkan urutan jumlah node anak

querySelector(selectors)

selectors

Sebuah string yang berisi satu atau lebih pemilih untuk dicocokkan. String ini harus berupa string pemilih CSS yang valid; . Lihat Menemukan elemen DOM menggunakan pemilih untuk selengkapnya tentang pemilih dan cara mengelolanya

Catatan. Karakter yang bukan bagian dari sintaks CSS standar harus di-escape menggunakan karakter garis miring terbalik. Karena JavaScript juga menggunakan pelolosan garis miring terbalik, berhati-hatilah saat menulis literal string menggunakan karakter ini. Lihat untuk informasi lebih lanjut

Objek Element_ yang mewakili elemen pertama dalam dokumen yang cocok dengan kumpulan pemilih CSS yang ditentukan, atau null dikembalikan jika tidak ada yang cocok

Jika Anda memerlukan daftar semua elemen yang cocok dengan pemilih yang ditentukan, Anda harus menggunakan

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log("#foo\bar"); // "#fooar" (\b is the backspace control character)
  document.querySelector("#foo\bar"); // Does not match anything

  console.log("#foo\\bar"); // "#foo\bar"
  console.log("#foo\\\\bar"); // "#foo\\bar"
  document.querySelector("#foo\\\\bar"); // Match the first div

  document.querySelector("#foo:bar"); // Does not match anything
  document.querySelector("#foo\\:bar"); // Match the second div
</script>

3 sebagai gantinya

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log("#foo\bar"); // "#fooar" (\b is the backspace control character)
  document.querySelector("#foo\bar"); // Does not match anything

  console.log("#foo\\bar"); // "#foo\bar"
  console.log("#foo\\\\bar"); // "#foo\\bar"
  document.querySelector("#foo\\\\bar"); // Match the first div

  document.querySelector("#foo:bar"); // Does not match anything
  document.querySelector("#foo\\:bar"); // Match the second div
</script>

0

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log("#foo\bar"); // "#fooar" (\b is the backspace control character)
  document.querySelector("#foo\bar"); // Does not match anything

  console.log("#foo\\bar"); // "#foo\bar"
  console.log("#foo\\\\bar"); // "#foo\\bar"
  document.querySelector("#foo\\\\bar"); // Match the first div

  document.querySelector("#foo:bar"); // Does not match anything
  document.querySelector("#foo\\:bar"); // Match the second div
</script>

5

Dilempar jika sintaks pemilih yang ditentukan tidak valid

Jika pemilih yang ditentukan cocok dengan ID yang salah digunakan lebih dari sekali dalam dokumen, elemen pertama dengan ID tersebut dikembalikan

Elemen semu CSS tidak akan pernah mengembalikan elemen apa pun, seperti yang ditentukan dalam

Untuk mencocokkan dengan ID atau pemilih yang tidak mengikuti sintaks CSS standar (dengan menggunakan titik dua atau spasi yang tidak tepat, misalnya), Anda harus meng-escape karakter dengan garis miring terbalik ("

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log("#foo\bar"); // "#fooar" (\b is the backspace control character)
  document.querySelector("#foo\bar"); // Does not match anything

  console.log("#foo\\bar"); // "#foo\bar"
  console.log("#foo\\\\bar"); // "#foo\\bar"
  document.querySelector("#foo\\\\bar"); // Match the first div

  document.querySelector("#foo:bar"); // Does not match anything
  document.querySelector("#foo\\:bar"); // Match the second div
</script>

6"). Karena garis miring terbalik juga merupakan karakter escape dalam JavaScript, jika Anda memasukkan string literal, Anda harus melakukan escape dua kali (sekali untuk string JavaScript, dan lain kali untuk querySelector())

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log("#foo\bar"); // "#fooar" (\b is the backspace control character)
  document.querySelector("#foo\bar"); // Does not match anything

  console.log("#foo\\bar"); // "#foo\bar"
  console.log("#foo\\\\bar"); // "#foo\\bar"
  document.querySelector("#foo\\\\bar"); // Match the first div

  document.querySelector("#foo:bar"); // Does not match anything
  document.querySelector("#foo\\:bar"); // Match the second div
</script>

_

Dalam contoh ini, elemen pertama dalam dokumen dengan kelas "

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log("#foo\bar"); // "#fooar" (\b is the backspace control character)
  document.querySelector("#foo\bar"); // Does not match anything

  console.log("#foo\\bar"); // "#foo\bar"
  console.log("#foo\\\\bar"); // "#foo\\bar"
  document.querySelector("#foo\\\\bar"); // Match the first div

  document.querySelector("#foo:bar"); // Does not match anything
  document.querySelector("#foo\\:bar"); // Match the second div
</script>

8" dikembalikan

const el = document.querySelector(".myclass");

_

Selektor juga bisa sangat kuat, seperti yang ditunjukkan dalam contoh berikut. Di sini, elemen

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log("#foo\bar"); // "#fooar" (\b is the backspace control character)
  document.querySelector("#foo\bar"); // Does not match anything

  console.log("#foo\\bar"); // "#foo\bar"
  console.log("#foo\\\\bar"); // "#foo\\bar"
  document.querySelector("#foo\\\\bar"); // Match the first div

  document.querySelector("#foo:bar"); // Does not match anything
  document.querySelector("#foo\\:bar"); // Match the second div
</script>

9 pertama dengan nama "login" (

const el = document.querySelector(".myclass");

0) yang terletak di dalam

const el = document.querySelector(".myclass");

1 yang kelasnya adalah "user-panel main" (

const el = document.querySelector(".myclass");

2) dalam dokumen dikembalikan

Bagaimana Anda memilih elemen?

Pemilih id CSS . Id dari suatu elemen adalah unik di dalam sebuah halaman, sehingga pemilih id digunakan untuk memilih satu elemen unik. Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti dengan id elemen .

Apa itu pilih () dalam JavaScript?

metode select() memilih semua teks dalam elemen .

Bagaimana cara menggunakan opsi pilih dalam JavaScript?

Prosesnya menggunakan fungsi pemilih kueri untuk terlebih dahulu memilih elemen "tombol" dan "pilih". Kemudian indeks yang dipilih dapat ditampilkan menggunakan JavaScript saat tombol diklik. Lampirkan pendengar acara klik ke tombol. Sekarang mari kita lihat metode untuk menampilkan opsi yang dipilih dalam daftar dropdown