DHTML【11】-DOM
日期：2014-05-16 浏览次数：20528 次
大家好，从今天开始，我们将进入DOM的学习。
DOM？DOM是何东东呢？大家还记得我在前面提过的DOM树吗？就是我在前面讲HTML的时候画的那个图，那个其实就是一个简单的DOM树，浏览器在解析HTML代码时，会生成这样一颗DOM树，然后将节点封装成对象，DOM树占用一定的内存空间，对执行效率有一定程度的影响，因此我们在使用时要注意DOM树的优化。
DOM语法全是Javascript语法，也写在script标签中，type格式也是text/javascript.我们可以通过DOM对象实现动态的网页技术，可以动态创建HTML标签，也可以动态的加载CSS样式，因此DOM是个非常牛X的技术。
下面看一个静态页面无法实现的例子：
<html>
<head>
<title>First DOM</title>
<script type="text/javascript">
function FirstDom()
{
alert("我是第一个DOM技术！");
}
function Del()
{
if(confirm("大人，您真的要删除吗？"))
{
alert("确定");
}
else{
alert("取消");
}
}
</script>
</head>
<body>
<input type="button" onclick="FirstDom()"value="点我啊！"/>
<input type="button" onclick="Del()" value="删除"/>
</body>
</html>
FristDom方法绑定到第一个按钮的单击事件，所以当第一个按钮单击时就会执行FirstDom方法；Del方法绑定到第二个按钮，Del方法里用到了一个confirm方法，confirm方法会弹出提示对话框，如果用户选择“确定”返回true，如果选择“取消”返回false，常用于用户删除文件时让用户确认，防止误删文件带来不必要的损失。
再看下面例子：
<html>
<head>
<title>First DOM</title>
<script type="text/javascript">
function Change()
{
setInterval("alert(newDate().toLocaleTimeString())",2000);
}
</script>
</head>
<body>
<input type="button" onclick="Change()"value="大人，点我啊！"/>
</body>
