12、HTML DOM
来源:HTML DOM 教程
0、什么是 HTML DOM?
HTML DOM 是HTML Document Object Model(文档对象模型)的缩写,它将网页中的各个元素都看作一个个对象,从而使网页中的元素也可以被计算机语言获取或者编辑,也就是:
- HTML 的标准对象模型
- HTML 的标准编程接口(所有HTML元素被定义为对象,而编程接口则是对象方法和对象属性)
- W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。
换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
1、DOM 节点
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
- 整个文档是一个 文档节点
- 每个 HTML 元素是 元素节点
- HTML 元素内的文本是 文本节点
- 每个 HTML 属性是 属性节点
- 注释是 注释节点
2、HTML DOM 方法
方法是我们可以在节点上执行的动作(比如添加或修改元素)。
这里提供一些您将在本教程中学到的常用方法:
方法 | 描述 |
---|---|
getElementById() | 返回带有指定 ID 的元素。 |
getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。 |
getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
appendChild() | 把新的子节点添加到指定节点。 |
removeChild() | 删除子节点。 |
replaceChild() | 替换子节点。 |
insertBefore() | 在指定的子节点前面插入新的子节点。 |
createAttribute() | 创建属性节点。 |
createElement() | 创建元素节点。 |
createTextNode() | 创建文本节点。 |
getAttribute() | 返回指定的属性值。 |
setAttribute() | 把指定属性设置或修改为指定的值。 |
3、HTML DOM 属性
属性是节点能够被获取或设置的值(比如节点的名称或内容)。
3、1 innerHTML 属性
用来获取或设置位于对象起始和结束标签内的HTML。
有两种写法:(1)document.getElementById(id).innerHTML=.......(2)id.innerHTML=.......
3、2 nodeName 属性
nodeName 属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 与 标签名相同
- 属性节点的 nodeName 与 属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
3、3 nodeValue 属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
3、4 nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有:
元素类型 | NodeType |
---|---|
元素 | 1 |
属性 | 2 |
文本 | 3 |
注释 | 8 |
文档 | 9 |
4、HTML DOM 访问
访问 HTML 元素等同于访问节点,有以下几种方式:
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法,如document.getElementsByTagName("p");
- 通过使用 getElementsByClassName() 方法,如document.getElementsByClassName("intro");(其中class="intro",在IE5,6,7,8中无效)
5、HTML DOM - 修改
修改 HTML = 改变元素、属性、样式和事件。主要有以下几个不同的方面:
(1)、改变 HTML 内容——innerHTML(元素节点) 属性或 nodeValue (有内容的文本节点才能使用)属性
(2)、改变 CSS 样式——如document.getElementById("p2").style.color="blue";
(3)、改变 HTML 属性——如document.getElementById("image").src(属性名)="landscape.jpg";
(4)、创建新的 HTML 元素
首先创建该元素(元素节点),然后把它追加到已有的元素上,有以下三种方法:
(5)、删除已有的 HTML 元素
使用removeChild()方法
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script>
(1)引用父元素 var parent=document.getElementById("div1"); //查找要删除元素的父元素 var child=document.getElementById("p1"); //查找要删除的元素 parent.removeChild(child); //从父元素中删除子元素
(2)不引用父元素
var child=document.getElementById("p1"); //查找需要删除的元素 child.parentNode.removeChild(child); //使用parentNode属性来查找父元素从而删除元素
</script>
(6)替换HTML元素
使用 replaceChild() 方法。
如 parent.replaceChild(para,child); 将child替换成para元素
(6)、改变事件(处理程序)