JavaScriptDOM（二）

HTML DOM修改

修改 HTML DOM 意味着许多不同的方面：
改变 HTML 内容；
改变 HTML 样式；
改变 HTML 属性；
创建新的 HTML 元素；
删除已有的 HTML 元素；
改变事件（处理程序）；

1.改变 HTML 内容

改变元素内容的最简单的方法是使用 innerHTML 属性；

<h1 id="change">Hello World!</h1>
<script>
	document.getElementById("change").innerHTML="改变";
</script>

2.改变 HTML 样式

<h1 id="change">Hello World!</h1>
<script>
	document.getElementById("change")..style.color="red";
	document.getElementById("change")..style.fontSize="12px";
</script>

3.创建新的 HTML 元素

在页面中创建了一个新的p标签：
创建了一个新的p标签;需向p标签添加文本，您首先必须创建文本内容;然后您必须向 p标签追加文本内容；最后，您必须向已有元素追加这个新元素。

<div id="div1">
</div>
<script>
	var p = document.createElement("p");
	var text = document.createTextNode("这是一个新段落。");
	p.appendChild(text);
	var div = document.getElementById("div1");
	div.appendChild(p);
</script>

4.删除已有的 HTML 元素

<div id="div1">
   	 <p id="p1">这是一个段落。</p>
  	 <p id="p2">这是另一个段落。</p>
</div>
<script>
	var parent=document.getElementById("div1");
	var child=document.getElementById("p1");
	parent.removeChild(child);
</script>

5.处理事件

点击按钮时改变 p标签的文本：

<p id="p1">Hello world!</p>
<button  onclick="ChangeText()">修改</button>
<script>
function ChangeText(){
 	document.getElementById("p1").innerHTML="你好，世界！";
}  
</script>