`
caolixiang
  • 浏览: 8087 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

理解DOM_什么是DOM

    博客分类:
  • Js
阅读更多

什么是DOM

    DOM = document + object + model

    document即文档,也就是从<html>到</html>的部分。

    object即对象,对象有与之相关的属性、方法。如document.title这个属性代表了<title>Contents</title>;document.wrintln("someString")这个方法,就是在文档中写入一部分文本然后换行。

    model是一种模型,是对整个网页内容的刻画。

    通过DOM,javascript可以去访问和读取HTML页面,这个正是DOM的作用所在。

 

DOM如何映射HTML页面

    DOM通过树这个数学模型刻画和映射HTML页面。

    HTML是一种包含了各种标签的标记型语言,通过开标签如<p>表示一个结构的开始,通过闭标签如</p>表示一个结构的结束。可以把开标签看做盒子,将闭标签看做盒子的盖子:通过“盒子”来承载内容,或者什么都不装,作为一个空盒子。

    这样,<p>HuJin</p>就可以看做一个p盒子,其中装了“HuJin”这个文本字符串。

    当然,盒子里面也可以装盒子,想俄罗斯套娃一样。比如:

<div>
    <p>HuJin</p>
</div>

    这是一个div盒子,里面装了一个p盒子,p盒子里面装了“HuJin”这个文本字符串。

    我们很容易从几乎所有的HTML里看出这种从属关系,因为它们都遵守了一定的缩进规定。一层层向外看,你会找到<html>和</html>这两个标签,它们没有缩进,是最外面的大盒子。换句话说,你拿走了这个叫做html的大盒子,所有里面的盒子都被你一起拿走了,所以html代表了这个html页面的内容。

    不管把标签描述成盒子还是容器,我们发现,标签之间是具有某种关系的。家谱树可以很好的描述这种关系。

    家谱树可以很好地表示从属关系,下面是一个例子:

<html>
    <head>
        <title>DOM</title>
    </head>
    <body>
        <p>HuJin</p>
        <ul>
            <li>lovely</li>
            <li>bonny</li>
        </ul>
    </body>
</html>

    截屏(2011-12-26 01_29_22).jpg

 

    图中,蓝色线代表从属和包含关系,从属关系为从下到上,包含关系为从上到下。html这个标签包含了所有其他标签,本身不被任何标签所包含,所以它是这颗家谱树的根,也被称为根节点;head与body两个标签并没有从属关系,并且处在同一级(level)之上,他们是兄弟关系(sibling),并成为兄弟节点;title从属于head标签,title是head的子节点(child),而head是title的父节点(parent)。

    这样我们就可以通过家谱树这种结构来很好地映射这整个文档。DOM正是通过这种映射方式,使得javascript可以去访问和操纵html页面。

    最后这幅图表示html,DOM和javascript的关系。

 

    截屏(2011-12-26 01_45_40).jpg

分享到:
评论

相关推荐

    xml_DOM_SAX.rar_DOM_dom xml saxxml_java dom_sax

    在学习XML解析时,理解DOM和SAX的区别和适用场景是关键。DOM提供了灵活的数据访问,而SAX则侧重于高效的数据流处理。选择哪种解析方式取决于你的具体需求,如文件大小、性能要求以及数据处理的复杂性。通过实践,你...

    dom.rar_DOM_dom xml

    在本压缩包"dom.rar_DOM_dom_xml"中,包含了一系列基于DOM的XML编程实例,用于帮助开发者深入理解和实践DOM的相关操作。 首先,DOM的核心概念是将XML文档视为一个对象模型,每个XML元素、属性、文本等都有对应的DOM...

    DOM.rar_DOM_HTML dom_dom树解析

    理解DOM的工作原理,熟悉各种DOM方法和属性,可以有效提升开发效率,使得对网页内容的控制更为灵活和精确。在实际工作中,DOM操作通常结合Ajax进行异步数据加载,或者与事件处理相结合,实现丰富的用户交互。因此,...

    xml.rar_DOM_XML DOM_dom xml_xml

    XML(eXtensible Markup Language)是一种...通过理解并熟练运用DOM,开发者可以高效地处理XML文档,实现数据的解析、操作和序列化。在实际应用中,DOM不仅限于XML,也可以用于处理HTML,使得前端开发更为灵活和强大。

    XML_DOM_SAX.rar_ XML_DOM_SAX_c# sax_dom解析xml_xml parser csharp_x

    在这个"XML_DOM_SAX.rar"压缩包中,包含了可能的C#代码示例,用于演示如何使用DOM和SAX解析XML。`www.pudn.com.txt`可能是包含相关资源链接的文本文件,而`XML_DOM&SAX`可能是包含C#代码的文件,可以解压后查看具体...

    DOM.zip_HTML dom_zip

    1. **DOM定义**:理解DOM是什么,它是如何工作的,以及为什么它对于网页动态交互和数据操作至关重要。 2. **DOM结构**:学习DOM树的构建方式,包括元素节点、属性节点、文本节点等不同类型的节点,以及它们之间的...

    DOM.rar_DOM SAX_XML DOM_dom xml java_sax_simple

    XML(eXtensible Markup Language)是一种用于标记数据的语言,广泛应用于网络应用程序的数据交换和存储。DOM(Document Object ...通过比较它们的实现和性能,可以更好地理解DOM和SAX的区别,并在实际开发中灵活应用。

    XmlDom.rar_DOM_dom xml

    标题"XmlDom.rar_DOM_dom xml"暗示我们将讨论使用DOM解析XML的.NET实现。DOM允许开发者通过创建和修改XML文档的节点来与XML数据交互。这个压缩包可能包含了示例代码(XmlDom.cs)和一些说明性文本(www.pudn.com.txt...

    xml.rar_DOM4J ANDROID_XML DOM_android xml_android dom_androiddo

    XML(eXtensible Markup Language)是一种用于标记数据的语言,广泛应用在Android开发中,用于存储和传输数据。...理解并熟练掌握这两种解析技术,能帮助开发者更高效地处理XML数据,提升应用性能。

    DOM.zip_DOM_www.692dom,com

    通过解压并分析"DOM事件"文件中的例子,JavaScript初学者可以深入理解DOM事件的工作原理,提升动态网页开发技能。同时,访问www.692dom.com可能还有更多相关资料和指导,可以帮助学习者巩固和扩展这些知识。

    02-DOM_DOM_

    **DOM(文档对象模型)详解** ...理解和掌握DOM操作,能极大地提升我们处理网页内容的能力,实现丰富的交互效果。通过不断实践和学习,我们可以更加熟练地运用DOM,构建出更具活力和交互性的网页应用。

    D3RTE_DOM.zip_DOM 辐射_温度 辐射_离散坐标法_辐射_辐射计算温度

    在标签中,"dom_辐射 温度__辐射 离散坐标法 辐射 辐射计算温度"进一步强调了DOM方法在处理辐射和温度计算中的应用。"dom_辐射"和"辐射"指的是DOM方法与辐射传热的关联;"温度__辐射"和"辐射计算温度"则表明程序着重...

    XML_DOM 教程 XML_DOM 教程

    要理解DOM,你需要具备以下基础知识: - **HTML/XHTML**:DOM是用于处理HTML文档的,所以了解HTML的基本结构和语法是必要的。 - **JavaScript**:DOM通常与JavaScript一起使用,因为JavaScript是浏览器中实现DOM的...

    DOM.zip_JavaScript dom_it

    在“DOM.zip_JavaScript dom_it”这个压缩包中,包含的“DOM.chm”文件很可能是一个关于DOM的详细指南。 DOM的主要功能包括以下几点: 1. **文档结构化**:DOM将整个HTML或XML文档分解成一个可编程的对象模型。每...

    dom_xml_demo

    标题中的"dom_xml_demo"暗示了我们关注的焦点是DOM...总之,"dom_xml_demo"是一个关于DOM解析XML的实例,涵盖了XML文档的加载、解析、操作和序列化等关键步骤,对于理解和应用DOM解析技术来说是非常有价值的参考材料。

    DOM4J_SAX_DOM_XML的实例

    在IT行业中,XML(eXtensible Markup ...总的来说,理解和掌握DOM4J、SAX和DOM对于任何涉及XML处理的Java开发人员来说都是至关重要的技能。通过实践这些实例,可以加深对XML解析机制的理解,提高处理XML数据的能力。

    dom_mac_dommac_

    标题“dom_mac_dommac_”很可能是指一个针对特定软件的驱动模块源代码,而“dommac”标签可能代表这个模块的专有名称或与之相关的技术术语。在深入讨论之前,我们先了解一下“DOM”(Document Object Model)通常在...

    HTML_DOM_教程

    同时,查阅完整的HTML DOM参考手册,可以帮助理解每个DOM方法和属性的具体用法。 总结来说,HTML DOM是Web开发中的关键工具,它使开发者能够以程序化的方式操纵HTML文档,实现动态网页和丰富的用户交互。通过深入...

    dom_freemark_jq1.4js.rardom_freemark_jq1.4js.rar

    标题中的"dom_freemark_jq1.4js.rar"表明这是一个关于DOM(Document Object Model)、FreeMarker和jQuery 1.4版本的JavaScript资源文件。这个压缩包可能包含了一个或多个与这三个技术相关的JavaScript库或者示例代码...

    0100_java_web_class1.rar_JAVA WEB基础_JS_DOM_DEMO03.HTML_javaweb

    在本资料包中,"DOM_DEMO03.html"可能涉及了JavaScript与DOM(Document Object Model)的结合应用。 **DOM(Document Object Model)** DOM是HTML和XML文档的标准表示,它将文档解析为一个可编程的对象树。通过DOM...

Global site tag (gtag.js) - Google Analytics