前端---HTML中DOM模型解析

基本概念

DOM是文档对象模型(Document Object Model)的简称.借助DOM模型,可以将结构化文档转换成DOM树,程序可以访问,修改树里的节点,也可以新增,删除树里的节点.程序操作这棵DOM树时,结构化文档也会随之动态改变.

DOM并不是一种技术,它只是访问结构化文档(主要是XML文档和HTML文档)的一种思想.基于这种思想,各种语言都有自己的DOM解析器,通过DOM解析器的作用就是完成结构化文档和DOM树之间的转换关系.通常来说,DOM解释器解析结构化文档,就是讲磁盘上的结构化文档转换成内存中的DOM树.而从DOM树输出结构化文档,就是讲内存中的DOM树转换成磁盘上的结构化文档.

DOM模型和HTML文档联系

HTML文档是一种结构化文档,虽然HTML5为HTML文档增加了一些自由的格式,但浏览器解析HTML5文档时仍然会把它当成格式化文档来进行处理,因此能使用DOM来操作HTML5文档.

DOM为常用的HTML元素提供了一套完整的继承体系:

 

HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法：

• getElementById(id) - 获取带有指定 id 的节点（元素）
• appendChild(node) - 插入新的子节点（元素）
• removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

• innerHTML - 节点（元素）的文本值
• parentNode - 节点（元素）的父节点
• childNodes - 节点（元素）的子节点
• attributes - 节点（元素）的属性节点

 

HTML DOM 属性

---

属性是节点（HTML 元素）的值，您能够获取或设置。

---

编程接口

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作（比如添加或修改元素）。

属性是您能够获取或设置的值（比如节点的名称或内容）。

---

innerHTML 属性

获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

nodeValue 属性

nodeValue 属性规定节点的值。

• 元素节点的 nodeValue 是 undefined 或 null
• 文本节点的 nodeValue 是文本本身
• 属性节点的 nodeValue 是属性值

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

元素类型	NodeType
元素	1
属性	2
文本	3
注释	8
文档	9