DOM HTML pozwala JavaScript, żeby zmienić zawartość elementów HTML.
Zmiana strumień wyjściowy HTML
JavaScript może stworzyć dynamiczną zawartość HTML:
Data:Sun 06 listopad 2016 19:23:35 GMT + 0800 (中国标准时间)
W JavaScript document.write() może być stosowany do pisania bezpośrednio do strumienia wyjściowego HTML:
Przykład
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Spróbuj sam " Nigdy nie należy używać document.write() po załadowaniu dokumentu. Zastąpi on dokument.
Zmiana treści HTML
Najprostszym sposobem, aby zmienić treść elementu HTML jest za pomocą innerHTML właściwość.
Aby zmienić zawartość elementu HTML, należy użyć następującej składni:
document.getElementById(id).innerHTML = new HTML
Ten przykład zmienia zawartość <p> element:
Przykład
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Spróbuj sam " Ten przykład zmienia zawartość w <h1> element:
Przykład
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>
Spróbuj sam " Przykład wyjaśnił:
- Dokument HTML powyżej zawiera <h1> elementu z id="header"
- Używamy DOM HTML, aby uzyskać elementu z id="header"
- Javascript zmienia treść (innerHTML) tego elementu
Zmiana wartości atrybutu
Aby zmienić wartość atrybutu HTML, należy użyć następującej składni:
document.getElementById(id).attribute=new value
Ten przykład zmienia wartość atrybutu src w <img> elementu:
Przykład
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Spróbuj sam " Przykład wyjaśnił:
- Dokument HTML powyżej zawiera <img> elementu z id="myImage"
- Używamy DOM HTML, aby uzyskać elementu z id="myImage"
- Javascript zmienia src atrybut tego elementu z "smiley.gif" do "landscape.jpg"
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 »