DOM
一． 概述
1. 什么是DOM
DOM（Document Object Module）：文档定义模型，它定义了操作文档对象的接口。
在DOM模型中，整个文档是一个树的结构，树的根节点是document对象，表示整个文档对象，并且它仅包含一个子节点<html>。
2．DOM模型的组成部分
核心、HTML、XML
核心部分包括了最底层的文档操作接口，适用于HTML和XML。
HTML部分包括了针对HTML的操作接口。
XML部分定义了针对XML的操作接口。
二． 节点
在DOM模型中，整个文档就是由层次不同的多个节点组成的，可以说节点代表了全部的内容，每个节点都可以看成一棵树的根节点，整个文档是一个递归的结构。因此掌握了节点的用法也就掌握了对DOM模型的用法。
1. 节点的类型
元素节点、属性节点、文本节点
例如：
<td bgcolor=”blue”>Sample</td>
这里的整个内容构成了元素节点，bgcolor=”blue”组成了一个属性节点，Sample这段文本构成了一个文本节点。
每个节点都是一个对象，在实际的开发中通过这个对象提供的接口对其进行操作。
2. 处理DOM中的节点
I． 节点的引用
直接引用：
方法一：使用document.getElementById()
方法二：使用document.getElementByTagName()引用指定标记名称的节点，通过这个方法可以用来获取指定标记的元素节点的集合，返回一个数组，包含对这些节点的引用。
方法三：使用document.getElementsByName()同样的，返回一个节点数组，节点名字为指定。
间接引用：
方法一：引用子结点
利用节点的childNodes属性集合，该属性表示该结点的所有子节点的集合，类型是数组对象。这些子节点可以按照其在文档中出现的顺序排列，因此可以通过索引来依次访问各个子节点。
例子：引用HTML文档的根节点
document.childNodes[0];
引用head结点
document.childNodes[0].childNodes[0]
其它引用子节点的方法：
element.firstChild;
element.lastChild;
方法二：引用父结点
element.parentNode
引用兄弟节点：
引用上一兄弟节点：element.nextSibling;
引用下一兄弟节点：element.previousSibling;
II． 获得结点的信息
node.nodeName //获取结点的名称
node.nodeType //获取结点的类型 其中元素结点返回1、属性结点返回2、文本结点返回3
node.nodeValue //获取结点的值 其中元素结点返回null、属性结点返回undefined、文本结点返回文本内容
可以说nodeValue是专门为文本结点设定的
node.hasChildNode //判断该指定结点是否存在孩子结点
node.tagName //返回元素结点的标记名称
III． 处理属性结点
获取属性结点：元素结点．属性名称
例子：<ing id=”test” src=”hello.jpg” alt=”hello”/>
var im = document.getElementById(“test”);
alert(“im.src”);
改变属性的值
im.src=”change.gif”;
获取属性的值
elementNode.getAttribute(attributeName)
添加属性：
elementNode.setAttribute(arrributeName,attributeValue);
//其中elementNode是要添加属性的结点，arrributeName是要添加属性的名称，attributeValue是属性的值
IV． 处理文本结点
获取结点内的文本可以使用innerHTML属性
例如：
<span id=”span1”>Hello</span>
可以通过如下方法获得文本的内容：
document.getElementById(“span1”).innerHTML;
V． 使用innerHTML改变结点的内容
除了使用标准的DOM方法外，innerHTML这个属性因其灵活性受到了多数浏览器的很好的支持。该属性表示两个HTML标记之间以代码形式表示的所有内容。
innerHTML不知限于只是操作一个结点，而是可以使用HTML片段直接填充页面或直接获取HTML片段，大大提高了开发的灵活性。
3. 改变文档的曾次结构
I. 创建元素结点 document.createElement(elementName);
II. 创建文本结点 document.createTextNode();
III. 添加结点 parentElement.appendChild(childElement);
IV. 插入子结点 parentNode.insertBefore(newNode,referenceNode);
V. 取代子结点 parentNode.replaceChild(newNode,oldNode);
VI.
复制结点 node.cloneNode(includeChildren); //其中includeChildren
是一个布尔值，表示是否复制子结点
VII. 删除子结点 parentNode.removeChild(childNode); //其中childNode为待删除的结点。
4. 对于表格的操作
使用标准的DOM方法不能使其在浏览器中正常工作，必须使用DHTML中定义的接口对其进行操作，使用标准的DOM方法在Firefox等浏览器中可以工作，但在IE中不行，需要使用DOM1（DHTML）方法来进行操作。
为了避免不同浏览器对DOM的不同支持，推荐使用另一种方法创建表格：生成字符串形式的HTML片段来描述表格，再使用innerHTML将其插入到一个容器中。
扫一扫
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
