Ringkasan poin pengetahuan JavaScript: DOM

1. Pengenalan DOM

1.1 Apa itu DOM

Implementasi JavaScript lengkap terdiri dari 3 bagian berbeda berikut:

• Inti (ECMAScript): Bagian inti bahasa, yang menjelaskan sintaksis dan objek dasar bahasa.

• Model Objek Dokumen (DOM): Standar operasi dokumen halaman web, menjelaskan metode dan antarmuka untuk memproses konten halaman web.

• Model Objek Browser (BOM): Dasar operasi jendela klien dan browser, menjelaskan metode dan antarmuka untuk berinteraksi dengan browser.

Model Objek Dokumen ( Document Object Model，简称DOM ) adalah编程接口standar yang direkomendasikan oleh organisasi W3C untuk memproses bahasa markup yang dapat diperluas (HTML atau XML).
W3C telah mendefinisikan serangkaian antarmuka DOM yang melaluinya konten, struktur, dan gaya halaman web dapat diubah.

Bahasa resmi: Document Object Model (DOM) adalah antarmuka pemrograman standar yang direkomendasikan oleh organisasi W3C untuk memproses bahasa markup yang dapat diperluas. Ini adalah antarmuka pemrograman aplikasi (API) yang tidak bergantung pada platform dan bahasa yang dapat mengakses program dan skrip secara dinamis serta memperbarui konten, struktur, dan gaya dokumen www (dokumen HTML dan XML ditentukan melalui bagian deskripsi). Dokumen tersebut dapat diproses lebih lanjut dan hasil pengolahannya dapat ditambahkan pada halaman saat ini. DOM adalah dokumen API berbasis pohon yang mengharuskan seluruh dokumen direpresentasikan dalam memori selama pemrosesan. API sederhana lainnya adalah SAX berbasis peristiwa, yang dapat digunakan untuk memproses dokumen XML yang sangat besar, karena ukurannya yang besar, maka tidak cocok untuk memproses semua yang ada di memori.

1.2 pohon DOM

• Dokumen: Halaman adalah dokumen. Dokumen digunakan di DOM untuk mewakili
• elemen: semua tag di halaman adalah elemen, dan elemen digunakan di DOM untuk mewakili
• node: semua konten di halaman web adalah node (label, atribut, teks, komentar, dll.). Gunakan node di DOM untuk mewakili

DOM 把以上内容都看做是对象

2. Dapatkan elemen

2.1 Cara mendapatkan elemen halaman

DOM terutama digunakan untuk mengoperasikan elemen dalam pengembangan sebenarnya.
Bagaimana kita mendapatkan elemen di halaman? Anda bisa mendapatkan elemen di halaman dengan cara berikut:

• Dapatkan berdasarkan ID
• Dapatkan berdasarkan nama tag
• Dapatkan elemen khusus
• melalui metode baru di HTML5
• 
  

2.2 Memperoleh berdasarkan ID

Gunakan metode getElementById() untuk mendapatkan objek elemen dengan ID.

document.getElementById('id');

Gunakan console.dir() untuk mencetak objek elemen yang kita peroleh dan melihat properti dan metode dalam objek dengan lebih baik.

2.3 Dapatkan berdasarkan nama tag

Gunakan metode getElementsByTagName() untuk mengembalikan kumpulan objek dengan nama tag yang ditentukan.

document.getElementsByTagName('tag name');

Catatan:

1. Karena yang kita dapatkan adalah kumpulan objek, kita perlu melakukan traverse jika ingin mengoperasikan elemen di dalamnya.
2. Mendapatkan objek elemen bersifat dinamis

2.4 Dapatkan document.getElementsByClassName('class name') melalui metode baru HTML5

; // Mengembalikan kumpulan objek elemen sesuai dengan nama kelas document.querySelector('selector'); pemilih yang ditentukan Objek elemen pertama document.querySelectorAll('selector'); // Kembali sesuai dengan pemilih yang ditentukan

注意：
Selector di querySelector dan querySelectorAll perlu ditandai, misalnya: document.querySelector('#nav');

2.5 Mendapatkan elemen khusus (body, html)

1. Mendapatkan elemen body

doucumnet.body // Mengembalikan objek elemen body

2. Mendapatkan elemen html

document.documentElement // Mengembalikan objek elemen html

3. Dasar-dasar event

3.1 Ikhtisar event

yang diaktifkan JavaScript kami untuk membuat halaman Dinamis, dan peristiwa adalah perilaku yang dapat dideteksi oleh JavaScript.
简单理解： 触发--- 响应机制。
Setiap elemen di halaman web dapat menghasilkan peristiwa tertentu yang dapat memicu JavaScript. Misalnya, kita dapat menghasilkan peristiwa ketika pengguna mengklik tombol, dan kemudian melakukan operasi tertentu.

