javascript高级程序设计---DOM

  DOM是文档对象模型的简称,DOM的基本思想是把结构化文档解析成一系列的节点,由这些节点组成数装的DOM树,所有的这些节点和最终的树状结构都有统一的对外接口,达到使用编程语言操作文档的目的,DOM可以理解为XML文档、SVG文档、HTML文档的编程接口API。DOM不属于javascript但是可以通过javascript操作DOM。

 

节点的概念:

       DOM的最小组成单位叫节点(node),一个文档的树形结构(DOM树),就是由各种不同的类型的节点组成。

       对于HTML文档,节点主要有一下六种类型:

       Document节点:文档节点,指整个文档(window.document)。

       DocumentType:文档类型节点,指文档的类型,比如<!DOCTYPE html>

       Element:元素节点,HTML元素,比如<body>、<p>。

       Attribute:属性节点,HTML元素的属性,比如:class = “right”。

       Text:文本节点,HTML文档中出现的文本。

       DocumentFragment:文档碎片节点,文档的片段。

  Node接口在javascript中是作为Node类型来实现的,除了IE所有浏览器都可以访问到这个类型,javascript中所有的节点类型都是继承自node类型,因此所有的节点类型都共享这相同的基本属性和方法。

 

节点的属性:

nodeType属性:返回节点的常数值  

类型                               nodeName                     nodeType
DOCUMENT_NODE                                       #document                               9
ELEMENT_NODE                                          大写的HTML元素名                       1
ATTRIBUTE_NODE                                       等同于Attr.name                         2
TEXT_NODE                                                #text                                        3
DOCUMENT_FRAGMENT_NODE                      #document-fragment                 11
DOCUMENT_TYPE_NODE                               等同于DocumentType.name         10

  

下列属性返回当前节点的相关节点

  ownerDocument

  返回当前节点所在的文档对象,即document对象

var  doc = nod.ownerDoctype;
doc === document              //true

  nextSibling

  返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点,则返回null,注意,该属性包括文本节点,节点后有空格,返回文本节点,内容为空格。

  previoussibling
  返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点,则返回null。同样,前面有空格,返回一个内容为空的文本节点。

  parentNode
  返回当前节点的父节点。对于一个节点来说,它的父节点只可能是三种类型:element节点、document节点和documentfragment节点。

  parentElement
  返回当前节点的父Element节点。如果当前节点没有父节点,或者父节点类型不是Element节点,则返回null。


下列属性返回当前内容
  textContent
  属性返回当前节点和它的所有后代节点的文本内容。

//<div id="divA">This is <span>some</span> text</div>

document.getElementById("divA").textContent           This is some text

  该属性可读写,可自动对HTML标签转义。

document.getElementById('foo').textContent = '<p>GoodBye!</p>'

  自动解释为文本<p>而不会当作标签处理,对于Text节点和Comment节点,该属性的值与nodeValue属性相同

  nodeValue
  返回或设置当前节点的值,格式为字符串。但是,该属性只对Text节点、Comment节点、XML文档的CDATA节点有效,其他类型的节点一律返回null。

 

下列返回当前节点的子节点
  childNodes
  返回一个NodeList集合,成员包括当前节点的所有子节点。除了HTML元素节点,该属性返回的还包括Text节点和Comment节点。

  如果当前节点不包括任何子节点,则返回一个空的NodeList集合。由于NodeList对象是一个动态集合,一旦子节点发生变化,立刻会反映在返回结果之中。

var ulElementChildNodes = document.querySelector('ul').childNodes;

  firstNode
  返回当前节点的第一个子节点,如果当前节点没有子节点,则返回null。注意,除了HTML元素子节点,该属性还包括文本节点和评论节点。

  lastChild
  返回当前节点的最后一个子节点,如果当前节点没有子节点,则返回null。
  baseURI
  返回一个字符串,由当前网页的协议、域名和所在的目录组成,表示当前网页的绝对路径。如果无法取到这个值,则返回null。

  该属性不仅document对象有(document.baseURI),元素节点也有(element.baseURI)。通常情况下,它们的值是相同的。

 

Node节点的方法

  appendChild()
  接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点。如果参数节点是文档中现有的其他节点,appendChild方法会将其从原来的位置,移动到新位置。

var p = document.createElement("p");
document.body.appendChild(p);

  hasChildNodes
  方法返回一个布尔值,表示当前节点是否有子节点。
  方法与节点操作有关

  cloneNode()
  cloneNode方法用于克隆一个节点。它接受一个布尔值作为参数,表示是否同时克隆子节点,默认是false,即不克隆子节点。

  insertBefore
  方法用于将某个节点插入当前节点的指定位置。它接受两个参数,第一个参数是所要插入的节点,第二个参数是当前节点的一个子节点,新的节点将插在这个节点的前面。

  该方法返回被插入的新节点。如果insertBefore方法的第二个参数为null,则新节点将插在当前节点的最后位置,即变成最后一个子节点。

  removeChild
  接受一个子节点作为参数,用于从当前节点移除该节点。它返回被移除的节点。

  replaceChild
  用于将一个新的节点,替换当前节点的某一个子节点。它接受两个参数,第一个参数是用来替换的新节点,第二个参数将要被替换走的子节点。它返回被替换走的那个节点。


下面方法用于节点的互相比较。
  contains
  接受一个节点作为参数,返回一个布尔值,表示参数节点是否为当前节点的后代节点。

  compareDocumentPosition
  与contains方法完全一致,返回一个7个比特位的二进制值,表示参数节点与当前节点的关系。

二进制值 数值 含义
000000 0 两个节点相同
000001 1 两个节点不在同一个文档(即有一个节点不在当前文档)
000010 2 参数节点在当前节点的前面
000100 4 参数节点在当前节点的后面
001000 8 参数节点包含当前节点
010000 16 当前节点包含参数节点
100000 32 浏览器的私有用途

  可以使用比特位运算符检查结果

  isEqualNode
  返回一个布尔值,用于检查两个节点是否相等。所谓相等的节点,指的是两个节点的类型相同、属性相同、子节点相同。

  normailize
  用于清理当前节点内部的所有Text节点。它会去除空的文本节点,并且将毗邻的文本节点合并成一个。

posted @ 2015-09-11 23:25  xnuwu  阅读(323)  评论(0编辑  收藏  举报