Penjelasan terperinci tentang cara JavaScript mengendalikan atribut elemen, gaya dan nama kelas

DOM - Model Objek Dokumen

Set lengkap sifat dan kaedah untuk mengendalikan aliran dokumen

• Teg (elemen) halaman operasi
  Semak penambahan, pemadaman dan pengubahsuaian teg operasi
  Atribut teg operasi (id, kelas, jenis, …)
  Gaya teg operasi
  …

• Kenali beberapa kandungan
  -dokumen: aliran dokumen, halaman, nod akar, tetapi bukan elemen (tag)
  -html: elemen terbesar yang membawa semua teg, elemen akar Nod
  -head: secara khusus membawa teg penerangan halaman semasa, kandungan di sini secara amnya tidak dipaparkan pada halaman
  -body: khususnya membawa tag paparan halaman semasa, kandungan sebenarnya dipaparkan pada halaman web

Dapatkan elemen

Gunakan pembolehubah untuk menyimpan satu atau beberapa elemen dalam halaman
Kaedah mendapatkan elemen terbahagi kepada dua kategori
1. Dapatkan elemen bukan konvensional

• html: document.documentElement
• head: document.head
• body: document.body

2. Dapatkan elemen biasa

• Dapatkan elemen berdasarkan id
  Sintaks: document.getElementById
  Nilai pulangan: Jika terdapat elemen yang sepadan dengan id pada halaman, maka ia adalah elemen ini, jika tidak, ia adalah batal

• Dapatkan elemen berdasarkan nama kelas
  Sintaks: document.getElementsByClassName ('Nama kelas elemen')
  Nilai pulangan: mestilah tatasusunan pseudo
  Jika pada halaman Jika terdapat elemen yang sepadan dengan nama kelas, dapatkan seberapa banyak yang ada dan letakkan mereka dalam tatasusunan pseudo untuk mengembalikan
  Jika tiada unsur yang sepadan dengan nama kelas pada halaman, maka ia akan menjadi tatasusunan pseudo kosong

• Dapatkan elemen berdasarkan nama teg
  Sintaks: document.getElementsByTagName('tag name')
  Nilai pulangan: mestilah susunan pseudo
  Jika terdapat elemen yang sepadan dengan nama tag pada halaman, Kemudian dapatkan seberapa banyak yang ada dan letakkannya dalam tatasusunan pseudo untuk mengembalikan
  Jika tiada elemen yang sepadan dengan nama tag pada halaman, maka ia adalah tatasusunan pseudo kosong

• Dapatkan teg berdasarkan pemilih
  Sintaks: document.querySelector('selector')
  Nilai pulangan: Jika terdapat elemen yang sepadan dengan pemilih pada halaman, maka elemen pertama yang sepadan dengan pemilih dikembalikan
  Jika tiada pemilih yang sepadan pada elemen halaman, maka ia adalah batal

• Dapatkan set teg mengikut pemilih
  Sintaks: document.querySelectorAll('selector' )
  Nilai pulangan: mestilah Tatasusunan pseudo
  Jika terdapat elemen yang sepadan dengan pemilih pada halaman, dapatkan seberapa banyak yang ada, letakkannya dalam tatasusunan pseudo dan kembalikan
  Jika tiada unsur yang sepadan dengan pemilih pada halaman, maka ia akan menjadi tatasusunan pseudo kosong

Gaya elemen operasi

• Terdapat tiga jenis gaya elemen untuk beroperasi dalam JS
  1. Dapatkan gaya sebaris elemen (hanya boleh mendapatkan gaya Sebaris)
  2. Dapatkan gaya bukan sebaris elemen (termasuk sebaris dan bukan- sebaris)
  3. Tetapkan gaya elemen (hanya gaya sebaris boleh ditetapkan)
  Nota: melibatkan gaya dengan garis bawah Apabila menamakan
  , tukarkannya kepada huruf besar unta
  dan gunakan sintaks persatuan tatasusunan

• untuk mendapatkan gaya sebaris elemen
  Sintaks: nama element.style.style

console.log(ele.style.width)
console.log(ele.style.height) // 非行内样式
console.log(ele.style.fontSize)
console.log(ele.style['font-size'])

• ·Dapatkan gaya bukan sebaris elemen
  Sintaks: window.getComputedStyle (elemen untuk mendapatkan nama Gaya

console.log(window.getComputedStyle(ele).width)
console.log(window.getComputedStyle(ele).height)
console.log(window.getComputedStyle(ele).fontSize)
console.log(window.getComputedStyle(ele)['background-color'])

• Tetapkan gaya elemen (hanya boleh menetapkan sebaris). gaya)
  Sintaks: nama element.style.style = nilai gaya

ele.style.backgroundColor = 'red'

Nama kelas elemen operasi

Tujuan: Gaya menukar kelompok

classList
Setiap nod elemen mempunyai atribut sendiri yang dipanggil classList

yang serupa dengan Struktur data kumpulan elemen menyimpan semua nama kelas bagi elemen Penambahan, pemadaman, pengubahsuaian dan pertanyaan adalah semua operasi pada classList, dan api khusus diberikan
• Add: element.classList.add (nama kelas)

  Padam: elemen. classList.remove(class name)
  Switch: element.classList.toggle(class name)
  - Jika ada, padamkannya, jika tiada, tambahkannya
  
  
  
  Pengesyoran berkaitan: [
  Tutorial video JavaScript

  ]

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara JavaScript mengendalikan atribut elemen, gaya dan nama kelas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!