Pro Javascript (5)

January 9, 2006 at 4:40 pm | Posted in JavaScript, Note | Leave a comment

========================================================

Pro JavaScript (5) DOM

—————————————————————————————————————————

基础知识回顾:

DOM 即(Document Object Model),文档对象模型,DOM实际是把HTML当作XML文件来进行处理,用对象的眼光来打量HTML,可以说DOM是继HTML后Web的最有用的发明。

Some review of XML

SGML(基于标签的语言的普遍规范),在SGML被用于定义HTML的DTD时,发现HTML本身是很不规范的。主要表现在某些标签可以省略/没有/不允许结束标签(</xxx>),标签互相嵌入而很不不规范,属性值的定义方法也不统一等等。所以XML出现了,HTML中不规范的地方都被明确定义,注意的是XML定义的是一种语言的语法和规范,是一系列满足这种规范的语言的统称,具体不同的场合会有不同的具体实现定义不同的标签及属性来来解决不同的问题,如RDF,RSS,SOAP,XSLT,XSL等等,当然HTML的XML实现为XHTML。XML的实质含义是使用结构化的纯文本来表达数据。

XML几个语法要点:

  1. 首行为XML prolog,一般为<?xml version=”1.0”?>,该行告诉xml praser/浏览器,该XML如何被prase。
  2. 然后是文档类型声明(DTD),例如<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
  3. 然后是document element,它必须把所有其他标签都括入其中。就是该XML的最外层标签。也就是Root Element,注意这个要与DTD中声明的root element type相一致,如上面的html。
  4. 不想被Praser解析的东西用<![CDATA[ ]]>括起来。
  5. 在document element中间的用<? … ?>括起来的语句被称为PI(processing instruction),作用是给praser一些更特定的信息。

XML的API:

    • SAX(Sample API for XML):第一个,Java语言实现,event-based,praser从上到下的解析XML文档,当遇到每个标签/属性/值…时就会激发事件,而具体在该事件做什么由程序员定义。
      优点,lightweight,fast,缺点,任何时候,你想停下,回退,或专门指定解析该文档的某特定部分时,都得从头从文档的第一行开始解析。
    • DOM:基于树结构,并且当解析完后,你想访问或修改添加文档对象都不需要重新解析。DOM是不针对于语言的,浏览器负责对DOM实现进行Javascript的支持。

—————————————————————————————————————————

DOM的核心: Node

由于DOM是树形结构,所以一个节点被抽象为对象Node,这是DOM的核心对象:

Node的种类一共有12种,通过Node.nodeType的取值来确定(为1-12),分为:

❑ Node.ELEMENT_NODE (1)

❑ Node.ATTRIBUTE_NODE (2)

❑ Node.TEXT_NODE (3) :<![CDATA[ ]]>中括着的纯文本,他没有子节点

❑ Node.CDATA_SECTION_NODE (4) :子节点一定为TextNode

❑ Node.ENTITY_REFERENCE_NODE (5) :

❑ Node.ENTITY_NODE (6) DTD中的实体定义<!ENTITY foo “foo”>,无子节点

❑ Node.PROCESSING_INSTRUCTION_NODE (7) :PI,无子节点

❑ Node.COMMENT_NODE (8)

❑ Node.DOCUMENT_NODE (9) :最外层的Root element,包括所有其它节点

❑ Node.DOCUMENT_TYPE_NODE (10) DTD,<!DOCTYPE………..>

❑ Node.DOCUMENT_FRAGMENT_NODE (11)

❑ Node.NOTATION_NODE (12) :DTD中的Nation定义

Node的属性和方法

—————————————————————————————————————————

DOM的使用

DOM是分级别的,不同浏览器对DOM支持的级别不同。DOM level1 (core,用来解析XML-base的文档,和DOM HTML,用来针对HTML,因为DOM并非只针对HTML的),DOM Level2(event,以前都是通过DHTML支持,style,与CSS沟通,等等。。)DOM level3(DOM Load and Save;DOM Validation;对XML1.0的支持,包括:XML Infoset, XPath,XML Base)

获得Node

使用Attributes:Node接口的attributes()方法返回一个NamedNodeMap,从它可以得到具体的Attribute并加以操作。或者是有Node接口本身的getAttribute()方法来直接得到Attribute。

得到指定的Node:使用getElementsByTagName()

还有getElementsByName(),getElementsById();

生成与操作Node

观察可知最普遍的,最重要的方法是createElement(),createDocumentFragment(), create TextNode()

使用createElement(),createTextNode(),appendChild()

使用removeChild(), replaceChild(), and insertBefore()


使用createDocumentFragment()

—————————————————————————————————————————

HTML DOM

使用DOM的核心方法是针对所有XML的,针对HTML DOM有特殊的方法,如

使用DOM core:oImg.setAttribute(“src”, “mypicture2.jpg”);

使用HTML DOM:oImg.src = “mypicture2.jpg”;

—————————————————————————————————————————

DOM 遍历

遍历是DOM Level2的功能,所以只针对Mozilla和Safari

使用createNodeIterator()生成NodeIterator,该方法接受4个参数,1.) root,开始点;2.)whatToShow;3.)filter,什么要省略4.) entityReferenceExpansion,Boolean value indicating whether entity references should be expanded

使用NodeIterator进行遍历:

Filter的用法
Filter只有一个方法,acceptNode,入参为Node,返回值为NodeFilter.FILTER_ACCEPT(如该节点被接受)或NodeFilter.FILTER_REJECT(如果拒绝改节点)

使用TreeWalker,它与NodeIterator很相似,使用参数也相同,不同的是有更多的方法,除了已经的外还有parentNode(),firstChild(),lastChild(),nextSibling(),previousSibling()(兄弟)。

========================================================

Advertisements

Leave a Comment »

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.
Entries and comments feeds.

%d bloggers like this: