html dom教程
■ html dom定义了访问html的标准方法。
■ Html dom把html文档呈现为带有元素、属性和文本的树结构(节点树)。
■ 根据dom,html文档中的每个部分都是一个节点。
Dom这样规定:
▼ 整个文件是一个文档节点
▼ 每个html标签是一个元素节点
▼ 包含在html元素中的文本是文本节点
▼ 每个html属性是一个属性节点
▼ 注释属性注释节点
■ 一棵节点树中的每个节点都是彼此有关系的。有父节点、子节点及同辈的关系。文档节点是所有节点的父节点。<head>元素节点一般是<html>元素节点的子节点。等等…
1方法介绍
1.1 getElementById()和getElementsByTagName()方法
可以使用getElementById()和getElementsByTagName()方法和使用一个元素节点的parentNode、firstChild、lastChild属性来查找希望的元素。
特别的:getElementById()无法在xml中工作。
getElementById(“ID”) 根据ID返回元素。注意是元素。
getElementsByTagName(“TAG”) 根据标签名称,返回所有的元素,作为一个节点数组。这些元素是你在使用方法时所处的元素的后代。如: document.getElementsByTagName(“p”)返回document下所有的p元素。和
document.getElementById (“tag”).getElementsByTagName(“p”)返回文档节点下,id为tag的元素下,所有p元素的节点列表。
getElementsByTagName(“p”)返回值是索引号从0开始的数组。可以用length属性来遍历节点列表。
.1.2 p arentNode、firstChild、lastChild
用这三个属性可以按照文档的结构,在文档中进行短距离的查找。
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td>
Alaska
</td>
</tr>
</table>
var x = document.getElementsByTagName("td");
alert(x[0].fristChild.nodeValue);
.1.3 返回根节点
document.documentElement和document.body
.1.4 节点信息nodeName 、nodeType 、nodeValue
nodeName
文档节点的nodeName永远是#document;文本节点的nodeName永远是 #text ;
元素节点的nodeName是标签的名称;属性节点的nodeName是属性名称;
nodeType
元素类型 | 节点类型 |
元素 | 1 |
属性 | 2 |
文本 | 3 |
注释 | 8 |
文档 | 9 |
nodeValue
元素结点、和文档结点没有nodeValue属性; 文档节点和属性节点nodeValue分别是它们的文本值和属性值