[JavaScript]关于JavaScript中DOM对象的使用
DOM对象是个好东西。
通过 HTML DOM，可以访问 JavaScript HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model，缩写DOM）。
HTML DOM 模型被构造为对象的树。
![[JavaScript]关于JavaScript中DOM对象的使用_第1张图片](http://img.e-com-net.com/image/info5/99d5e69a24a94cf19f463e8e82efc1c6.gif)
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
它能够改变页面中的所有 HTML 元素，能够改变页面中的所有 HTML 属性，能够改变页面中的所有 CSS 样式，能够对页面中的所有事件做出反应。
一、查找元素
通常，通过 JavaScript，需要操作 HTML 元素。
为了做到这件事情，必须首先找到该元素。有三种方法来做这件事：
1.通过 id 找到 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
本例查找 id="intro" 元素：
var x=document.getElementById("intro");
亲自试一试
如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果为找到该元素，则 x 将包含 null。
本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
亲自试一试
二、更改元素内容
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
1.改变HTML输出流
JavaScript 能够创建动态的 HTML内容。
比如输出当前日期：Sun Jan 27 2013 12:07:33 GMT+0800
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
<!DOCTYPE html> <html> <body> <script> document.write(Date()); </script> </body> </html>
亲自试一试
提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
2.改变HTML内容：
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML本例改变了 <p> 元素的内容：
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
亲自试一试
本例改变了 <h1> 元素的内容：
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
</body>
</html>
亲自试一试
例子解释：上面的 HTML 文档含有 id="header" 的 <h1> 元素，我们使用 HTML DOM 来获得 id="header" 的元素，JavaScript 更改此元素的内容 (innerHTML)。
3.更改HTML的属性：
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value
本例改变了 <img> 元素的 src 属性：
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
亲自试一试
例子解释：上面的 HTML 文档含有 id="image" 的 <img> 元素，我们使用 HTML DOM 来获得 id="image" 的元素，JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）。
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style例子 1
下面的例子会改变 <p> 元素的样式：
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
亲自试一试例子 2
本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：
<h1 id="id1">My Heading 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点击这里
</button>
亲自试一试更多实例
Visibility
如何使元素不可见。你希望元素显示或消失吗？请点击上面的案例
HTML DOM Style 对象参考手册
如需完整的 HTML DOM Style 对象属性，请参阅W3C的HTML DOM Style 对象参考手册。
四、处理各种事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
1.对事件作出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
onclick=JavaScript
HTML 事件的例子：
-
当用户点击鼠标时
-
当网页已加载时
-
当图像已加载时
-
当鼠标移动到元素上时
-
当输入字段被改变时
-
当提交 HTML 表单时
-
当用户触发按键时
在本例中，当用户在 <h1> 元素上点击时，会改变其内容：
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
亲自试一试
本例从事件处理器调用一个函数：
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>
亲自试一试
2.HTML事件属性
如需向 HTML 元素分配 事件，可以使用事件属性。
实例
向 button 元素分配 onclick 事件：
<button onclick="displayDate()">点击这里</button>亲自试一试
在上面的例子中，名为 displayDate 的函数将在按钮被点击时执行。
HTML DOM 允许通过使用 JavaScript 来向 HTML 元素分配事件：
向 button 元素分配 onclick 事件：
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
亲自试一试
在上面的例子中，名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。
当按钮被点击时，会执行该函数。
4.onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<body onload="checkCookies()">亲自试一试
5.onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
<input type="text" id="fname" onchange="upperCase()">
亲自试一试
6.onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
一个简单的 onmouseover-onmouseout 实例：
亲自试一试
7.onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
一个简单的 onmousedown-onmouseup 实例：
亲自试一试
8.更多实例
- onmousedown 和 onmouseup ：当用户按下鼠标按钮时，更换一幅图像。
- onload： 当页面完成加载时，显示一个提示框。
- onfocus ：当输入字段获得焦点时，改变其背景色。
- 鼠标事件 ：当指针移动到元素上方时，改变其颜色 ；当指针移出文本后，会再次改变其颜色。
五、添加和删除节点
1.创建新的 HTML 元素
如需向 HTML DOM 添加新元素，必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<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);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
亲自试一试
例子解释：
这段代码创建新的 <p> 元素：
var para=document.createElement("p");如需向 <p> 元素添加文本，必须首先创建文本节点。这段代码创建了一个文本节点：
var node=document.createTextNode("这是新段落。");
然后必须向 <p> 元素追加这个文本节点：
para.appendChild(node);
最后必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：
var element=document.getElementById("div1");
这段代码向这个已有的元素追加新元素：
element.appendChild(para);
2.删除已有的 HTML 元素
如需删除 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>
亲自试一试
例子解释：
这个 HTML 文档含有拥有两个子节点（两个 <p> 元素）的 <div> 元素：
<div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div>
找到 id="div1" 的元素：
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
从父元素中删除子元素：
parent.removeChild(child);
提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。
不过很遗憾。DOM 需要清楚你需要删除的元素，以及它的父元素。
这是常用的解决方案：找到希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
至此，简单的DOM就算是介绍完毕。