3.2 Tiga elemen peristiwa:

1. sumber peristiwa (siapa)
2. jenis peristiwa (peristiwa apa)
3. pengendali peristiwa (apa yang harus dilakukan)

kasus:

var btn = document.getElementById('btn');
btn.onclick = fungsi() {
 waspada('Apa kabar'); 
};

3.3 Langkah-langkah untuk mengeksekusi event:

1. Mendapatkan sumber event,
2. mendaftarkan event (bind event)
3. , menambahkan event handler (dalam bentuk penetapan fungsi)

3.3 Event mouse yang umum

注：以下图片的事件只是常见的并不代表所有

3.4 Menganalisis tiga unsur

peristiwa:
1. Sumber peristiwa (apa yang ingin Anda operasikan)

2. Peristiwa (apa yang ingin Anda lakukan untuk mencapai efek interaksi yang diinginkan)

3. Fungsi pemrosesan (target seperti apa yang Anda inginkan setelah peristiwa berlangsung)

4 . Elemen operasi Operasi

DOM JavaScript dapat mengubah konten, struktur, dan gaya halaman web. Kita dapat menggunakan elemen operasi DOM untuk mengubah konten, atribut, dll. di dalam elemen. Perhatikan bahwa berikut ini adalah semua atribut

4.1. Ubah konten elemen

element.innerText

dari posisi awal ke posisi akhir, tetapi ini menghilangkan tag html. Pada saat yang sama, spasi dan jeda baris juga akan menghapus

seluruh konten dari awal posisi ke posisi akhir

elemen.innerHTML

4.2 Operasi atribut elemen umum

innerText dan innerHTML untuk mengubah konten elemen
src,href
id, alt, title

4.3 Operasi atribut elemen formulir

Anda dapat menggunakan DOM untuk mengoperasikan atribut elemen formulir berikut:

tipe, nilai, dicentang, dipilih, dinonaktifkan

4.4 Operasi atribut gaya

Kita dapat memodifikasi ukuran, warna, posisi, dan gaya lainnya elemen melalui JS.

1. element.style Operasi gaya inline
2. element.className Operasi gaya nama kelas

注意：
1.JS 里面的样式采取驼峰命名法比如fontSize、 backgroundColor
2.JS 修改style 样式操作，产生的是行内样式，CSS 权重比较高

elemen operasi adalah konten inti DOM.

4.5 Pemikiran eksklusivitas

Jika ada kelompok elemen yang sama, dan kita ingin elemen tertentu menerapkan gaya tertentu, kita perlu menggunakan algoritma loop eksklusif:

1. hapus gaya semua elemen (bunuh orang lain)
2. dan atur gaya untuk elemen saat ini ( meninggalkan diriku sendiri).
3. Perhatikan bahwa urutannya tidak dapat Membalikkannya, bunuh orang lain terlebih dahulu, lalu atur sendiri

4.6 Pengoperasian atribut khusus

1. Dapatkan nilai atribut

• element.property Dapatkan nilai atribut.
• element.getAttribute('attribute');

Perbedaan:

• element.attribute mendapatkan nilai atribut bawaan (atribut yang disertakan dengan elemen itu sendiri)
• element.getAttribute('attribute'); pemrogram kami Properti

2. Tetapkan nilai properti

• element.property = 'value' Tetapkan nilai properti bawaan.
• element.setAttribute('Attribute', 'Value');

Perbedaan:

• element.Attribute menetapkan nilai atribut bawaan
• element.setAttribute('Attribute'); Terutama menetapkan atribut khusus (standar)

3. Hapus atribut

• element.removeAttribute(' Properties ');

4.7 Properti kustom H5

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

Atribut khusus diperoleh melalui getAttribute('attribute').
Namun, beberapa atribut khusus dapat dengan mudah menyebabkan ambiguitas, dan sulit untuk menentukan apakah atribut tersebut merupakan atribut bawaan atau atribut khusus dari elemen tersebut.

H5 telah menambahkan atribut khusus baru kepada kami:

1. Tetapkan atribut khusus H5

H5 menetapkan bahwa awal data atribut khusus harus digunakan sebagai nama atribut dan diberi nilai.

Atau gunakan JS untuk menyetel

element.setAttribute('data-index', 2)

2. Dapatkan atribut khusus H5 <br/> Kompatibilitas Dapatkan element.getAttribute('data-index');
H5 telah menambahkan element.dataset.index atau element.dataset['index'], yang hanya didukung di IE 11.

5. Operasi node

biasanya menggunakan dua metode untuk mendapatkan elemen:
1. Gunakan metode yang disediakan oleh DOM untuk mendapatkan elemen

• document.getElementById()
• document.getElementsByTagName()
• document.querySelector, dll.  Logikanya tidak kuat dan rumit

• Gunakan

