第五章 网页交互——文本对象模型【Document object model】
1 简单介绍DOM，dom是将html与javascript进行交互的工具。
【使用innerHTML时注意：html中的内容是按照HTML本身的先后顺序加载的。故js对应代码应置于html之后】
问题：
*document.getElementById时，id不存在返回null，存在返回对应字符串；
*planet.innerHTML其中innerHTML属性可以修改字符串的内容；
*getElementsByClassName可以返回类名的元素集合；
*getElementsByTagName返回与指定标签名匹配的元素；
*innerHTML甚至可以替换整个body的内容；
2 介绍window.onload=函数名;
回调函数，在网页加载完毕后再回调onload指向的指定函数。
3 关于元素的修改
（1）添加新元素
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");//创建标签元素
var node=document.createTextNode("这是新段落。");//创建文本
para.appendChild(node);//为p添加文本
//为div1添加元素
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
（2）修改元素
var planet=document.getElementById("p2");//获取DOM指定ID的元素
planet.innerHTML="Red Alert:hit by phaser fire!";//使用innerHtml属性修改内容
（3）删除元素
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
4 特性
（1）设置setAttribute();
例如：
planet.setAttribute("class","redtext");//为planet添加一个class名为redtext
（2）获取特性getAttribute();
例如：
var alttext=scoop.getAttribute("alt");//其中scoop类似于planet，alt为获取其值的特性的名称？？
5 完整例子
<!doctype html>
<html lang="en">
<head>
<title>My blog</title>
<meta charset="utf-8">
<style type="text/css">
.redtext{
color:red;
}
</style>
<script language="JavaScript" type="text/JavaScript">
function inni(){
var planet=document.getElementById("p2");//获取DOM指定ID的元素
planet.innerHTML="Red Alert:hit by phaser fire!";//使用innerHtml属性修改内容
planet.setAttribute("class","redtext");//设置特性
var attribute=planet.getAttribute("text");//获取特性，返回为null，不太清楚什么是特性？
console.log("I'm not see the image in the console,but I'm told it looks like:"+attribute);
}
window.onload=inni;
</script>
</head>
<body>
<h1>My blog</h1>
<div id="entry1">
<h2>Great day bird watching</h2>
<p id="p1">
Today I saw three ducks!<br />
I named them <br />
Huey,Louie,and Dewey.
</p>
<p id="p2">
I took a couple of photos...
</p>
</div>
</body>
70 </html>