这四个对象是从HTML结构中逐层深入的，分别代表了HTML结构中所有的内容；
1、Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
Document对象集合有forms[],images[],links[],anchors[],all[],applets.
document对象的方法：
write() 方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容。
2、Element对象
element对象表示的是HTML元素。
element（也可以说这是HTML元素）常用的属性和方法：
1、appendChild() 方法向节点添加最后一个子节点。
<body> <ul id="myList"><li>Coffee</li><li>Tea</li></ul> <p id="demo">请点击按钮向列表中添加项目。</p> <button onclick="myFunction()">亲自试一试</button> <script> function myFunction() { var node=document.createElement("LI"); var textnode=document.createTextNode("Water"); node.appendChild(textnode); document.getElementById("myList").appendChild(node); } </script> <p><b>注释：</b>首先创建 LI 节点，然后创建文本节点，然后把这个文本节点追加到 LI 节点。最后把 LI 节点添加到列表中。</p> </body>
2、childNodes 属性返回节点的子节点集合，以 NodeList 对象。
<body><p id="demo">请点击按钮来获得 body 元素子节点的相关信息。</p> <button onclick="myFunction()">试一下</button> <script> function myFunction() { var txt=""; var c=document.body.childNodes; for (i=0; i<c.length; i++) { txt=txt + c[i].nodeName + "<br>"; }; var x=document.getElementById("demo"); x.innerHTML=txt; } </script> <p><b>注释：</b>元素中的空格被视为文本，而文本被视为节点。</p> </body>
3、className 属性设置或返回元素的 class 属性。
<html> <body id="myid" class="mystyle"> <script> var x=document.getElementsByTagName('body')[0]; document.write("Body CSS 类：" + x.className); document.write("<br>"); document.write("另一个替代方法："); document.write(document.getElementById('myid').className); </script> </body> </html>
4、getAttribute() 方法返回指定属性名的属性值。
<html> <body> 请阅读 <a href="/jsref/dom_obj_attributes.asp" target="_blank">Attr 对象</a>， <p id="demo">请点击按钮来显示上面这个链接的 target 属性值。</p> <button onclick="myFunction()">试一下</button> <script> function myFunction() { var a=document.getElementsByTagName("a")[0]; document.getElementById("demo").innerHTML=a.getAttribute("target"); } </script> </body> </html>
5、innerHTML 属性设置或返回元素的 inner HTML。
<html> <head> <script> function changeLink() { document.getElementById('myAnchor').innerHTML="W3School"; document.getElementById('myAnchor').href="http://www.w3school.com.cn"; document.getElementById('myAnchor').target="_blank"; } </script> </head> <body> <a id="myAnchor" href="http://www.microsoft.com">微软</a> <input type="button" onclick="changeLink()" value="更改链接"> </body> </html>
6、element.removeAttribute()从元素中移除指定属性。/element.removeAttributeNode()移除指定的属性节点，并返回被移除的节点。
element.removeChild()从元素中移除子节点。/element.replaceChild()替换元素中的子节点；
<html> <body> <ul id="myList" style="color:red"><li>Coffee</li><li>Tea</li><li>Milk</li></ul> <p id="demo" style="color:red" >点击按钮来删除列表中的首个项目。</p> <button onclick="myFunction1()">替换节点</button> <button onclick="myFunction()">删除节点</button> <button onclick="myFunction2()">移除P的style属性</button> <script> function myFunction() { var list=document.getElementById("myList"); list.removeChild(list.childNodes[0]); } function myFunction1() { //创建新文本节点 var newnode = document.createTextNode('water'); var list=document.getElementById("myList"); list.replaceChild(newnode,list.childNodes[0]); } function myFunction2(){ document.getElementsByTagName("P")[0].removeAttribute("style"); //必须指定第几个标签，如[0]表示第一个p标签； alert("移除成功！"); } </script> </body> </html>
7、textContent 属性设置或返回指定节点的文本内容，以及它的所有后代。
<html> <body> <p id="demo">点击按钮来获得 button 元素的文本内容。</p> <button onclick="myFunction()">试一下</button> <script> function myFunction() { var c=document.getElementsByTagName("BUTTON")[0]; var x=document.getElementById("demo"); x.innerHTML=c.textContent; } </script> <p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持此属性。</p> </body> </html>
3、Attribute对象
在 HTML DOM 中，Attr 对象表示 HTML 属性。attribute属性是属于element对象（即HTML元素的属性）。
4、Event对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
HTML 标签定义的事件行为：
鼠标 / 键盘属性：
