本文主要是介绍【旧文】AJAX总结（二），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
四、DOM
1.DOM概述
XHR对象提供了跟服务器通讯的能力，而DOM提供了访问、动态更新页面的能力。
DOM是W3C推出的文档对象模型，是表示文档和访问、操作构成文档的各种元素的API，被定义为独立于语言的标准，在javascript和java以及其他语言中都有实现。
在DOM中，HTML文档的层次机构被表示为树形结构，树的节点表示文档中的各种内容。HTML文档的树形表示主要包含表示元素或标记（如<table>和<p>）的节点和表示文本串的节点构成。
DOM定义了许多接口，其中比较通用的是其核心API：NodeList、Node、 Document、Element接口，Document和Element接口都是Node接口的子接口。在JavaScript实现的DOM中还包含 HTML文档专用的API，如HTMLDocument、HTMLElement。另外，DOM为许多HTML元素定义了标记专有的接口，如 HTMLBodyElement、HTMLTitleElement。
2. Node接口
Node接口是文档树中所有节点的顶级父接口，定义了通用的属性和方法。
常用属性：
|
属性 |
说明 |
|
nodeType |
代表节点的类型 |
|
nodeName |
节点的名字，Element节点则代表Element的标记名称 |
|
parentNode |
以Node的形式返回当前节点的父节点。如果没有父节点，为null |
|
childNodes |
以NodeList的形式返回当前节点的子节点 |
|
firstChild |
以Node的形式返回当前节点的第一个子节点，如果没有子节点，则为null |
|
lastChild |
以Node的形式返回当前节点的最后一个子节点，如果没有子节点，则为null |
|
previousSibling |
以Node的形式返回当前节点的前一个兄弟节点，如果没有，则为null |
|
nextSibling |
以Node的形式返回当前节点的下一个兄弟节点，如果没有，则为null |
|
nodeValue |
如果是TextNode节点，该属性代表节点的文本值 |
注意：在java的实现中，与上述属性对应的是get/set方法，如getNodeType()、getFirstChild()等。
常用方法：
|
方法 |
说明 |
|
hasChildNodes() |
如果当前节点拥有子节点，则返回true |
|
appendChild() |
把一个节点增加到当前节点的childNodes，给文档树增加节点 |
|
removeChild() |
从文档树中删除并返回指定的子节点 |
|
replaceChild() |
从文档树中删除并返回指定的子节点，用另一个节点替换 |
|
insertBefore() |
在当前节点的指定子节点之前插入一个节点 |
3. Document接口
DOM 树的根节点是个Document对象，该对象的documentElement属性引用表示文档根元素的Element对象，对于HTML文档，就是<html>元素。Document接口的常用方法有：
|
方法 |
说明 |
|
createAttribute() |
用指定的名字创建新的Attr节点 |
|
createElement() |
用指定的名字创建新的Element节点 |
|
createTextNode() |
用指定的名字创建新的TextNode节点 |
|
getElementById() |
返回文档中具有指定id属性的Element节点 |
|
getElementsByTagName() |
以NodeList形式返回文档中具有指定标记名的所有Element节点 |
|
继承Node接口的方法 |
|
在HTML文档中，document对象就是Document接口的一个实现，准确的说，是HTMLDocument接口的实现。document对象还有许多HTML专用的方法和属性，如：
document.write();
document.all;
document.forms[];
4. Element接口
常用方法：
|
方法 |
说明 |
|
hasAttribute() |
如果该元素具有指定名字的属性，返回true |
|
getAttribute() |
以字符串形式返回指定属性的值 |
|
setAttribute() |
把指定属性值设置为指定的字符串，不存在则添加 |
|
removeAttribute() |
从元素中删除指定的属性 |
|
getAttributeNode() |
以Attr节点的形式返回指定的属性 |
|
setAttributeNode() |
把指定的Attr节点添加到该元素的属性列表中 |
|
removeAttributeNode() |
从元素的属性列表中删除指定的Attr节点 |
|
getElementsByTagName() |
返回一个NodeList，包含具体指定标记名称的该元素的所有子节点 |
|
继承Node接口的方法 |
|
4. NodeList接口
在javascript实现的DOM中，NodeList接口的使用类似与Node[]的形式，可以通过指定索引下标的形式引用，如：
var nodeLists = element. childNodes;
for(var i = 0;i<nodeLists.length;i++){
var node = nodeLists[i];
}
6. 其他
document.all属性，IE4提供；
document.getElementsByName()是HTMLDocument接口定义的方法；
innerHTML属性，IE4定义，后来的Netscape6、Mozilla也实现了；
五、
AJAX中的中文问题
1. 获取数据时的中文问题
XHR对象同时具有responseText属性和responseXML属性，分别获取服 务器返回的文本和兼容DOM的XML文档对象。在服务器返回的数据量比较大而且数据有一定的结构时，我们通常在服务器端组织成xml格式，而在客户端通过 responseXML属性获取XML文档对象，这样便于解析。比如：
var results = xmlHttp.responseXML.getElementsByTagName("result");
在返回的数据里包含中文字符时，无法直接获取responseXML属性，需要首先获取responseText属性，再利用微软的Microsoft.XMLDOM组件解析文本格式的xml字符串，如下：
2. 提交数据时的中文问题
有时候，需要向服务器端提交中文数据，这种情况一般采用POST方法，把要提交的数据以名值对的形式作为send方法的参数，在服务器端需要做一下设置：
request.setCharacterEncoding("UTF-8");这样，request.getParameter()方法获得的参数就不会出现乱码。
（完）
这篇关于【旧文】AJAX总结（二）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