hubungan hierarki simpul untuk mendapatkan elemen

• -hubungan simpul saudara-anak untuk mendapatkan elemen.
• Logikanya kuat, tetapi Sedikit kurang kompatibel.

Kedua metode dapat memperoleh simpul elemen, yang akan digunakan nanti, tetapi pengoperasian simpul lebih sederhana.

5.2 Ikhtisar Node

Semua konten di halaman web adalah a node (label, atribut, teks, komentar, dll.). Di DOM, sebuah node Gunakan node untuk mewakili.
Semua node di pohon DOM HTML dapat diakses melalui JavaScript, dan semua elemen HTML (node) dapat dimodifikasi, dibuat atau dihapus.

Secara umum, node memiliki setidaknya tiga atribut dasar: nodeType (tipe node), nodeName (nama node), dan nodeValue (nilai node).

• Elemen node nodeType adalah 1,
• atribut node nodeType adalah 2,
• dan node teks nodeType adalah 3 (node ​​teks mencakup teks, spasi, jeda baris, dll.)

我们在实际开发中，节点操作主要操作的是元素节点

elemen level

menggunakan pohon DOM untuk membagi node. Untuk hubungan hierarki yang berbeda, yang paling umum adalah父子兄层级关系

1.

Node induk

node.parentNode

• Properti parentNode dapat mengembalikan node induk dari node tertentu. Perhatikan bahwa ini adalah node induk terbaru.
• Jika node yang ditentukan tidak memiliki node induk, null akan dikembalikan

. childNodes (standar)

parentNode.childNodes kembali termasuk Kumpulan node anak dari node yang ditentukan, yang merupakan koleksi yang segera diperbarui.
Catatan: Nilai yang dikembalikan berisi semua node anak, termasuk node elemen, node teks, dll.
Jika Anda hanya ingin memasukkan node elemen ke dalamnya, Anda perlu menanganinya secara khusus. Oleh karena itu, kami biasanya tidak menganjurkan penggunaan childNodes

var ul = document.querySelector('ul');for(var i = 0; i < ul.childNodes.length;i++) {if (ul.childNodes[i]. tipe simpul == 1 ) {
 // ul.childNodes[i] adalah node elemen console.log(ul.childNodes[i]);}}

2. parentNode.children (non-standar)

parentNode.children adalah properti read-only yang mengembalikan semua node elemen turunan. Ini hanya mengembalikan node elemen anak, dan node lainnya tidak dikembalikan (inilah yang kami fokuskan).
Meskipun anak-anak adalah non-standar, ia didukung oleh berbagai browser, sehingga kita dapat menggunakan

3. parentNode.firstChild

firstChild dengan aman untuk mengembalikan simpul anak pertama, atau null jika tidak ditemukan. Demikian pula, semua node disertakan.

4. parentNode.lastChild

lastChild mengembalikan node anak terakhir, atau null jika tidak ditemukan. Demikian pula, ia juga berisi semua node

5. parentNode.firstElementChild

firstElementChild mengembalikan node elemen anak pertama, jika tidak ditemukan, mengembalikan null.

6. parentNode.lastElementChild

lastElementChild mengembalikan node elemen anak terakhir, atau null jika tidak ditemukan.
注意：这两个方法有兼容性问题，IE9 以上才支持

Dalam pengembangan sebenarnya, firstChild dan lastChild berisi node lain, yang tidak nyaman untuk dioperasikan. Dan firstElementChild dan lastElementChild memiliki masalah kompatibilitas simpul elemen atau Bagaimana dengan simpul elemen anak terakhir?
Solusi:

1. Jika Anda menginginkan node elemen anak pertama, Anda dapat menggunakan parentNode.chilren[0]
2. Jika Anda menginginkan node elemen anak terakhir, Anda dapat menggunakan

parentNode.chilren[parentNode.chilren.length - 1]

Model Objek Dokumen

Ringkasan

Model Objek (disingkat DOM) adalah antarmuka pemrograman standar yang direkomendasikan oleh organisasi W3C untuk memproses bahasa markup yang dapat diperluas (HTML atau XML).

W3C telah mendefinisikan serangkaian antarmuka DOM yang melaluinya konten, struktur, dan gaya halaman web dapat diubah.

Untuk JavaScript, agar JavaScript dapat mengoperasikan HTML, JavaScript memiliki seperangkat antarmuka pemrograman DOM sendiri.

Untuk HTML, DOM membuat HTML membentuk pohon DOM.

Elemen DOM yang berisi dokumen, elemen, dan node adalah sebuah objek, sehingga disebut model objek dokumen

. Mengenai operasi DOM, kami terutama fokus pada pengoperasian elemen. Terutama mencakup pembuatan, penambahan, penghapusan, modifikasi, kueri, operasi atribut, dan operasi acara.