html dom的理解

DOM (Document Object Model)文档对象模型,将html文档以及文档中的内容转换成node接口,以便外部(如js)操作(如修改html内容等)。

  node节点的类型:

    DocumentType(如下)、

    Document(一个文档对应一个对象)、

    Element(html、head、body等)、

    Text(html文档中,标签之间,如下的div1和divc1之间虽然看着没有什么,其实是有一个内容为‘‘的Text节点)

    Attribute(标签的属性,如id=”div1“就是一个属性节点)

    Comment(注释)

    DocumentFragment (没见过)

<!DOCTYPE html>                  DocumentType
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="div1">
            <div class="divc1">
                <div id="div">
                    文本节点
                </div>
                <!--注释--></div>
        </div>
    </body>
</html>

DOM是浏览器对外提供的一个编程接口,包含的接口中我们要用到的关系如下:

  NodeList

  HTMCollection

  Node

    Document

    Element

    Attr

  Attr的使用是在Element中有个attributes属性,返回一个数组,里面的对象都是Attr。

  这里需要注意的是Node和Element连个接口,我们在前端开发中使用js操作html标签对应的对象,使用的都是Element接口的属性和方法(自己这样认为)。

更多见:http://www.w3help.org/zh-cn/causes/SD9024

时间: 2024-10-17 10:06:21

html dom的理解的相关文章

Virtual DOM 虚拟DOM的理解(转)

作者:戴嘉华 转载请注明出处并保留原文链接( #13 )和作者信息. 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM树 4.2 步骤二:比较两棵虚拟DOM树的差异 4.3 步骤三:把差异应用到真正的DOM树上 5 结语 6 References 1 前言 本文会在教你怎么用 300~400 行代码实现一个基本的 Virtual DOM 算法,并且尝试尽量把 Virtual DOM 的算法思路阐述清楚.希望在阅读本

JavaScipt中对DOM的理解

一.理解DOM 浏览器通过文档对象模型DOM使JavaScript程序可以访问页面上的元素,而DOM是页面上XHTML中文档正文标题.段落.列表.样式ID.class以及所有其他出现的数据的一个内部表示. DOM的主要思想是HTML上每一个元素分别对应于DOM中的一个节点.DOM定义了许多种节点类型来表示节点的多个方面: 1.文档节点Document-----最顶层的节点或者说是各节点,它代表整个XHTML文档,所有的其他节点都是附属于它的. 2.文档类型节点DocumentType------

【使用 DOM】理解 DOM

DOM(Document Object Model,文档对象模型)允许我们用 JavaScript 来探查和操作 HTML 文档里的内容.它对于创建丰富性内容而言是必不可少的一组功能. 1. 理解文档对象模型 DOM 是一组对象的集合,这些对象代表了HTML文档里的各个元素.顾名思义,DOM就像一个模型,它由代表文档的众多对象组成. 先来个简单的HTML文档的例子: <!DOCTYPE html> <html> <head> <meta name="au

DOM的理解

刚刚接触到dom的时候感觉很迷茫,什么是dom,不能理解,感觉学dom没什么用,就没仔细学,关于dom的知识直接过了.而过了几天有人来考我dom是什么,结果可想而知了,他告诉我dom是html里面一个很重要的东西.后来仔细看了下,原来我一直就在用html dom,例如这个getElmentById()方法和innerHtml属性. 什么是dom? dom是一个文档对象模型,是w3c(万维网联盟)的标准. html dom 定义了访问和操做html文档的标准,是html的标准对象模型,是html的

accp8.0转换教材第7章JavaScript操作DOM对象理解与练习

程序调试,chrome开发人员工具,DOM操作,节点和节点间的关系,节点信息,操作节点,获取元素 一.单词部分 ①alert警告②prompt提示③parentNode父节点④childNode子节点⑤firstChild第一个子节点 ⑥lastChild最后一个子节点⑦nextSibling下一个同级⑧previousSibling上一个同级 ⑨createElement创建节点元素    appendChild附加节点    insertBefore在..之前添加 cloneNode复制 节

理解 Virtual DOM(摘)及评价

框架并没有提高web的性能,只是让开发者更加专注的完成业务逻辑,而不用过渡的考虑性能上的优化.如果以性能来比的话,框架是绝对比不过优化后的原生代码的. 二.什么是Virtual DOM Virtual DOM的概念有很多解释,从我的理解来看,主要是三个方面,分别是:一个对象,两个前提,三个步骤. 一个对象指的是Virtual DOM是一个基本的JavaScript对象,也是整个Virtual DOM树的基本. 两个前提分别是JavaScript很快和直接操作DOM很慢,这是Virtual DOM

通俗易懂的来讲讲DOM

DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系统的讲解下DOM的相关知识,如有遗漏或错误,还请大家指出一起讨论^ ^. 一.DOM是什么? DOM(文档对象模型)是针对HTML和XML文档的一个API,通过DOM可以去改变文档. 这个说法很官方,大家肯定还是不明白. 举个例子:我们有一段HTML,那么如何访问第二层第一个节点呢,如何把最后一个节

html dom与javascript的关系 -我们用JavaScript对网页(HTML)进行的所有操作都是通过DOM进行的

一,什么是DOM (参考源http://www.cnblogs.com/chaogex/p/3959723.html) DOM是什么 DOM全称为The Document Object Model,应该理解为是一个规范,定义了HTML和XML文档的逻辑结构和文档操作的编程接口. 文档逻辑结构 DOM实际上是以面向对象方式描述的对象模型,它将文档建模为一个个对象,以树状的结构组织(本文称之为"文档树",树中的对象称为"节点").每个文档包含1个document节点,0

SAX,DOM,JAXP,JDOM,DOM4J比较

dom,sax,jdom,dom4j的技术特点: 1: DOMDOM 是用与平台和语言无关的方式表示 XML 文档的官方 W3C 标准.DOM 是以层次结构组织的节点或信息片断的集合.这个层次结构允许开发人员在树中寻找特定信息.分析该结构通常需要加载整个文档和构造层次结构,然后才能做任何 工作.由于它是基于信息层次的,因而 DOM 被认为是基于树或基于对象的.DOM 以及广义的基于树的处理具有几个优点.首先,由于树在内存中是持久的,因此可以修改它以便应用程序能对数据和结构作出更改.它还可以在任何