DOM操作是什么

DOM操作是什么

 

Document object mode 是w3c的标准。

 

Dom定义了访问html和xml稳当的标准

 

是文档对象模型、中立于平台和语言的接口，

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

• 核心 DOM - 针对任何结构化文档的标准模型

• XML DOM - 针对 XML 文档的标准模型

• HTML DOM - 针对 HTML 文档的标准模型

1	其中，在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点

• 每个 HTML 元素是元素节点

• HTML 元素内的文本是文本节点

• 每个 HTML 属性是属性节点

• 注释是注释节点

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树。通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

1 2 3

DOM 处理中的常见错误是希望元素节点包含文本。 举个栗子：< title >DOM 教程</ title >，元素节点 < title >，包含值为 "DOM 教程" 的文本节点。 可通过节点的 innerHTML 属性来访问文本节点的值。

一些常用的 HTML DOM 方法：

• getElementById(id) - 获取带有指定 id 的节点（元素）

• appendChild(node) - 插入新的子节点（元素）

• removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

• innerHTML - 节点（元素）的文本值

• parentNode - 节点（元素）的父节点

• childNodes - 节点（元素）的子节点

• attributes - 节点（元素）的属性节点

DOM操作示例

1 2 3 4 5 6 7 8 9 10 11

< html >      < body >          < p  id = "p1" >Hello World!</ p >          < script >              document.getElementById("p1").innerHTML="New text!";              //内容变更为new text              document.getElementById("p1").style.color="blue";              //蓝色          </ script >      </ body > </ html >