HTML DOM


HTML DOM membenarkan JavaScript menukar kandungan elemen HTML.

Tukar strim output HTML

JavaScript boleh mencipta kandungan HTML dinamik:

Tarikh hari ini ialah:

Selasa 18 Okt 2016 09:59:23 GMT+0800


Dalam JavaScript, document.write() boleh digunakan Tulis kandungan terus ke aliran keluaran HTML.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

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

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

lamp绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。

Tukar kandungan HTML

Cara paling mudah untuk mengubah suai kandungan HTML ialah menggunakan sifat innerHTML.

Untuk menukar kandungan elemen HTML, gunakan sintaks ini:

document.getElementById(id).innerHTML=HTML baharu

Contoh ini menukar kandungan elemen <p> Contoh»

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

Contoh ini menukar kandungan elemen <h1> >Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>

</body>
</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Penjelasan contoh :

Dokumen HTML di atas mengandungi elemen <h1> dengan id="header"

Kami menggunakan DOM HTML untuk mendapatkan elemen dengan id="header"

  • JavaScript Tukar kandungan elemen ini (innerHTML)


  • Tukar atribut HTML

    • Untuk menukar atribut elemen HTML, gunakan sintaks ini:

  • document.getElementById(

    id
    • ).
    attribute=new attribute value

Contoh ini menukar atribut src bagi elemen <img>:

Instance 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<h1 id="header">旧标题</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
<p>"旧标题" 被 "新标题" 取代。</p>

</body>
</html>
Jalankan contoh »

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

Penjelasan contoh:


Dokumen HTML di atas mengandungi id= <img> elemen "imej"

Kami menggunakan HTML DOM untuk mendapatkan elemen dengan id=" imej"

JavaScript untuk menukar Atribut elemen ini (tukar "/upload/course/000/000/009/58058303e12c0481.jpg" kepada "/upload/course/000/000/009 /580469a2a27e3327.gif
    ")