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>