10. javacript高级程序设计-DOM

1. DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API（应用程序接口）

1.1 节点层次

DOM可以将任何HTML和XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息及标记。

1.1.1 Node类型

DOM1中定义了一个Node接口，该接口由DOM中所有的节点类型实现，这个Node接口在JavaScript中作为Node类型实现。

每个节点都有一个nodeType属性，因此所有节点类型都共享着相同的基本属性和方法

每个节点都有一个nodeType属性，用于表明节点的类型，节点类型由在Node类型中定义的下列12个数值常量来表示，任何节点类型比居其一：

l Node.ELEMENT_NODE(1);

l Node.ATTRIBUTE_NODE(2);

l Node.TEXT_NODE(3)

l Node.CDATA_SECTION_NODE(4)

l Node.ENTITY_REFERENCE_NODE(5)

l Node.ENTITY_NODE(6)

l Node.PROCESSING_INSTRUCTION_NODE(7)

l Node.COMMENT_NODE(8)

l Node.DOCUMENT_NODE(9)

l Node.DOCUMENT_TYPE_NODE(10)

l Node.DOCUMENT_FRAGMENT_NDOE(11)

l Node.NOTATION_NODE(12)

(1). 判断节点类型

if(someNode.nodeType == 1){

}

适用所有浏览器

(2). nodeName 和 nodeValue，可以了解具体信息，这两个属性取决于属性类型

(3). 节点关系：

1. childNodes对象，NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点
2. parentNode属性，该属性指向文档树中的父节点
3. previousSibling:前面的兄弟节点
4. newSibling:后面的兄弟节点
5. firstChild:第一个子节点
6. lastChild:最后一个子节点
7. ownerDocument,该属性指向表示整个文档的文档节点

(4). appendChild():在节点的末尾添加一个节点

hasChildNodes():是否有子节点

insertBefore():在前面插入节点

replaceChild():替换节点

removeChild():移除节点

cloneNode():复制节点

1.1.2 Document类型

l nodeType的值为9

l nodeName的值为 “#document”

l nodeValue的值为null

l parentNode的值为null

l ownerDocument的值为null

l 其子节点可能是一个DocumentType(最多一个)，Element(最多一个)，ProcessingInstruction或者Comment

常见属性：

document.body

document.title

document.URL

document.domain

document.referrer

document.getElementById()

document.getElementsByTagName()

document.anchors

document.applets

document.forms

document.images

document.links

1.1.3 Element类型

l nodeType的值为1

l nodeName的值为 元素的签名值

l nodeValue的值为null

l parentNode的值为Document或Element

l 子节点可能是Element，Text，Comment，ProcessingInstruction，CDATASection或者EntityReference

一般会存在下列属性：

id，title，lang，dir，className

<div id="id" title="title" lang="lang" dir="dir" class="className"></div>

可以使用getAttribute(),setAttribute()和removeAttribute()来操作属性

Element类型是使用attributes属性的的唯一一个DOM节点类型，表示所有的属性集合。

1.1.4 Text类型

l nodeType的值为3

l nodeName的值为 “#text”

l nodeValue的值为 节点所包含的文本

l parentNode的值为Element

l 没有子节点

l 可以通过nodeValue属性或data属性访问Text节点中的文本

l appendData(text)

l deleteData(offset,count)

l insertData(offset,text)

l replaceData(offset,count,text)

l splitText(offset)

l substringData(offset,count)

1.1.5 Comment

l nodeType的值为8

l nodeName的值为 “#comment”

l nodeValue的值为 注释的内容

l parentNode的值为Element或者Document

l 没有子节点

1.1.6 CDATASection

l nodeType的值为4

l nodeName的值为 “#cdata-section”

l nodeValue的值为 CDATA区域中包含的内容

l parentNode的值为Element或者Document

l 没有子节点

1.1.7 DocumentType

l nodeType的值为10

l nodeName的值为 doctype的名称

l nodeValue的值为 null

l parentNode的值为Document

l 没有子节点

1.1.8 DocumentFragment

l nodeType的值为11

l nodeName的值为 ‘#document-fragment’

l nodeValue的值为null

l parentNode的值为null

l 子节点可能是Element，Text，Comment，ProcessingInstruction，CDATASection或者EntityReference

1.1.9 Attr类型

l nodeType的值为2

l nodeName的值为 特性的名称

l nodeValue的值为特性的值

l parentNode的值为null

l 没有子节点

1.2 DOM操作技术

1.2.1 动态脚本

var script = document.createElement('script');

script.type = "text/javascript";

script.sec = "io.js";

document.body.appendChild(script);

1.2.2 动态样式

var link = document.createElement("link");

link.rel = "stylesheet";

link.type = "text/css";

link.href = "io.css";

var head = document.getElementsByTagName("head")[0];

head.appendChild(link);

1.2.3 操作表格

<table>属性和方法

l caption

l tBodies

l tFoot

l tHead

l rows

l createTHead()

l createTFoot()

l createCaption()

l deleteTHead()

l deleteTFoot()

l deleteCaption()

l deleteRow(pos)

l insertRow(pos)

<tbody>属性和方法

l rows

l deleteRow(pos)

l insertRow(pos)

<tr>属性和方法

l cells

l deleteCell(pos)

l insertCell()pos

1.2.4 使用NodeList

由于NodeList是动态的，在迭代NodeList时，使用length属性初始化第二个变量，然后将迭代器与该变量比较