`

DOM简介

    博客分类：
  • ajax
JavaScriptHTMLXML脚本浏览器 
阅读更多

全称是文档对象模型（Document Object Model），它在本质上是一种文档平台。

DOM是表示文档（如HTML和XML）和访问/操作构成文档的各种元素的应用程序接口（API）。支持JavaScript的所有浏览器都支持DOM。DOM实际上是一个能够让程序和脚本动态访问和更新文档内容和结构和样式的一种语言平台。

文档对象模型（DOM）以树形结构表示HTML和XML文档，定义了遍历这个树和检查/修改树的节点的方法和属性。在实际应用中，DOM一般被分为不同的部分（核心，XML和HTML），它们分别对应不同的版本。（core DOM，XML DOM，HTML DOM）。

HTML DOM是针对HTML的文档对象模型，它定义了针对HTML的标准对象集合以及访问和操作HTML文档的方法。

最简单的实例：使用DOM访问HTML中的对象+自动弹出窗口。

Code:
  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
  2. <html>
  3. <head>
  4. <title>dom1.html</title>
  5. <metahttp-equiv="content-type"content="text/html;charset=UTF-8">
  6. <scriptlanguage="JavaScript"type="text/javascript">
  7. functionadvertis()
  8. {window.open("ad.html","my","toolbar=no,left=150,top=200,menubar=no
  9. width=250,height=200"）; /*ad.html 自行编写×/
  10. }
  11. functioncheck()
  12. {
  13. if(document.myform.txt1.value=="")
  14. alert("请输入姓名！");
  15. else
  16. alert("您的姓名是："+document.myform.txt1.value);
  17. }
  18. </script>
  20. </head>
  22. <body onload="advertis()">
  23. <formname="myform"action="">
  24. <p>
  25. 请输入您的姓名：
  26. <inputtype="text"name="txt1"value="">
  27. </p>
  28. <p>
  29. <inputtype="button"value="确定"name="ok"onclick="check()">
  30. </p>
  31. </form>
  33. </body>
  34. </html>

//####实例2 类似漂浮广告的功能

Code:
  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
  2. <html>
  3. <head>
  4. <title>dom2.html</title>
  5. <metahttp-equiv="content-type"content="text/html;charset=UTF-8">
  6. <scriptlanguage="javascript"type="text/javascript">
  7. varx1=10;
  8. vary1=-10;
  9. /*控制图片移动的函数*/
  10. functionfly(){
  11. flypic.style.top=parseInt(flypic.style.top)-y1;
  12. flypic.style.left=parseInt(flypic.style.left)-x1;
  13. if(parseInt(flypic.style.top)<0){
  14. y1=-y1;
  15. }
  16. if(parseInt(flypic.style.top)>300){
  17. y1=-y1;
  18. }
  19. if(parseInt(flypic.style.left)<0){
  20. x1=-x1;
  21. }
  22. if(parseInt(flypic.style.left)>630){
  23. x1=-x1;
  24. }
  25. setTimeout("fly()",300);
  26. }
  27. </script>
  29. </head>
  31. <bodyonload="fly()">
  32. <divid="flypic"style="position:absolute;top:20;left:40">
  33. <imgsrc="smile.gif"alt="">
  34. </div>
  35. </body>
  37. </html>

//###随滚动条滚动。

Code:
  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
  2. <html>
  3. <head>
  4. <title>dom3.html</title>
  5. <metahttp-equiv="content-type"content="text/html;charset=UTF-8">
  6. <scriptlanguage="javascript">
  7. //控制图片移动的函数
  8. functionmoveIt(){ //垂直滚动。
  10. truck.style.top=document.body.scrollTop+parseInt(document.body.clientHeight)-90;
  12. setTimeout('moveIt()',1000);
  13. }
  14. </script>
  16. </head>
  18. <bodyBGCOLOR="#ffffff"TEXT="#000000"link="#0000ff"Vlink="#660099"onload="moveIt()">
  19. <divid="truck"style="position:relative;top:30px;left:500px;width:40px;height:16px;">
  20. <imgsrc="smile.gif">
  21. </div>
  23. </body>
  25. </html>
分享到：
| CSS的一些实用例子
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    文档对象模型DOM简介

    文档对象模型DOM简介，文档对象模型DOM

    HTML DOM简介.rar

    目录如下： 1. DOM可以做什么？ 2. DOM的结构 3. 访问DOM节点1——getElementById() 4. 访问DOM节点2——getElementsByTagName() 5. 访问DOM节点3——通过节点关系 6. DOM节点信息 ...11. DOM简介总结

    HTML DOM基础教程（网页形式）

    DOM 简介 DOM 节点 DOM 节点树 DOM 节点访问 DOM 节点信息 DOM How To DOM 参考 DOM 总结 DOM 实例 DOM 实例 DOM 对象 DOM Window DOM Navigator DOM Screen DOM History DOM Location DOM Document ...

    程序员为什么还要刷题-html-dom:HTML和DOM简介。[html，dom]

    简介 目录 学习目标 使用 HTML 构建一个简单的网页 解释 HTML 文档的各个部分，包括： &lt;head&gt;和&lt;body&gt;标签 容器元素，例如 、 、 、 和 常见元素，例如 、 、 、 和 解释HTML和DOM之间的区别 准备 ...

    详谈DOM简介及节点、属性、查找节点的方法

    下面小编就为大家分享一篇详谈DOM简介及节点、属性、查找节点的方法，具有非常好的参考价值，一起跟随小编过来看看吧，希望对大家有所帮助

    JavaScript DOM学习第一章 W3C DOM简介

    在这一章我主要介绍已经被新一代的浏览器所支持的W3C 第一级的DOM。对他的运作做一个大概的了解并且让你知道你可以对他们做什么。 首先是对于DOM的一些建议和DOM设计的目的，然后我会告诉你什么是节点（nodes）并且...

    Dom4j_使用简介

    Dom4j_使用简介DOM4J是dom4j.org出品的一个开源XML解析包，它的网站中这样定义： Dom4j is an easy to use, open source library for working with XML, XPath and XSLT on the Java platform using the Java ...

    XML编程从入门到精通

    • DOM 简介 • DOM 节点 • DOM 节点树 • DOM 解析 • DOM 加载 • DOM 属性和方法 • DOM 访问节点 • DOM 节点信息 • DOM 节点列表 • DOM 遍历节点 • DOM 浏览器 • DOM 定位节点 节点操作 • DOM 获取节点 ...

    Dom4j使用简介

    Dom4j使用简介，日志 开发java必看，初级高级开发必看

    HTML DOM简介_动力节点Java学院整理

    通过 JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。下面通过本文给大家分享HTML DOM的相关知识，感兴趣的朋友一起看看吧

    dom4j使用简介

    Dom4j 是一个易用的、开源的库，用于 XML，XPath 和 XSLT。它应用于 Java 平 台，采用了 Java 集合框架并完全支持 DOM，SAX 和 JAXP

    Dom4J 1.6.1jar包+API+使用简介

    包含Dom4Jjar包，API以及使用简介

    菜鸟的Javascript笔记.rar

    1~20节讲述javascript JavaScript还有什么内容？ 这个菜鸟的笔记里面没有谈到JavaScript中的对象，比如说时间对象和字符串对象，这些内容可以在“菜鸟的JavaScript对象笔记”中找到。...来看看HTML DOM简介吧。

    Dom4j下载及使用Dom4j读写XML简介

    Dom4j解析教程。详细讲解如何使用dom4j解析xml，简单易懂。

    Dom4j解析XML+使用简介

    内含Dom4j解析XML和使用简介

    Dom4j使用简介 帮助文档

    一直没有找到Dom4j的中文文档,弄了个不错的简介 大家分享一下.

    Dom4j 使用简介

    Dom4j 使用简介,Dom4j 使用简介

Magicbox
Global site tag (gtag.js) - Google Analytics