DOM操作是什么
Document object mode 是w3c的标准。
Dom定义了访问html和xml稳当的标准
是文档对象模型、中立于平台和语言的接口,
W3C DOM 标准被分为 3 个不同的部分:
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
>
|