JavaScript htmldom html

HTML DOM允许JavaScript来修改HTML元素的内容.

修改HTML输出流

JavaScript可以创建动态的HTML内容:

Date: Sat Feb 11 2017 00:17:17 GMT+0800 (中国标准时间)

使用JavaScript, document.write() 可以直接写到HTML输出流:

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

让我试试

文档加载以后，不要使用document.write(). 它将覆盖文档.

改变HTML内容

修改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文档中包含一个id="header" 的<h1>元素
  • 我们使用HTML DOM得到id="header"元素
  • JavaScript 修改这个元素的内容 (innerHTML)

修改属性值

改变一个HTML属性的值，使用如下语法:

document.getElementById(id).attribute = new value

此示例修改<img>元素的src属性:

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>

让我试试

实例解析:

  • HTML文档包含一个id="myImage"的<img>元素
  • 我们使用HTML DOM 得到id="myImage"的元素
  • JavaScript 修改元素的src属性 由"smiley.gif" 改为 "landscape.jpg"