Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang cara JavaScript mengendalikan elemen HTML dan gaya_Pengetahuan asas

Penjelasan terperinci tentang cara JavaScript mengendalikan elemen HTML dan gaya_Pengetahuan asas

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal: 2016-05-16 15:35:471277semak imbas

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>

Contoh analisis:
Kod ini mencipta elemen e388a4556c0f65e1904146cc1a846bee baharu:

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

Untuk menambah teks pada elemen e388a4556c0f65e1904146cc1a846bee anda mesti membuat nod teks terlebih dahulu. Kod ini mencipta nod teks:

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

Kemudian anda perlu menambahkan nod teks ini pada elemen e388a4556c0f65e1904146cc1a846bee

para.appendChild(node);

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

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

Kod berikut menambah elemen baharu selepas elemen sedia ada:

element.appendChild(para);

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>

Contoh analisis

Dokumen HTML ini mengandungi elemen dc6dce4a544fdca2df29d5ac0ea9906b dengan dua nod anak (dua e388a4556c0f65e1904146cc1a846bee elemen):

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

Cari elemen dengan id="div1":

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

Cari elemen e388a4556c0f65e1904146cc1a846bee dengan id="p1":

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

Alih keluar elemen anak daripada unsur induk:

parent.removeChild(child);

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);

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 e388a4556c0f65e1904146cc1a846bee 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>

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>

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：Perbincangan ringkas tentang pengaturcaraan tak segerak tak segerak dalam node.js_node.jsArtikel seterusnya：Perbincangan ringkas tentang pengaturcaraan tak segerak tak segerak dalam node.js_node.js

Artikel berkaitan

Lihat lagi