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属性初始化第二个变量,然后将迭代器与该变量比较

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。