Dom 是什么的详细说明

温馨提醒: Dom文档对象模型 chm版提供下载 点击下载

什么是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中很重要的方法! 我保证web圈提供的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)

相关推荐

  • Dom 是什么的详细说明

    温馨提醒: Dom文档对象模型 chm版提供下载 点击下载 什么是Dom Dom:英文全称-Document Object Model 译成中文即是:文档对像模型.听起来很术语,其实就是文档内容的结构关系.文档类型可以是HTML或XMLDom具有对Html文件和XML文件元素的访问控制能力,简单点说利用Dom可以对某个html或xml文件添加,修改,删除元素.更改其现有的结构或内容.如果你未接触过Dom,你会发现Dom太神奇了...不管你是菜鸟还是高手,在这个注重用户体验的web设计时代里,Do

  • JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性

    在web开发中,不可避免遇到要计算元素大小以及位置的问题,解决这类问题的方法是利用DOM提供的一些API结合兼容性处理来,所有内容大概分3篇左右的文章的来说明.本文作为第一篇,介绍DOM提供的与尺寸大小相关的DOM属性,提供一些兼容性处理的方法,并结合常见的场景说明如何正确运用这些属性. 1. 正确理解offsetWidth.clientWidth.scrollWidth及相应的height属性 假设某一个元素的横纵向滚动条都拖动到最末端,则offsetWidth.clientWidth.scr

  • vue 虚拟DOM的原理

    为什么需要虚拟DOM? 如果对前端工作进行抽象的话,主要就是维护状态和更新视图,而更新视图和维护状态都需要DOM操作.其实近年来,前端的框架主要发展方向就是解放DOM操作的复杂性. 运行js的速度是很快的,大量的操作DOM就会很慢,时常在更新数据后会重新渲染页面,这样造成在没有改变数据的地方也重新渲染了DOM 节点,这样就造成了很大程度上的资源浪费. 在jQuery出现以前,我们直接操作DOM结构,这种方法复杂度高,兼容性也较差.有了jQuery强大的选择器以及高度封装的API,我们可以更方便的

  • 详解react应用中的DOM DIFF算法

    前言 对我们搞前端的来说,目前最流行的两大前端框架毫无疑问当属React和Vue,对于这两大框架,想必大家也是再熟悉不过了.然而,这两大框架无一例外的全部放弃使用传统的DOM技术,却采用了以JS为基础的Virtual DOM技术,也可称作虚拟DOM.所以,到底什么是Virtual DOM?两大热门框架全部使用Virtual DOM的原因又是什么?接下来让我这个搞前端的人来好好地为您讲解一下DOM DIFF算法的牛逼之处. 什么是Virtual DOM? 如字面意思所说,Virtual DOM即

  • vue 虚拟DOM快速入门

    虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对象. 正常的 dom 节点在 html 中是这样表示: <div class='testId'> <p>你好</p> <p>欢迎光临</p> </div> 而在虚拟 dom 中大概是这样: { tag: 'div', attributes:{ class: ['testId']

  • javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系

    从那起,我已经对这些方法做了大量的研究,并且已经在很多场合使用他们.在很多任务中,他们被证明是非常有用的(特别关于结构的抽象 DOM 选择器). 1.DOMElement.contains(DOMNode) 这个方法起先用在 IE ,用来确定 DOM Node 是否包含在另一个 DOM Element 中. 当尝试优化 CSS 选择器遍历(像:"#id1 #id2"),这个方法很有用.你可以通过 getElementById 得到元素,然后使用 .contains() 确定 #id1

  • 轻松学习XML教程

    传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来. 但是,对于一些时效性很强的网站.传统的这种做法是不能满足的. XML越来越热,关于XML的基础教程网络上也随处可见.可是一大堆的概念和术语往往让人望而生畏,很多朋友问我:XML到底有什么用,我们是否需要学习它?我想就我个人学习过程的心得和经验,写一篇比较全面的介绍文章.首先有两点是需要肯定的: 第一:XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解,等待只会让你失去机会: 第

  • XML轻松学习手册(2)XML概念

    第二章 XML概念 导言 经过第一章的快速入门学习,你已经知道了XML是一种能够让你自己创造标识的语言,它可以将数据与格式从网页中分开,它可以储存数据和共享数据的特性使得XML无所不能.如果你希望深入学习XML,系统掌握XML的来龙去脉,那么我们首先还是要回到XML概念的问题上来.XML(Extensible Markup Language),一种扩展性标识语言."扩展性"标识"语言".每一个词都明确的点明了XML的重要特点和功能.我们来仔细分析: 一. 扩展性 二

  • JS中mouseover和mouseout多次触发问题如何解决

    问题描述 我希望当鼠标移动到id1上的时候,id2显示,当鼠标离开id1的时候,id2显示.问题如下: 1.当鼠标从id1上移动到id2上的时候,id由有显示变为不显示,然后变为显示 2.当鼠标从id2上移动到id1上的时候, id2有显示变为不显示,然后变为显示 我希望的是当鼠标在id1或者id2上移动的时候,id2一直显示,不发生变化. <script type="text/javascript" src="https://code.jquery.com/jquer

  • XML轻松学习手册(二):XML概念

    导言 经过第一章的快速入门学习,你已经知道了XML是一种能够让你自己创造标识的语言,它可以将数据与格式从网页中分开,它可以储存数据和共享数据的特性使得XML无所不能.如果你希望深入学习XML,系统掌握XML的来龙去脉,那么我们首先还是要回到XML概念的问题上来.XML(Extensible Markup Language),一种扩展性标识语言."扩展性""标识""语言".每一个词都明确的点明了XML的重要特点和功能.我们来仔细分析: 一. 扩展性

随机推荐