Penjelasan terperinci tentang cara JavaScript mengendalikan elemen HTML dan gaya

Penjelasan terperinci tentang cara JavaScript mengendalikan elemen HTML dan gaya_Pengetahuan asas

WBOY

Lepaskan： 2016-05-16 15:35:47

asal

1222 orang telah melayarinya

Elemen DOM HTML JavaScript (nod)
Buat elemen HTML baharu
Untuk menambah elemen baharu pada DOM HTML, anda mesti mencipta elemen (nod elemen) dahulu dan kemudian menambah elemen pada elemen sedia ada.
Contoh

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

Salin selepas log masuk

Contoh analisis:
Kod ini mencipta elemen

baharu:

var para=document.createElement("p");

Salin selepas log masuk

Untuk menambah teks pada elemen

anda mesti membuat nod teks terlebih dahulu. Kod ini mencipta nod teks:

var node=document.createTextNode("This is a new paragraph.");

Salin selepas log masuk

Kemudian anda perlu menambahkan nod teks ini pada elemen

para.appendChild(node);

Salin selepas log masuk

Akhir sekali anda mesti menambahkan elemen baharu pada elemen sedia ada.
Kod ini mencari elemen sedia ada:

var element=document.getElementById("div1");

Salin selepas log masuk

Kod berikut menambah elemen baharu selepas elemen sedia ada:

element.appendChild(para);

Salin selepas log masuk

Padamkan elemen HTML sedia ada Kod ini menambahkan elemen baharu pada elemen sedia ada ini:
Contoh

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

Salin selepas log masuk

Contoh analisis

Dokumen HTML ini mengandungi elemen

dengan dua nod anak (dua

elemen):

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

Salin selepas log masuk

Cari elemen dengan id="div1":

var parent=document.getElementById("div1");

Salin selepas log masuk

Cari elemen

dengan id="p1":

var child=document.getElementById("p1");

Salin selepas log masuk

Alih keluar elemen anak daripada unsur induk:

parent.removeChild(child);

Salin selepas log masuk

lampu Alangkah baiknya jika anda boleh memadamkan elemen tanpa merujuk elemen induk.

Tapi sayang. DOM perlu mengetahui elemen yang anda perlu padamkan dan elemen induknya.
Ini ialah penyelesaian biasa: cari elemen anak yang ingin anda alih keluar dan kemudian gunakan sifat parentNodenya untuk mencari elemen induk:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

Salin selepas log masuk

JavaScript HTML DOM - Menukar CSS HTML DOM membenarkan JavaScript menukar gaya elemen HTML.

Tukar gaya HTML Untuk menukar gaya elemen HTML, gunakan sintaks ini:
document.getElementById(id).style.property=gaya baharu
Contoh berikut menukar gaya elemen

Contoh

<html>
<body>

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

<script>
document.getElementById("p2").style.color="blue";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Salin selepas log masuk

Contoh ini menukar gaya elemen HTML dengan id="id1" apabila pengguna mengklik butang:

Contoh

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>

</body>
</html>

Salin selepas log masuk