`

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的一些实用例子
评论
发表评论

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

相关推荐

    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 ...

    DOM和BOM的使用

    DOM 简介 DOM 是一个平台中立、语言中立的接口，它允许开发者通过 JavaScript 操作文档的内容和结构。DOM 将 HTML 文档抽象为一个树形结构，文档中的每个元素都是一个节点，节点之间通过父子关系连接。DOM 提供了...

    【学习 XML DOM】.pdf

    XML DOM 简介： XML DOM 提供了一种平台和语言中立的接口，允许开发者通过编程方式访问和修改XML文档的结构和内容。DOM 分为三个不同的部分或级别：核心DOM，适用于任何结构化文档；XML DOM，专门针对XML文档；以及...

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

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

    张龙 Schema DOM笔记

    1. **DOM简介**： - **DOM**（Document Object Model）是指文档对象模型。 - 是一种标准接口规范，用于处理XML数据。 - 提供了一种与语言无关、与平台无关的方法来访问和修改XML文档的内容。 2. **DOM的应用**：...

    传播智客扬中科老师讲的DOM 学习笔记

    ### DOM简介 DOM是一种处理HTML和XML文档的标准接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM将文档视为树结构，每个节点代表文档中的某个部分，如元素、属性或文本。 ### DOM选择器与节点...

    Javascript DOM编程艺术(中文版)

    **1.1 DOM简介** DOM（Document Object Model）即文档对象模型，是一种与平台和语言无关的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM 主要用于 HTML 和 XML 文档。 **1.2 DOM的层次结构**...

    XML DOM教程

    **XML DOM 简介** DOM将XML文档解析为一个节点树，其中每个元素、属性、文本块等都是一个独立的节点。这个模型使得开发者可以通过JavaScript或其他支持DOM的语言来访问和操作文档的任何部分。DOM的核心在于它的树状...

    dom解析基本操作删除 修改……

    #### 一、DOM简介 DOM (Document Object Model) 是一种用于处理结构化文档的标准接口，它能够以树形结构表示文档，并提供了一套API来访问、修改和创建这些结构化的文档对象。在Java中，DOM是通过一系列的类库实现的...

    关于dom和jquery对象理解

    #### DOM简介 在探讨DOM与jQuery之间的关系之前，我们首先需要明确什么是DOM（Document Object Model）。DOM是一种用于表示HTML或XML文档的标准接口，它提供了一种方式来读取、操作文档中的元素、属性以及文本。...

    W3C DOM模型参考手册

    #### 二、DOM简介 ##### 2.1 什么是DOM？ DOM是一种标准，用于将XML或HTML文档表示为树形结构，使得程序和脚本能够轻松地改变文档的内容、结构和样式。通过DOM，开发者可以访问文档中的每个元素，并对它们进行操作...

    html—dom教程

    #### 一、HTML DOM 简介 - **基础知识**：在学习HTML DOM之前，建议读者掌握HTML/XHTML和JavaScript的基本知识。 - **DOM 定义**：DOM（Document Object Model）是一种平台和语言中立的接口，它使程序和脚本能够动态...

    dom4j使用简介

    **DOM4J使用简介** DOM4J 是一个强大的 Java 库，专为处理 XML 文档而设计。它提供了丰富的 API，使得在 Java 中解析、创建、修改 XML 文件变得简单高效。DOM4J 不仅支持 DOM（文档对象模型）和 SAX（简单API for ...

    JavaScript DOM学习第一章 W3C DOM简介

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

    使用DOM合理操作JS

    #### 一、DOM简介 **DOM**，即**Document Object Model**（文档对象模型），是一项由W3C（World Wide Web Consortium，万维网联盟）组织制定的应用编程接口，用于处理HTML、XML等文档。通过DOM，开发者能够以一种...

    dom生成xml文件

    #### 一、XML与DOM简介 **XML (Extensible Markup Language)** 是一种标记语言，用于定义结构化的文档格式。它具有跨平台性，并且被广泛应用于数据交换、配置文件以及文档存储等领域。XML文档通常包含一系列嵌套的...

    DOM Scripting Web Design JavaScript and the Document Object Model (2nd)

    #### 二、DOM简介 **文档对象模型**(Document Object Model,简称DOM)是一种与平台和语言无关的应用程序接口(API)，它定义了如何在XML或HTML文档中表示、修改和查询数据。通过DOM，开发者可以轻松地访问页面中的元素...

    axiom-dom-1.2.8.jar.zip

    一、Axiom DOM简介 Axiom DOM是一个基于StAX（Streaming API for XML）的高性能XML处理库，它为开发者提供了构建和操作DOM树的能力。与传统的DOM实现相比，Axiom DOM更注重性能和内存效率，特别适合处理大型或复杂...

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