HTML DOM permite JavaScript pentru a schimba conținutul de elemente HTML.
Schimbarea fluxului de ieșire HTML
JavaScript poate crea conținut HTML dinamic:
Date: Sun Nov 06 2016 19:23:35 GMT+0800 (中国标准时间) Date: Sun Nov 06 2016 19:23:35 GMT+0800 (中国标准时间)
În JavaScript, document. write() document. write() poate fi folosit pentru a scrie direct în fluxul de ieșire HTML:
Exemplu
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Încearcă - l singur » Nu folosiți niciodată document. write() document. write() după ce documentul este încărcat. Acesta va suprascrie documentul.
Schimbarea de conținut HTML
Cel mai simplu mod de a modifica conținutul unui element HTML este folosind innerHTML proprietate.
Pentru a modifica conținutul unui element HTML, utilizați această sintaxă:
document. getElementById( id ) .innerHTML = new HTML
Acest exemplu modifică conținutul unui <p> Element:
Exemplu
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Încearcă - l singur » Acest exemplu modifică conținutul unui <h1> Element:
Exemplu
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>
Încearcă - l singur » Exemplu explicat:
- Documentul HTML conține deasupra unui <h1> elementul cu id="header"
- Noi folosim DOM HTML pentru a obține elementul cu id="header"
- O JavaScript schimbă conținutul (innerHTML) al acelui element
Modificarea valorii unui atribut
Pentru a modifica valoarea unui atribut HTML, utilizați această sintaxă:
document. getElementById( id ) . attribute=new value
Acest exemplu modifică valoarea src atribut al unui <img> Element:
Exemplu
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Încearcă - l singur » Exemplu explicat:
- Documentul HTML conține mai sus un <img> elementul cu id="myImage"
- Noi folosim DOM HTML pentru a obține elementul cu id="myImage"
- O JavaScript schimbă src atribut al acelui element din "smiley.gif" la "landscape.jpg"
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 »