cari

Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang cara asas mengendalikan HTML DOM dengan pengetahuan JavaScript_Basic

Penjelasan terperinci tentang cara asas mengendalikan HTML DOM dengan pengetahuan JavaScript_Basic

WBOY
WBOYasal
2016-05-16 15:35:571172semak imbas

DOM HTML menyediakan akses kepada semua elemen dokumen HTML JavaScript.
HTML DOM (Model Objek Dokumen)
Apabila halaman web dimuatkan, penyemak imbas mencipta Model Objek Dokumen halaman.
Model DOM HTML dibina sebagai pokok objek:
Penjelasan terperinci tentang cara asas mengendalikan HTML DOM dengan pengetahuan JavaScript_Basic
Melalui model objek boleh atur cara, JavaScript memperoleh kuasa yang mencukupi untuk mencipta HTML dinamik.

  • JavaScript boleh menukar semua elemen HTML dalam halaman
  • JavaScript boleh menukar semua atribut HTML dalam halaman
  • JavaScript boleh menukar semua gaya CSS dalam halaman
  • JavaScript boleh bertindak balas terhadap semua acara dalam halaman

Cari elemen HTML
Biasanya, dengan JavaScript, anda perlu memanipulasi elemen HTML.
Untuk melakukan ini, anda mesti mencari elemen terlebih dahulu. Terdapat tiga cara untuk melakukan ini:

  • Cari elemen HTML mengikut id
  • Cari elemen HTML mengikut nama teg
  • Cari elemen HTML mengikut nama kelas
  • Cari elemen HTML mengikut id

Cara paling mudah untuk mencari elemen HTML dalam DOM ialah dengan menggunakan id elemen.
Contoh ini mencari elemen dengan id="intro":
Contoh

var x=document.getElementById("intro");

Jika elemen ditemui, kaedah mengembalikan elemen sebagai objek (dalam x).
Jika elemen tidak dijumpai, x akan mengandungi null.
Cari elemen HTML mengikut nama teg
Contoh ini mencari elemen dengan id="utama" dan kemudian mencari semua elemen

dalam elemen id="utama":
Contoh

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

Cari elemen HTML mengikut nama kelas
Contoh ini menggunakan fungsi getElementsByClassName untuk mencari elemen dengan class="intro":
Contoh

var x=document.getElementsByClassName("intro");

Tukar HTML
HTML DOM membenarkan JavaScript menukar kandungan elemen HTML.
Tukar strim output HTML
JavaScript boleh mencipta kandungan HTML dinamik:
Tarikh hari ini ialah: Rab 21 Okt 2015 14:43:25 GMT 0800 (Waktu Standard China)
Dalam JavaScript, document.write() boleh digunakan untuk menulis kandungan terus ke strim output HTML.
Contoh

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>


lampu Jangan sekali-kali menggunakan document.write() selepas dokumen selesai dimuatkan. Ini akan menulis ganti dokumen.

Tukar kandungan HTML
Cara paling mudah untuk mengubah suai kandungan HTML adalah dengan menggunakan sifat innerHTML.
Untuk menukar kandungan elemen HTML, gunakan sintaks ini:
document.getElementById(id).innerHTML=HTML baharu
Contoh ini menukar kandungan elemen

Contoh

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>
Contoh ini menukar kandungan elemen

Contoh



<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

</body>
</html>

Penjelasan dengan contoh:

Dokumen HTML di atas mengandungi elemen

dengan id="header"
  • Kami menggunakan HTML DOM untuk mendapatkan elemen dengan id="header"
  • JavaScript menukar kandungan elemen ini (innerHTML)
Tukar atribut HTML

Untuk menukar atribut elemen HTML, gunakan sintaks ini: 

document.getElementById(id).attribute=new value
Contoh ini menukar atribut src bagi elemen Penjelasan terperinci tentang cara asas mengendalikan HTML DOM dengan pengetahuan JavaScript_Basic Contoh




Penjelasan dengan contoh: 
<!DOCTYPE html>
<html>
<body>

<img  id="image" src="smiley.gif" alt="Penjelasan terperinci tentang cara asas mengendalikan HTML DOM dengan pengetahuan JavaScript_Basic" >

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

Dokumen HTML di atas mengandungi elemen Penjelasan terperinci tentang cara asas mengendalikan HTML DOM dengan pengetahuan JavaScript_Basic dengan id="image"

    Kami menggunakan HTML DOM untuk mendapatkan elemen dengan id="imej"
    • JavaScript menukar atribut elemen ini (tukar "smiley.gif" kepada "landscape.jpg")
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kod kesan khas bunga api mudah dilaksanakan dalam kemahiran JavaScript_javascriptArtikel seterusnya：Kod kesan khas bunga api mudah dilaksanakan dalam kemahiran JavaScript_javascript

Artikel berkaitan

Lihat lagi