JS010-DOM

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,则返回第一个

<div id="lal-Alice">a girl</div>

var div = document.getElementBId("lal-Alice"); 

//取得<div>元素的引用

 

接收一个参数:要取得的元素的标签名,返回零个或多个元素的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/p/5155136.html

posted @ 2016-01-24 14:40  liaoali  阅读(189)  评论(0编辑  收藏  举报