DOM更改HTML页面的输出流，元素的内容，属性，以及样式

HTML DOM允许JavaScript更改HTML元素

改变元素输出流（document.write()）

在JavaScript中，document.write（）可用于直接写入HTML输出流：

document.write(Date());

加载文档后，切勿使用document.write（）。 它将覆盖文档。

改变元素的内容（innerHTML）

修改HTML元素内容的最简单方法是使用innerHTML属性。 example1：更改段落p

<p id="demo">Hello World</p> <!--Script to uses innerHTML --> <script> document.getElementById("demo").innerHTML="New Text"; </script>

example2:更改标签H1

<h1 id="id01">Old Heading</h1> <!--Script to uses innerHTML --> <script> document.getElementById("id01").innerHTML="New Heading"; </script>

更改元素属性的值

<img id="myImage" src="001.jpg"> <button onclick="myFunction()" >change Imgae</button> <!--Script to uses innerHTML --> <script> function myFunction(){ document.getElementById("myImage").src="002.jpg"; } </script>

更改元素的样式

HTML DOM允许JavaScript更改HTML元素的样式。

语法：document.getElementById(id).style.property = new style

<p id="paragraph1">Hello World</p> <button onclick="myFunction()" >change Imgae</button> <!--Script to uses innerHTML --> <script> function myFunction(){ document.getElementById("paragraph1").style.color="blue"; } </script>