DOM概述
DOM定义
DOM（文档对象模型，Document Object Model）是W3C组织开发的一套便于操作XML和HTML的JavaScript方法，其将XML和HTML抽象成文档对象（Document），并将其中所有的标签和内容都抽象成对象（节点），利用面向对象的思对XML和HTML的操作。其中 Document 对象是DOM的顶层节点。
XML（扩展标记语言，Extensible Markup Language），主要用于信息的存储和传送，HTML也是一种XML。
DOM组成
- DOM核心：针对任何结构化文档的标准模型。
- XML DOM：针对 XML 文档的标准模型。
- HTML DOM：针对 HTML 文档的标准模型。
XML DOM和HTML DOM的关系
XML DOM ：用于 XML 的标准对象模型，用于 XML 的标准编程接口，中立于平台和语言的 W3C 标准。XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。换言之：XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。
HTML DOM ：HTML 的标准对象模型，HTML 的标准编程接口的 W3C 标准。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
其中，HTML DOM 是 XML DOM 的扩展，换言之，XML DOM 的方法均可以使用在HTML中，而反过来，HTML DOM 的方法不可以使用在XML中。
树节点
- DOM树
对于HTML文档，DOM将所有的标签全部抽象成节点，并且节点间有严格的等级关系，以此形成一个DOM树。
如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p align="center">Hello world!</p>
</body>
</html>
其对应的DOM树
其中，每一行都是兄弟节点，绿色线条代表父子关系，而红色线条也是父子关系的一种，但是无法通过父亲查找孩子而找到。
- 节点
2.1 节点分类
由DOM树可见，节点分为三种：元素节点（标签），属性节点和文本节点。
2.2 节点属性
nodeName，nodeValue，nodeType
2.3节点关系
节点关系
DOM的使用
- 读取子节点的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>读取指定的内容 </title>
<script type="text/javascript">
function _getLi() {
var bjNode = document.getElementById("bj");
var _childNodes = bjNode.childNodes;
for (var i = 0; i < _childNodes.length; i++) {
var n = _childNodes[i];
if (n.nodeType == 1) {
alert(n.childNodes[0].nodeValue);
}
}
}
</script>
</head>
<body>
<ul>
<li id="bj" value="beijing">
北京
<h1>海淀</h1> 奥运
</li>
<li id="sh" value="shanghai">
上海
</li>
<br/>
<input type="button" value="li取值" onclick="_getLi()" />
</ul>
</body>
</html>
2.获取孙子节点的内容
获取select下面option的文本内容。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<select name="edu" id="edu">
<option value="本科1">本科</option>
<option value="专科2">专科</option>
<option value="高中3">高中</option>
<option value="小学4">小学</option>
<option value="幼儿园5">幼儿园</option>
</select>
</body>
</html>
实现方法：
var optNodes = document.getElementById("edu").options;
for (var i = 0; i < optNodes.length; i++) {
var n = optNodes[i];
alert(n.getAttribute("value"));
}
网友评论