JS010-DOM
本章内容：
1、理解包含不同层次节点的DOM
2、使用不同的节点类型
3、客服浏览器兼容性问题及各种陷阱
DOM(文档对象模型)是针对 HTML和xml文旦过得一个API(应用程序编程接口)。
10.1 节点层次
DOM可以将HTML或XML文档描绘成一个由多层节点构成的结构。每个节点都拥有各自的特点、数据和方法。节点之间也存在着某种关系。
|
<html> <head> <title>sample page</title> </head> <body> <p>Hello word!</p> </body> </html> |
可以将这个简单的HTML文档表示为一个层次结构。文档节点是每个文档的根节点 文档类型图还没画 |
10.1.1 Node类型
DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现。JS中的所有节点类型都继承自Node类型，因此所有及节点类型都共享着相同过得而基本属性和方法。
每个节点都有一个nodeType属性，用于表明节点的类型，节点类型由在Node类型中定义的下列12个数值量来表示，任何节点类型必居其一
|
Node.ELEMENT_NODE; |
|
|
Node.ATTRIBUTE_NODE; |
|
|
Node.TEXT_NODE(3); |
|
|
Node.CDATA_SECTION_NODE; |
|
|
Node.ENTITY_REFERENCE_NODE; |
|
|
Node._NODE; |
|
|
Node.INSTRUCTION_NODE; |
|
|
Node._NODE; |
|
|
Node.DOCUMENT_NODE; |
|
|
Node. DOCUMENT_NODE; |
|
|
Node. DOCUMENT_NODE; |
|
|
Node.NOTATION_NODE; |
通过以上常量，可以容易确定节点类型：
|
if (someNode.nodeType == Node.ELEMENT_NODE) {//在IE中无效 alert("Node is an element."); } |
1、要了解节点的具体信息，可以使用nodename和nodevalue这两个属性，使用这两个值之前，最好是检测一下节点的类型：
|
if (someNode.nodeType == 1) { value = someNode.nodeName; //nodeName是元素的标签名 } |
2、节点关系
每个节点都有一个parentnode属性和childnode属性。
如果列表中只有一个节点，那么该及诶单的nextSibling和previousSibling都为空。
父节点的firstchild和lastchild属性分别指向someNode.chileNode[0], someNode.chileNode[someNode.childNodes.length-1]
只有一个节点的情况下，firstchild和lastchild指向同一个节点，没有节点的情况下，它们都为空。
3操作节点
关系指针都是只读的。
appendchild() ,用于向chilldNodes列表末尾添加一个节点，。这是一个最常用的操作节点方法。
Insertbifore()方法把节点放在childNodes列表的某个特定位置上。接收两个参数：要插入的节点，作为参照的节点。
4其他方法
cloneNode()方法 ，用于创建调用这个方法的节点的一个完全相同的副本。接受一个布尔参数值，表示是否执行深复制。True执行深复制，false执行浅复制
10.1.2 Document 类型
Js通过Document 类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示一个HTML页面。document对象是window对象的一个属性，因此可以将作为全局对象来访问。Document节点具有下列特性：
nodeType的值为9；
nodeName的值为”#document”;
nodeValue 值为null；
parentNode值为null；
OwnerDocument值为null
其子节点可能是一个documentType（最多一个） Element（最多一个），ProcessingInstruction或Comment。
1文档的子节点
Document对象还有一个body属性
所有的浏览器都支持document.documentElement和document.body属性。
Document的另一个可能的子节点是documentType
2、文档信息
作为一个HTMLDocument的一个实例，document对象还有一些标准的document对象所没有的属性。。。。？？？
3、查找元素
最常见的DOM应用：取得特定的某个或某组元素的引用，然后再执行一些操作：
取得元素的操作可以使用document对象的几个方法来完成。其中document类型为此独享提供了两个方法：
|
getElementById() |
getElementByTagName() |
||
|
接收一个参数：要取得的元素的ID 如果页面中有多个元素具有相同的id，则返回第一个
|
接收一个参数：要取得的元素的标签名，返回零个或多个元素的NodeList。 |
4、特殊集合
除了属性方法，document还有一些特殊集合。为访问文档常用的部分提供了块级方式：
|
document.anchors |
包含文档中所有带name特性的<a>元素 |
|
document.applets |
包含文档中所有<applete>元素（不建议使用） |
|
document.images |
包含文档中所有<img>元素 |
|
document.links |
包含文档中所有带有href的<a>元素 |
|
document.forms |
包含文档中所有< form>元素 |
5、DOM一致性检测
由于DOM分为多级，所以检测浏览器实现了DOM的哪些部分很有必要。document.implementation属性为此提供了相应信息和功能对象。其中一个方法：hasFeature():接收两个参数，一，要检测的DOM功能的名称和版本号。
6、文档写入
将输出流写入到网页中。体现在以下四个方法中：write() writeln() open() close().
write() writeln()都只接受一个参数：要写入到输出流的文本。write()原样写入，writeln()在字符串末尾添加一个换行符。
10.1.3 Element类型
Element节点具有以下特征：
1、nodeType值为1；
2、nodeName值为元素的标签名；
3、nodeValue值为null；
4、parentNode可能是Document或Element；
5、其自己诶单可能是Element、Text、Coment、ProcessingInstruction、CDATASection或EntiyReference
要访问元素的标签名可以用nodeName属性也可以用tagName属性，他们返回相同的值。
1、html元素
html元素中都存在下列标准特性：
|
id |
素在文档中的唯一标识符 |
|
title |
有关元素的附加说明信息，一般通过工具条显示出来 |
|
lang |
元素内容的语言代码 |
|
dir |
语言的方向，值（ltr 从左往右， rtl 从右往左） |
|
classname |
与元素的class特性对应 |
2、取得特性
每个元素都有一个或多个特性，操作特性的DOM 方法主要有三个：
|
getAttribute() |
传递过来的特姓名与实际的特姓名相同。通过该方法可以取得自定义特性的值 |
|
setAttribute() |
|
|
removeAttribute() |
3、设置特性
getAttribute() setAttribute() 这两个方法都接收两个参数：要设置的特性名和值。
如特性存在setAttribute()替换之。如特性不存在setAttribute()就创建它。
4、attributes属性
Element类型是使用attributes属性的唯一一个DOM节点类型。attributes属性包含一个NameNodeMap，与NodeList类似，是一个“动态 “集合。每个节点都报讯在NamedNodeMap 中。NamedNodeMap对象拥有下列方法：
|
getNamedItem(name) |
返回nodeName属性等于name的节点 |
|
removeNamedItem(name) |
从列表中移除nodeName等于name的节点 |
|
setNamedItem(name) |
向列表中添加节点，一节点的nodeName属性为索引 |
|
item(pos) |
返回位于数字pos位置处的节点 |
attributes属性包含一系列节点，每个节点的nodeName就是特性的名称，nodeValue是特性的值。
|
取id特性 |
var id = element.attributes.getNamedItem("id").nodeValue; |
5、创建元素
使用document.createElement()方法可以创建新元素。该方法值接收一个参数：要创建的元素的标签名
|
var div = document.createElement("div"); |
6、元素的子节点
元素可以有任意数目的自己点和后代节点。因为元素可以是其他元素的子节点。
元素的子节点包含了：元素，文本节点，注释，处理指令等。
10.1.4 Text类型
文本节点有Text类型表示，包含纯文本内容。（可以包含转以后的html字符，但是不能包含html代码），text节点具有以下特征：
1、nodeType值为3；
2、nodeName值为”#text”；
3、nodeValue值为节点所包含的文本；
4、parentNode是一个Element；
5、不支持（没有）子节点
可以通过nodevalue属性或者data属性访问text节点中包含的文本，这两个属性中包含的值，相同。对nodeValue的修改也会通过data反映出来，反之亦然。使用下列方法可以操作节点中的文本。
|
appendData(text) |
将text添加到节点末尾 |
|
deleteData(offset, count) |
从offset指定的位置开始删除count个字符 |
|
insertData(offset, text) |
从offset指定的位置开始插入text |
|
replaceData(offset, count, text) |
用text替换从offset指定的位置开始到offset+count位置处的字符串。 |
|
splitText(offset) |
从offset指定的位置将当前文本节点分成两个文本节点。 |
|
substringData(offset, count) |
提取充offset指定的位置开始到offset+count位置处的字符串 |
此外，文本节点还有一个length属性，保存着节点中字符的数目，并且nodeValue.length 和data.length中也保存着同样的值。
1、创建文本节点
可以使用document.createTextNode()创建新的文本节点，该方法接收一个参数：要插入节点的文本。
编码：
var textNode = document.createTextNode("<strong>Hello</strong> word !");
创建文本的同时也会为其设置ownerDocument属性。不过，除非把新节点添加到文档树中已经存在的节点中，否则我们不会在浏览器窗口中看到新节点
|
创建一个<div>并向其中添加一条信息。 |
|
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello word !") element.appendchild(textNode); document.body.appendchild(element); |
|
document.body.appendchild(element); 将这个元素添加到文档的<body>元素中，这样在浏览器中就可以看到新创建的元素和文本节点了。 |
2、规范化文本节点
DOM文档中存在相邻的同胞文本节点很容易导致混乱，因为分不清哪个文本节点表示哪个字符串。
浏览器在解析文档时，永远不会创建相邻的文本节点。
3、分割文本节点
text类型提供了一个作用于normalize()嫌烦的方法：splitText().这个方法将一个文本节点分成两个文本节点，按照指定的位置分割nodeValue值。原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。这种方法会返回一个新文本节点，该节点与原节点的parentNode相同。
|
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello word !") element.appendchild(textNode); document.body.appendchild(element); var newNode = element.firstChild.splitText(5); alert(element.firstChild.nodeValue); //"Hello" alert(newNode.nodeValue); //" word!" alert(element.childNodes.length); //2 |
|
在上面例子中，包含"Hello word !"的文本节点被分割成两个节点。位置从5开始。 |
分割文本节点是从文本节点中提取数据的一种常用DOM解析技术。
10.1.5 Comment类型
注释在DOM中是通过Comment类型来表示的。comment节点具有以下特性：
1、nodeType值为8；
2、nodeName值为”#comment”；
3、nodeValue值为注释的内容；
4、parentNode可能是Document或Element；
5、不支持（没有）子节点
Comment和Text类型继承自相同的基类。所以它除了拥有splitText()之外的所有字符串操作方法。与Text类型相似，也可以通过nodeValue和data属性来取得注释内容。
|
注释节点可以通过父节点来访问 |
|
<div id="lal-Alice"> <!-- An element --> </div> |
10.1.6 CDATASection类型
1、nodeType值为4；
2、nodeName值为”#cdata-section”；
3、nodeValue值为CDATASection的内容；
4、parentNode可能是Document或Element；
5、不支持（没有）子节点
10.1.7 DocumentType类型
1、nodeType值为10；
2、nodeName值为doctype；
3、nodeValue值为null；
4、parentNode可能是Document；
5、不支持（没有）子节点
10.1.8 DocumentFragment类型
1、nodeType值为11；
2、nodeName值为”#document-fragment”；
3、nodeValue值为null；
4、parentNode可能是null；
5、子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference
10.1.9 Attr类型
1、nodeType值为2；
2、nodeName值为特性的名称；
3、nodeValue值为特性的值；
4、parentNode可能是null；
5、在HTML中没有子节点
6、在XML中子节点可以是Text或EntityReference
Attr对象有三个属性：name(特性名称)、value(特性值)、specified(一个布尔值，用于区别特性是在代码中指定的还是默认的。)。
10.2 DOM操作技术
10.2.1动态脚本
动态加载的外部JS文件能够立即运行，如下的<script>元素
|
<script type="text/javascript" src="client.js"></script> |
|
可以用DOM代码简单的动态创建出上面那个元素。 |
|
var script = document.createElement("script"); script.type = "text/javascript"; script.src = "client.js"; document.body.appendchild(script); |
10.2.2动态样式
|
<link rel="stylesheet" type="text/css" href="style.css"> |
|
可以用DOM代码简单的动态创建出上面那个元素。 |
|
var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = "style.css"; var head = document.gerElementByTagName("head")[0]; head.appendchild(link); |
10.2.3操作表格
<table>元素是HTML中最复杂的结构之一
为了方便构建表格，HTML DOM为<table> <tbody> <tr>元素添加了一些属性和方法
为<table>元素添加的属性和方法如下：
|
caption |
保存着对< caption >元素（如果有）的指针 |
|
tBodies |
是一个<tbody>元素的HTMLCollection |
|
tFoot |
保存着对< tfoot >元素（如果有）的指针 |
|
tHead |
保存着对< thead >元素（如果有）的指针 |
|
rows |
是一个表格中所有行的HTMLCollection |
|
createTHead() |
创建< thead >元素，将其放到表格中，返回引用 |
|
createTFoot() |
创建< tfoot >元素，将其放到表格中，返回引用 |
|
createCaption() |
创建< caption >元素，将其放到表格中，返回引用 |
|
deleteTHead() |
删除< thead >元素 |
|
deleteTFoot() |
删除< tfoot >元素 |
|
deleteCaption() |
删除< caption >元素 |
|
deleteRow(pos) |
删除指定位置的行 |
|
insertRow(pos) |
想rows集合中的指定位置插入一行 |
为<tbody>元素添加的属性和方法如下：
|
rows |
保存着<tbody>元素中行的HTMLCollention |
|
deletRow(pos) |
删除指定位置的行 |
|
insertRow(pos) |
向rows集合中指定的位置插入一行，返回新插入行的引用 |
为<tr>元素添加的属性和方法如下
|
cells |
保存着<tr>元素中单元格的HTMLCollection |
|
deleteCell(pos) |
删除指定位置的单元格 |
|
insertCell(pos) |
想cells集合的指定位置插入一个单元格 |
10.2.4使用NodeList
声明：该博客由http://www.cnblogs.com/lal-fighting/原创发表，未经作者允许，不得私自转载抄袭！！！