DOM基础
DOM是HTML和XML的应用程序接口（API）。DOM把整个页面规划成由节点层级构成的文档。HTML或XML页面的每个部分都是一个节点的衍生物。
那么基于树的API到底指什么呢？当谈论DOM树（也称之为文档）的时候，实际上谈论的是节点（node）的层次。DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面：
Document——最顶层的节点，所有的其他节点都是附属于它的。
DocumentType——DTD引用（使用<!DOCTYPE >语法）的对象表现形式，例如<!DOCTYPE HTML PUBLIC "-//W 3C //DTD HTML 4.0 Transitional//EN">。它不能包含子节点。
DocumentFragment——可以像Document一样来保存其他节点。
Element——表示起始标签和结束标签之间的内容，例如<tag></tag>或者<tag/>。这是唯一可以同时包含特性和子节点的节点类型。
Attr——代表一对特性名和特性值。这个节点类型不能包含子节点。
Text——代表XML文档中的在起始标签和结束标签之间，或者CData Section内包含的普通文本。这个节点类型不能包含子节点。
CDataSection——<![CDATA[ ]]>的对象表现形式。这个节点类型仅能包含文本节点Text作为子节点。
Entity——表示在DTD中的一个实体定义，例如<!ENTITY foo "foo">。这个节点类型不能包含子节点。
EntityReference——代表一个实体引用，例如" “。这个节点类型不能包含子节点。
ProcessingInstruction——代表一个PI。这个节点类型不能包含子节点。
Comment——代表XML注释。这个节点类型不能包含子节点。
一个文档是由任意数量的节点的层次组成。考虑下面的XML文档：
这段代码可以用一个DOM文档。在下图中，每个矩形代表在DOM文档树中的一个节点，粗体文本表示节点的类型，非粗体的文本代表该节点的内容。
注释和<employee/>节点都被认为是<employees/>的子节点，因为它们在这棵树中直接在<employees/>节点的下面。同样的，我们也认为<employees/>是注释和<employee/>节点的父节点。
类似的，<name/>、<position/>以及<comments/>都被认为是<employee/>的子节点，同时，因为它们在DOM树中处于同一层上，有着相同的父节点，所以认为它们是兄弟（sibiling）关系。
我们还认为<employees/>节点是这一节中所有节点的祖先，其中包括它自己的子节点（注释和<employee/>）以及子节点的子节点（<name/>、<position/>，等等，直到文本节点"His birthday is on 8/14/68 "）。并认为文档节点是文档中所有节点的祖先。
Node接口定义了对应不同节点类型的12个常量（它们会在即将讨论的nodeType特性中使用到）：
Node.ELEMENT_NODE (1)
Node.ATTRIBUTE_NODE (2)
Node.TEXT_NODE (3)
Node.CDATA_SECTION_NODE (4)
Node.ENTITY_REFERENCE_NODE (5)
Node.ENTITY_NODE (6)
Node.PROCESSING_INSTRUCTION_NODE (7)
Node.COMMENT_NODE (8)
Node.DOCUMENT_NODE (9)
Node.DOCUMENT_TYPE_NODE (10)
Node.DOCUMENT_FRAGMENT_NODE (11)
Node.NOTATION_NODE (12)
Node接口也定义了一些所有节点类型都包含的特性和方法。我们在下面的表格中列出了这些特性和方法：
JavaScript中大部份处理DOM的过程都利用document对象。
访问<html/>元素使用document.documentElement;
用nodeType属性检测节点类型。
如:var myhtml=document.documentElement;
Alert(myhtml.nodeType);
访问指定节点
1. getElementsByTagName()
核心（XML）DOM定义了getElementsByTagName()方法，用来返回一个包含所有的tagName（标签名）特性等于某个指定值的元素的NodeList。在Element对象中，tagName特性总是等于小于号之后紧随的名称——例如，<img />的tagName是"img"。下一行代码返回文档中所有<img />元素的列表：
var oImgs = document.getElementsByTagName("img");
在把所有图形都存于oImgs后，只需使用方括号标记或者item()方法（getElementsByTag- Name()返回一个和childNodes一样的NodeList），就可以像访问子节点那样逐个访问这些节点了：
Alert(oImgs[0].tagname);
2. getElementsByName()
HTML DOM定义了getElementsByName()，它用来获取所有name特性等于指定值的元素的。
3. getElementById()
这是HTML DOM定义的第二种方法，它将返回id特性等于指定值的元素。在HTML中，id特性是唯一的——这意味着没有两个元素可以共享同一个id。毫无疑问这是从文档树中获取单个指定元素最快的方法。
处理特性
正如前面提到的，即便Node接口已具有attributes方法，且已被所有类型的节点继承，然而，只有Element节点才能有特性。Element节点的attributes属性其实是NamedNodeMap，它提供一些用于访问和处理其内容的方法：
getNamedItem(name)——返回nodeName属性值等于name的节点；
removeNamedItem(name)——删除nodeName属性值等于name的节点；
setNamedItem(node)——将node添加到列表中，按其nodeName属性进行索引；
item(pos)——像NodeList一样，返回在位置pos的节点；
例：
<div id=”mydiv” style=”color: red”>hello! I love you!</div>
Var odiv=document.getElementbyId(“mydiv”);
Odiv.attributes.getNamedItem(“id”).nodeValue;//得到的将是id的特性值”mydiv”
还可以用数值方式访问：odiv.attributes.item(0).nodeValue;
因为这个方法有些累赘，DOM又定义了三个元素方法来帮助访问特性：
getAttribute(name)——等于attributes.getNamedItem(name).value；
setAttribute(name, newvalue)——等于attribute.getNamedItem(name).value = newvalue；
removeAttribute(name)——等于attributes.removeNamedItem(name)。
创建和操作节点
迄今为止，已经学过了如何访问文档中的不同节点，不过这仅仅是使用DOM所能实现的功能中的很小一部分。还能添加、删除、替换（或者其他操作）DOM文档中的节点。正是这些功能使得DOM具有真正意义上的动态性。
1. 创建新节点
DOM Document（文档）中有一些方法用于创建不同类型的节点，即便在所有的浏览器中的浏览器document对象并不需要全部支持所有的方法。下面的表格列出了包含在DOM Level 1中的方法，并列出不同的浏览器是否支持项。
最常用到的几个方法是：createDocumentFragment()、createElement()和createTextNode()；其他的一些方法要么就是没什么用（createComment()），要么就是浏览器的支持不够，目前还不太能用。
另外，每种节点类型都有appendChild()方法，它的用途是将给定的节点添加到某个节点的childNodes列表的尾部。
2、操作节点
removeChild()、replaceChild()和insertBefore()，createDocumentFragment()
自然的，可以添加一个节点，当然也可以删除一个节点，这就是removeChild()所要做的事。这个方法接受一个参数，要删除的节点，然后将这个节点作为函数的返回值返回。
replaceChild()方法有两个参数：被添加的节点和被替换的节点。
如果想让新消息出现在旧消息之前，就使用insertBefore()方法。这个方法接受两个参数：要添加的节点和插在哪个节点之前。
一旦把节点添加到document.body（或者它的后代节点）中，页面就会更新并反映出这个变化。对于少量的更新，这是很好的，就像在前面的例子中那样。然而，当要向document添加大量数据时，如果逐个添加这些变动，这个过程有可能会十分缓慢。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中。
table方法
为了协助建立表格，HTML DOM给<table/>、<tbody/>和<tr/>等元素添加了一些特性和方法。
给<table/>元素添加了以下内容：
caption——指向<caption/>元素（如果存在）；
tBodies——<tbody/>元素的集合；
tFoot——指向<tfoot/>元素（如果存在）；
tHead——指向<thead/>元素（如果存在）；
rows——表格中所有行的集合；
createTHead()——创建<thead/>元素并将其放入表格；
createTFoot()——创建<tfoot/>元素并将其放入表格；
createCaption()——创建<caption/>元素并将其放入表格；
deleteTHead()——删除<thead/>元素；
deleteTFoot()——删除<tfoot/>元素；
deleteCaption()——删除<caption />元素；
deleteRow(position)——删除指定位置上的行；
insertRow(position)——在rows集合中的指定位置上插入一个新行。
<tbody/>元素添加了以下内容：
rows——<tbody/>中所有行的集合；
deleteRow(position)——删除指定位置上的行；
insertRow(position)——在rows集合中的指定位置上插入一个新行。
<tr/>元素中添加了以下内容：
cells——<tr/>元素中所有的单元格的集合；
deleteCell(position)——删除给定位置上的单元格；
insertCell(position)——在cells集合的给定位置上插入一个新的单元格。
例：
补充：字符串处理
CSS解析
鼠标特效
3947
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
