走进DOM:HTML DOM

DOM(Document Object Model)即文档对象模型。针对HTML和XML
文档的API(应用程序接口)。

DOM描绘了一个层次化的节点树,执行开发者加入、移除和改动页面的某一部分。当然这样说有些笼统。咱们接着往下看。

一、认识DOM

DOM 中的三个字母。D(文档)能够理解为整个Web载入的网页文档。O(对象)能够理解为类似window对象之类的东西。能够调用属性和方法,这里我们说的是document对象;M(模型)能够理解为网页文档的树型结构。

通过 JavaScript,您能够重构整个HTML文档。您能够加入、移除、改变或重排页面上的项目。

要改变页面的某个东西。JavaScript就须要对HTML文档中全部元素进行訪问的入口。这个入口,连同对HTML 元素进行加入、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。

DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

DOM 定义了訪问 HTML 和 XML 文档的标准:

“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它同意程序和脚本动态地訪问和更新文档的内容、结构和样式。

W3C DOM 标准被分为 3 个不同的部分:

  • Core DOM - 针对不论什么结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

节点:载入
HTML页面时。Web浏览器生成一个树型结构,用来表示页面内部结构。DOM将这样的树型结构理解为由节点组成。

节点彼此都有等级关系。

HTML 文档中的全部节点组成了一个文档树(或节点树)。HTML 文档中的每一个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的全部文本节点为止。

从上图的树型结构,我们理解几个概念。html标签没有父辈。没有兄弟,所以html标签为根标签。

head标签是
html子标签,meta和title标签之间是兄弟关系。假设把每一个标签当作一个节点的话,那么这些节点组合成了一棵节点树。

依据 DOM,HTML 文档中的每一个成分都是一个节点。

DOM 是这样规定的:节点种类能够分为三类:元素节点、文本节点、属性节点。

  • 整个文档是一个文档节点
  • 每个 HTML 标签是一个元素节点
  • 包括在 HTML 元素中的文本是文本节点
  • 每个 HTML 属性是一个属性节点
  • 凝视属于凝视节点

老师一直强调,要善于总结。时常总结。就像这些知识点,自己总认为会,然而到了用的时候发现自己并不能立即写出。所以自己要时常总结,联系知识到实际中。

时间: 2024-08-29 22:00:29

走进DOM: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 的算法思路阐述清楚.希望在阅读本

org.w3c.dom(java dom)解析XML文档

位于org.w3c.dom操作XML会比较简单,就是将XML看做是一颗树,DOM就是对这颗树的一个数据结构的描述,但对大型XML文件效果可能会不理想 首先来了解点Java DOM 的 API:1.解析器工厂类:DocumentBuilderFactory 创建的方法:DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance(); 2.解析器:DocumentBuilder 创建方法:通过解析器工厂类来获得 DocumentBu

JavaScript之DOM-9 HTML DOM(HTML DOM概述、常用HTML DOM对象、HTML表单)

一.HTML DOM 概述 HTML DOM 概述 - HTML DOM 定义了用于 HTML 的一系列标准对象,以及访问和处理 HTML 文档的标准方法 - HTML 标签对象化 - 将网页中的每个元素都看作是一个对象 常用 HTML DOM 对象 标准 DOM 与 HTML DOM - HTML 标签对象化 - createElement - appendChild - setAttribute - removeAttribute - nodeName - ... - HTML DOM 提供

DOM系列---DOM操作样式

发文不易,若转载传播,请亲注明出处,谢谢! 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检测当前浏览器支持CSS能力的级别. DOM1级实现了最基本的文档处理,DOM2和DOM3在这个基础上增加了更多的交互能力,这里我们主要探讨CSS,DOM2增加了CSS编程访问方式和改变CSS样式信息. DOM一致性检测 功能 版本号 说明 Core 1.0.2.0.3.0 基本的DOM,用于表

dom core,html dom,css dom,jquery 中的dom操作

前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名")/attr("属性名"))获取属性值, html dom一般利用属性的形式(element.属性名)获取对应属性值,形式相对简洁.此外,针对于css相关的对象,还有css dom 前端开发中的节点有三种:元素节点:文本节点和属性节点 js一般对于dom core和html dom都支

js 字符串转dom 和dom 转字符串

js 字符串转dom 和dom 转字符串 前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement('div'); 然后再给obj设置一些属性. 但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了 伪代码:var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>');

DOM以及DOM树

JS有三个部分组成 ES DOM  BOM DOM就是专门操作HTML内容的API DOM分为核心DOM 与 HTML DOM两种,前者能够操作所有结构化文档,后者就对常用的API进行简化 网页中一切在内存中都是以树形结构存储的 存储上下级包含关系最直观的结构 HTML中的每一个元素:元素,属性,文本 都是一个节点对象(Node) document对象是整棵树的根节点 节点对象(Node) 三大属性: 1.nodeType number 专门区分节点的类型: 9 document 1 eleme

[DOM]初识DOM

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM. DOM的出现统一了浏览器残次不齐的问题,大大地扩展了Javascript的工作内容.使得页面内容更加丰富. 这张图片展示的就是DOM树的结构. node:节点.类似树的结构,DOM由结点构成.结点又分为元素结点,文本结点和属性结点.元素结点很容易理解,想<a titile=

DOM,DOM,DOM,重要的事情要说 3 遍

DOM树与Render树 这个应该都是知道的.就是用户请求HTML下来后,浏览器渲染引擎的基本工作中两个概念. copy一张图,流程大概就是:解析html构建DOM树,渲染树构建,渲染树布局,绘制渲染树. 这里要注意的一点是,DOM树和render树并不是简单的一一对应关系.render树中并不包含那些不需要渲染的节点.比方说head.title这样的:display:none也是不会有的:还有一些设置position:absolute,fixed,构造render树时会根据实际情况来构造. 重

(11)JavaScript之[DOM HTML][DOM CSS]

DOM HTML 1 //改变HTML输出流 2 document.write(Date()); 3 4 //改变HTML的内容 5 document.getElementById('box').innerHTML = 'box'; 6 7 //改变HTML属性 8 //document.getElementById(id).attribute=new value 9 document.getElementById('gif').src = "b.gif"; 10 11 console