HTML DOM позволяет JavaScript, чтобы изменить содержание HTML элементов.
Изменение выходной поток HTML
JavaScript может создавать динамический контент HTML:
Дата:Вс 6 ноября 2016 19:23:35 GMT + 0800 (中国标准时间)
В JavaScript document.write() может быть использован для записи непосредственно в выходной поток HTML:
пример
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Попробуй сам " Никогда не используйте document.write() после загрузки документа. Это приведет к перезаписи документа.
Изменение HTML Content
Самый простой способ изменить содержимое HTML - элемента с помощью innerHTML свойства.
Для того, чтобы изменить содержимое HTML-элемента, используйте следующий синтаксис:
document.getElementById(id).innerHTML = new HTML
В этом примере изменяется содержание <p> элемента:
пример
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Попробуй сам " В этом примере изменяется содержание в <h1> элемента:
пример
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>
Попробуй сам " Объяснение примера:
- HTML документ выше содержит <h1> элемент с id="header"
- Мы используем HTML DOM , чтобы получить элемент с id="header"
- JavaScript изменяет содержание (innerHTML) этого элемента
Изменение значения атрибута
Чтобы изменить значение атрибута HTML, используйте следующий синтаксис:
document.getElementById(id).attribute=new value
Этот пример изменяет значение атрибута ГКЗ в <img> элемента:
пример
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Попробуй сам " Объяснение примера:
- HTML документ выше содержит <img> элемент с id="myImage"
- Мы используем HTML DOM , чтобы получить элемент с id="myImage"
- JavaScript изменяет src атрибут этого элемента из "smiley.gif" до "landscape.jpg"
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »