记得和上次写教程隔了好多天了，其中的原因说来惭愧，自己偷懒了，呵呵~
话说上一章说了AJAX和MVC，这章就犯愁了，该写什么呢。想来想去，想到了！~~~如题注一样，这章讲DOM技术和JAVASCRIPT。为什么说DOM和JAVASCRIPT呢，其实他们和AJAX很有关系的，AJAX具体的实现和他们是离不开的，之后我们会通过实例来说明。
一、DOM深入了解
DOM中相关属性和方法
|
DOM中常用的几种结点类型 思派S-pai |
|
接口 |
nodeType常量 |
nodeType值 |
备注 |
|
element |
Node.ELEMENT_NODE |
1 |
元素结点 |
|
text |
Node.TEXT_NODE |
3 |
文本结点 |
|
document |
Node.DOCUMENT_NODE |
9 |
Document |
|
comment |
Node.COMMENT_NODE |
8 |
注释文本 |
|
documentFragment |
Node.DOCUMENT_FRAGMENT_NODE |
11 |
Document片段 |
|
attr |
Node.ATTRIBUTE_NODE |
2 |
结点属性 |
在使用DOM操作HTML文档时，经常使用document对象的相关方法，有关该对象的常用方法如表4-2所示。
|
document对象的常用方法 思派S-pai |
|
方法 |
描述 |
|
createAttribute() |
用指定的名字创建新的attr结点，即属性结点 |
|
createComment() |
用指定的字符串创建新的comment结点 |
|
createElement() |
用指定的标记名创建新的element结点 |
|
createTextNode() |
用指定的文本创建新的textNode结点 |
|
getElementById() |
返回文档中具有指定id属性的element结点 |
|
getElementsByTagName() |
返回文档中具有指定标记名的所有element结点 |
除了document对象对应的属性及方法比较常用之外，对于element结点，可以通过调用getAttribute()，setAttribute()，removeAttribute()方法来查询、设置或删除一个element结点的相关属性，例如<table>标记的border属性。Element对象的常用方法：
|
Element对象的常用方法 思派S-pai |
|
方法 |
描述 |
|
getAttribute() |
以字符串形式返回指定属性的值 |
|
getAttributeNode() |
以attr结点的形式返回指定属性的值 |
|
getElementsByTagName() |
返回一个Node数组，包含具有指定标记名的所有element结点的子孙结点，其顺序为在文档中出现的顺序 |
|
hasAttribute() |
如果该元素具有指定名字的属性，则返回true |
|
removeAttribute() |
从元素中删除指定的属性 |
|
removeAttributeNode() |
从元素的属性列表中删除指定的attr结点 |
|
setAttribute() |
把指定的属性设置为指定的字符串值，如果该属性不存在则添加一个新属性 |
|
setAttributeNode() |
把属性的attr结点添加到该元素的属性列表中 |
Node对象定义了一系列属性和方法，以便于遍历整个文档。用parentNode属性和childNodes[]数组可以在文档树中上下移动；通过遍历childNodes[]数组或者使用firstChild和nextSibling属性进行循环操作，也可以使用lastChild和previousSibling进行逆向循环操作，还可以根据需要枚举指定结点的子结点。而调用appendChild()、insertBefore()、removeChild()、replaceChild()方法可以改变一个结点的子结点从而改变文档树。
|
node对象的常用属性 思派S-pai |
|
属性 |
描述 |
|
attribute |
如果该结点是一个element，则以NameNodeMap形式返回该元素的属性 |
|
childNodes |
以node[]的形式存放当前结点的子结点。如果没有子结点，则返回空数组 |
|
firstNodes |
以node的形式返回当前结点的第一个子结点。如果没有子结点，则为null |
|
lastNodes |
以node的形式返回当前结点的最后一个子结点。如果没有子结点，则为null |
|
nextSibling |
以node的形式返回当前结点的兄弟下一个子结点。如果没有子结点，则为null |
|
nodeNode |
结点的名字，element结点代表element的标记名称 |
|
nodeType |
代表结点的类型 |
|
setAttributeNode() |
把指定的attr结点添加到该元素的属性列表中 |
|
parentNode |
以node的形式返回当前结点的父结点。如果没有父结点，则返回null |
|
previousSibling |
以node的形式返回紧挨当前结点、位于它之前的兄弟结点。如果没有这样的节点，则返回null |
在使用DOM操作HTML文档时，会使用node对象的相关方法，通过这些方法实现对指定结点的具体操作。
|
node对象的常用方法 思派S-pai |
|
方法 |
描述 |
|
appendChild() |
通过把一个结点增加到当前结点的childNodes[]组，给文档树增加结点 |
|
cloneNode() |
复制当前结点，或者复制当前结点以及它的所有子结点 |
|
hasChildNodes() |
如果当前结点拥有子结点，则将返回true |
|
insertBefore() |
给文档树插入一个结点，位置在当前结点的指定子结点前。如果该结点已经存在，则删除之再插入到它的位置。 |
|
removeChild() |
从文档树中删除并返回指定的子结点 |
|
replaceChild() |
从文档树中删除并返回指定的子结点，用另一个结点替换它 |
大致了解了DOM对HTML文档操作提供的相关对象及方法后，通过实例来体验它的作用。