`
yanghaoli
  • 浏览: 291333 次
社区版块
存档分类
最新评论

什么是Dom？

 
阅读更多

Dom:英文全称－Document Object Model 译成中文即是：文档对像模型．听起来很术语，其实就是文档内容的结构关系．文档类型可以是HTML或XML
Dom具有对Html文件和XML文件元素的访问控制能力，简单点说利用Dom可以对某个html或xml文件添加，修改，删除元素．更改其现有的结构或内容．如果你未接触过Dom，你会发现Dom太神奇了．．．不管你是菜鸟还是高手，在这个注重用户体验的web设计时代里，Dom是至关重要的. 如果你是一名有经验的web设计者，你应该看到过或用过以下这些命令或方法 getElementById getElementsByTagName offsetParent appendChild getAttribute 不过至今仍有人认为这些都是JavaScript中的东西，其实不然，这些全是Dom中很重要的方法！

Dom手册下载地址

Dom并非一种编程语言，Dom只是提供了一系列的接口，利用Dom的这些接口可以很方便的读取，修改，删除Html和XML文件中的标签元素和文本内容．在这里我们侧重于讲解Dom对Html文件的操作．

那么Dom是如何读取和管理Html文件的呢？首先你必须要了解html的源码结构．看图

如果你有学过或写过Html，那么你会对上图一目了然．我想要说明的就是Html的源码结构是有层次的，而且标签与杯签之间还存在着父子，或相邻的关系．上图不难看出HTML这个标签是最顶级的．最上层的．也可以理解成html文件的根．其次是Head与Body标签．这两个标签是相邻的．也可以理解成兄弟关系．但他们都属于html的子标签或称为子元素．然后Body标签内包含了Table,Div,Div．这三个标签你可以理解为Body的子标签或子元素．Body为父他们为子．Head所含的标签也是同理．另外第一个div内包含了另一个div．第二个div内包含了一些文本内容．他们的关系也是父子关系．Dom正是利用了Html源码的这种关系结构．而巧妙的在你的html源码中行走自如．犹如一位武林高手一般．尽情地施展他的＂凌波微步＂．看下面的代码．代码结构与上图是吻合的．不同的是多了几个按扭来执行一些dom的指令操作．运行以后你便走进了Dom的神秘与精彩世界！！！

 

<html> 

<head> 

<title>这是网页的标题</title> 

<link /> 

<meta /> 

<body> 

<table border="1"><table> 

<div><div></div></div> 

<div>文本内容</div> 

<input type="button" value="弹出html标签" onclick="alert_HTML()"/> 

<input type="button" value="弹出body标签" onclick="alert_Body()"/> 

<input type="button" value="弹出head标签" onclick="alert_Head()"/> 

<input type="button" value="修改网页标题" onclick="up_Title()"/> 

<input type="button" value="更改表格" onclick="up_Table()"/> 

<input type="button" value="获取第一个div和他的子元素" onclick="get_Div()"/> 

<input type="button" value="更改第二个div中的文本内容" onclick="up_div_text()"/> 

</body> 

</html> 

<script type="text/javascript"> 

function alert_HTML(){ //弹出html标签函数 

var html = document.documentElement; 

alert(html.tagName); 

} 

function alert_Body(){ //弹出body标签函数 

var body = document.body; 

alert(body.tagName); 

} 

function alert_Head(){//弹出head标签函数， 

var html = document.documentElement; 

//head是html标签中的第一个子元素 

//childNodes可以获取某一标签内的所有子元素 

var head = html.childNodes[0].tagName; 

alert(head); 

} 

function up_Title(){ 

//注意title标签内的＂这是网页的标题＂将被改变． 

document.title = "Web圈提提供的Dom图解入门教程"; 

} 

function up_Table(){//为表格添加行，添加列并写入文本内容 

var Table = document.getElementsByTagName("table")[0];//获取网页内第一个表格 

var Tr = Table.insertRow(0);//为表格添加一行 

var Td = Tr.insertCell(0);//为新建的行，添加一列 

Td.innerHTML = "我是表格中的文本"; //利用innerHTML属性向td写入文本 

} 

function get_Div(){//获取第一个div和他的孩子 

var div = document.getElementsByTagName("div")[0]; 

alert("我是第一个"+div.tagName); 

var child_div = div.childNodes[0];//虽然是子div,但是按解析顺序他在该页内是第二个出现的div, 

alert("我是第一个div的子元素．我也是"+child_div.tagName); 

} 

function up_div_text(){ 

var div = document.getElementsByTagName("div")[2];//其实如果按解析顺序该div在本页应该是第3个， 

div.innerHTML = "欢迎阅读web圈提供的Dom图解入门教程．www.jb51.net 作者：康董"; 

} 

</script>

上面演示的代码实例．略有繁琐．并非是Dom最优秀的使用方法．但足以让你了解Dom是怎样工作的．
下面将演示Dom迅速访问某个标签的方法．可以让你在成千上万个html标签中迅速找到你想的某个标签．比如你可以为你的html标签添加一个 ID属性．在Dom中有一个getElementById方法．该方法可以根据html标签的ID属性值，迅速找到这个标签．然后对其进行更改或其他操作．
下面的代码我只为table和第一个div添加一个id属性值．利用getElementByid迅速向able和第一个div的子div添加内容

 

<html> 

<head> 

<title>这是网页的标题</title> 

<link /> 

<meta /> 

<body> 

<table id="a" border="1"><table> 

<div id="b"><div></div></div> 

<div>文本内容</div> 

<input type="button" value="更改table" onclick="up_table()"/> 

<input type="button" value="为第一个div的子div写入文本" onclick="up_div()"/> 

</body> 

</html> 

<script type="text/javascript"> 

function up_table(){//更改table函数 

var Table = document.getElementById("a");//根据id获取标签元素 

var Tr = Table.insertRow(0); 

var Td = Tr.insertCell(0); 

Td.innerHTML = "欢迎光临Web圈，网址：www.web666.net"; 

} 

function up_div(){//为第一个div的子div添加文本内容 

var div = document.getElementById("b"); 

div.childNodes[0].innerHTML="我是子div，我被写入文本了"; 

} 

</script>

上面的两个例子中分别使用了Dom的以下方法：
document：对当前整个Html网页的引用
documentElement：获取html和xml文件中的根元素．在html文件中总是返回Html标签．在xml文件中总是返回最顶层的那个元素
getElementsByTagName：根据指定的标签名称，来获取网页中所有相同的标签元素．如：table,或div．则会找出网页中所有table元素，或所有div元素．以一个类似数组的方式来返回对这些元素的引用．
getElementById：根据指定的标签id值．来寻找标签元素．并返回对该标签的引用
childNodes：获取某个标签下所有的子标签元素，也就是我所说的孩子元素．并以一个类似数组的方式来返回对所有子元素的引用
insertRow：为表格增加一行
insertCell：为表格的某行增加一列
该入门教程只讲解了Dom中的一部份知识，请了解更多关于Dom的内容

Dom可以在网页中做什么？

HTML Dom中最常用的几个方法之查找元素

  1. Dom之引用当前整个网页文档：document
  2. Dom如何快速在网页中查找某一元素：getElementById
  3. Dom中查找一组标签，具有相同名称的标签元素：getElementsByTagName
  4. 根据标签的Id属性值或name属性来查找多个元素：getElementsByName
Dom中创建，添加，删除，修改，替换，复制，网页中的标签和文本内容的方法如下．
  1. 在网页中的创建一个标签元素：createElement
  2. 创建一段文本内容：createTextNode
  3. 向网页中添加元素：appendChild
  4. 删除元素的Dom方法是：removeChild
  5. 修改网页中标签元素的属性：setAttribute
  6. 替换已存在的标签或元素：replaceChild
  7. 复制克隆已存在的标签或元素：cloneNode
  8. 获取和修改元素内的html标签与文本内容：innerHTML
  9. 获取或修改元素的文本内容，仅支持IE：innerText
  10. 获取或修改元素的文本内容，支持FF：textContent
HTML Dom中还专门提供了一组接口用来操作网页中的表格Table元素
  1. HTML Dom中的insertRow方法可以为表格增加一行
  2. 删除表格中一行的方法是：deleteRow
  3. HTML Dom中的insertCell方法可以为表格某行中增加一列
  4. 删除行中的一列的方法是：deleteCell
  5. HTML Dom中的createCaption方法可以为表格创建一个标题
  6. HTML Dom中的createTHead方法可以为表格创建一个Thead
  7. HTML Dom中的createTFoot方法可以为表格创建一个TFoot
  8. 引用表格中所有行的属性为：rows
  9. 引用表格中某行的所有列：cells
  10. 移动表格中的行，只支持IE：moveRow
Dom中操作父元素，子元素，兄弟元素的相关命令
  1. 获取父元素的指令是：parentNode
  2. 获取元素中第一个子元素：firstChild
  3. 获取元素中最后面的那个子元素：lastChild
  4. 获取元素中所有的子元素：childNodes
  5. 获取前一个兄弟元素：previousSibling
  6. 获取后一个兄弟元素
作者：康董 2010-10-22

Dom手册使用说明

你看到左侧的列表内容,即是Dom手册,你可以点击他们来了解其详细说明和用法.利用索引框可以快速的在Dom手册列表中查找你想要的内容. Dom所有方法或属性均为英文字母,所以不支持中文搜索.例如你可以尝试输入offsetTop或offsetLeft自动补全功能会让你事半功倍.该手册每页显示50条内容,您可以 使用分页导航来查阅. 如果你在该Dom手册中未找到你 想要的内容,请查看下面的Dom手册完善计划!

Dom手册完善计划

Web 圈致力于打造最全最详细的 html手册,css手册,dom手册,javascript手册,xmlhttp手册.这离不开您的支持与参与!高手必与众同乐,分亨是 我们永恒的主题,所以不要吝啬您的代码.唯有分享,才能共同步,共同提高.如果您未在该Css手册内容中,查找到您想要的内容.请参与我们的完善 计划,或者您对该Dom手册内容中解释不到位的,也可以参与补充.我们非常乐意接收您的建议!参与手册完善计划

该Dom手册的特点

web 圈提供的Dom在线手册的特点有:每个Dom的方法或属性的语法说明,实例演示让您深刻理解每个Dom的方法或属性,每个方法或属性兼容的浏览器以及是否附合W3C标准．并且让每个网友参与到其中,力求集思广益.

0
顶
0
踩
分享到：
| JQuery操作Dom
评论
发表评论

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

相关推荐

    vue面试题分享如何获取dom?

    如何获取dom?为什么使用key?v-if和v-for的优先级？

    XML_DOM 教程 XML_DOM 教程

    **什么是DOM？** DOM定义了一种标准，通过它可以以结构化的方式访问和操作XML文档。它将XML文档转换为一个节点树，其中每个节点代表XML文档的一部分。例如，XML文档中的每个元素是一个元素节点，文本内容是文本节点...

    W3C DOM模型参考手册

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

    04.任务四：Virtual DOM 的实现原理

    1. **什么是DOM？** Document Object Model（DOM）是HTML和XML文档的结构化表示，它允许程序和脚本动态地更新、添加或删除页面元素。DOM将HTML或XML文档解析为一棵节点树，每个节点代表文档的一部分。直接操作DOM会...

    什么是DOM对象？.docx

    DOM 对象的概念和结构 DOM 对象的定义和概念 DOM 全称 Document Object Model（文档对象模型），是由 W3C 组织定义的一个标准。在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素...

    DOM基础和基本API.txt

    #### 一、什么是DOM？ DOM（Document Object Model）是一种文档对象模型，它是W3C组织推荐的标准之一，用于表示和处理结构化的文档（如HTML或XML）。DOM提供了一种方式，使得程序可以读取、修改文档的内容和结构，...

    最新系统分析师考试复习资料(精简整理版).pdf

    * 什么 时候使 用 DOM？：在需要解析和处理大型 XML 文档时，使用 DOM 技术。 * 什么 时候使 用 SAX？：在需要解析和处理小型 XML 文档时，使用 SAX 技术。 六、HTML技术 * HTML 的缺点：HTML 是一种用于描述网页...

    删除DOM节点 删除DOM节点

    删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点...

    dom4j-1.6.1 与 dom4j-2.0.0-ALPHA

    DOM4J是一个强大的Java库，专门用于处理XML文档。它提供了灵活、高效的API，使得XML的解析、创建、修改和查询变得简单。这次我们有两个版本的DOM4J库：1.6.1和2.0.0-ALPHA。这两个版本在功能、性能和API设计上都有所...

    DOM4J jar包 xml解析 所有的dom4j-1.6.1 dom4j-2.0.2 dom4j-2.1.1包 导入直接使用

    DOM4J是一个强大的Java库，专门用于处理XML文档。它提供了灵活且高效的API，使得XML的解析、创建、修改和查询变得简单。DOM4J的名字来源于“Document Object Model for Java”，它采用面向对象的设计思想，提供了对...

    dom手册,js dom api,java dom api

    DOM API是用于操作DOM的一系列接口和方法，分别有JavaScript DOM API和Java DOM API。 **DOM Level 1规范** DOM Level 1是最早的标准版本，定义了处理HTML和XML文档的基本接口。该规范于1998年10月1日被W3C（万维网...

    firefox DOM Inspector 火狐 dom 查看器插件 天涯浪子

    DOM Inspector是Mozilla Firefox的一个扩充套件，官方中文版上称之为DOM观察器，在安装Mozilla Firefox时，可以在自订安装中选择是否安装DOM Inspector，如果在安装Mozilla Firefox时没有选择自订安装以安装DOM ...

    domtoimage使用HTML5canvas从DOM节点生成图像

    6. **Web性能优化**：转换DOM到图像可能会涉及大量计算，因此理解性能优化技巧，如延迟加载、异步处理、减少DOM操作等，对于优化这个过程至关重要。 7. **跨域问题**：由于同源策略的限制，当涉及到图片的跨域请求...

    DOM和BOM的使用

    DOM 和 BOM 的使用 DOM（Document Object Model）和 BOM（Browser Object Model）是前端开发中两个基础概念。DOM 是一个文档对象模型，它将 HTML 文档抽象为一个树形结构，允许开发者通过 JavaScript 操作文档的...

    dom4j dom4j dom4j dom4j

    DOM4J是一个强大的Java库，专门用于处理XML文档。它提供了灵活且高效的API，使得XML的解析、创建、修改和查询变得简单易行。在Java世界中，DOM4J是与DOM、SAX和JDOM等其他XML处理库并驾齐驱的一个选择，尤其在处理...

    dom4j需要的包

    DOM4J是一个强大的Java库，专门用于处理XML文档。它提供了灵活且高效的API，使得XML的解析、创建、修改和查询变得简单。DOM4J的名字来源于“Document Object Model for Java”，它采用面向对象的设计思想，提供了...

    dom-helpers, 小型模块化面向 IE8 的DOM helper 库.zip

    dom-helpers, 小型模块化面向 IE8 的DOM helper 库 dom助手用于 ie8 的微型模块 DOM lib安装npm i -S dom-helpers大多数只是普通的DOM API不一致性的包装器，跨浏览器 工作最小，大多数都是从 jQuery 。 这个库不...

    dom4j_dom4j1.6.1安装包_

    DOM4J是一个强大的Java库，专门用于处理XML文档。它提供了灵活、高效的API，使得XML的解析、创建、查询和修改变得更为简单。在本文中，我们将深入探讨DOM4J 1.6.1版本的安装及其在Maven项目中的应用。 首先，DOM4J...

    Dom4j的使用(全而好的文章)

    ### Dom4j的使用详解 #### 一、概述 Dom4j是一款优秀的开源XML解析库，专门为Java平台设计。它不仅支持DOM、SAX和JAXP标准，还提供了便捷的API来处理XML数据，包括读取、创建、修改XML文档等功能。与同类工具如...

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

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

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