DHTML【11】--DOM

灰太狼 2023-01-17 06:23 48阅读 0赞

大家好，从今天开始，我们将进入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>

function FirstDom()

alert("我是第一个DOM技术！");

function Del()

if(confirm("大人，您真的要删除吗？"))

alert("确定");

else\{

alert("取消");

</script>

</head>

<body>

</body>

</html>

FristDom方法绑定到第一个按钮的单击事件，所以当第一个按钮单击时就会执行FirstDom方法；Del方法绑定到第二个按钮，Del方法里用到了一个confirm方法，confirm方法会弹出提示对话框，如果用户选择“确定”返回true，如果选择“取消”返回false，常用于用户删除文件时让用户确认，防止误删文件带来不必要的损失。

再看下面例子：

<html>

<head>

<title>First DOM</title>

function Change()

setInterval("alert(newDate().toLocaleTimeString())",2000);

</script>

</head>

<body>

</body>

</html>

setInterval方法表示每隔一段时间执行一段代码，第一个参数为代码字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识，可以用var类型获取，另外还有clearInterval方法，表示取消setInterval的定时执行，因为setInterval可以设定多个定时，所以clearInterval要指定消除那个定时器的标识，即setInterval的返回值，setInterval的返回值用var获取。

看到上面代码的执行效果，你是否有一种回到了Winform的感觉，通过对象事件触发方法进行交互操作，这就是DOM的强大之处，学习DOM就是学习DOM中的常用对象和常用方法，进而灵活运用对象进行各种交互操作，进而减少与服务器的数据传输以及丰富浏览器端的各种操作。

下一节将开始介绍DOM中的部分常用对象和方法，内容很多，但是我只介绍其中最常用的对象，剩下的要靠自己查阅帮助文档进一步学习，学习的时候应该有所侧重，重在基础。好的，今天就到这里，我们下一节再见！