masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Tutorial Asas Javascript: Memahami DOM

Apakah itu DOM?

Document Object Model DOM Singkatan Bahasa Inggeris: Document Object Model, mentakrifkan kaedah standard untuk mengakses dan memproses dokumen HTML. DOM mempersembahkan dokumen HTML sebagai struktur pokok (pohon nod) dengan elemen, atribut dan teks

Pernyataan ini sangat rasmi, tetapi semua orang masih tidak bersetuju dengan jelas.

Contohnya: Kami mempunyai sekeping HTML, jadi bagaimanakah kita boleh mengakses nod pertama dalam lapisan kedua, dan bagaimana kita mengalihkan nod terakhir ke nod pertama?

DOM mentakrifkan standard untuk cara melakukan operasi yang serupa. Contohnya, gunakan getElementById untuk mengakses nod dan insertBefore untuk memasukkan nod.

Apabila pelayar memuatkan HTML, ia akan menjana pepohon DOM yang sepadan.

Ringkasnya, DOM boleh difahami sebagai standard pelaksanaan untuk mengakses atau mengendalikan pelbagai teg HTML.

Untuk HTML, nod dokumen Document (tidak kelihatan) ialah nod akarnya, dan objek yang sepadan ialah objek dokumen (secara tegasnya, ia ialah objek HTMLDocument subkelas. Jenis Dokumen akan diperkenalkan secara berasingan di bawah. ditunjukkan).

Dalam erti kata lain, terdapat Dokumen nod dokumen, dan kemudian ia mempunyai nod anak Contohnya, melalui document.getElementsByTagName("html"), anda boleh mendapatkan html Unsur jenis nod elemen.

Setiap teg HTML boleh diwakili oleh nod yang sepadan, contohnya:

Elemen HTML diwakili oleh nod elemen, komen diwakili oleh nod ulasan, jenis dokumen diwakili oleh nod jenis dokumen, dll.

Sebanyak 12 jenis nod ditakrifkan, dan semua jenis ini mewarisi daripada jenis Nod.

Jadi mari kita bincangkan tentang jenis Nod dahulu, kerana kaedah jenis ini diwarisi oleh semua nod.

Kod berikut: 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>DOM</title>
</head>
<body>
	<h2><a href="www.php.cn">Javascript DOM</a></h2>
	<p>对html元素进行操作，可添加，改变或移除css样式等</p>
	<ul>
		<li>Javascript</li>
		<li>DOM</li>
		<li>css</li>
	</ul>
</body>
</html>

Uraikan kod HTML ke dalam rajah hierarki nod DOM:

DOM.png

Dokumen HTML boleh dikatakan sebagai koleksi nod DOM ialah:

1. dan lain-lain dalam gambar di atas adalah semua adalah nod elemen, iaitu, label.

2. Nod teks: kandungan dipaparkan kepada pengguna, seperti JavaScript, DOM, CSS dan teks lain dalam <li>...</li>.

3. Nod atribut: atribut elemen, seperti atribut pautan href="http://www.php.cn" teg <a>

Sebagai contoh, teg a dalam kod di atas


teg ------- nod elemen

href= "www. php.cn"--------Nod Atribut

javascript DOM ---------- Nod Teks

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM</title> </head> <body> <h2><a href="www.php.cn">Javascript DOM</h2> <p>对html元素进行操作，可添加，改变或移除css样式等</p> <ul> <li>Javascript</li> <li>DOM</li> <li>css</li> </ul> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492295 permainan