在dom眼中,html跟xml一样是一种树形结构的文档。各个节点被视为各种类型的node对象。每个node对象都有自己的属性和方法,利用这些属性和方法可以遍历整个文档树。dom定义了nodetype来表示节点的类型
接口
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树的根节点是个document对象,有时候document即指向整个文档。
document定义的方法大多数是生产型方法,主要用于创建可以插入文档中的各种类型的节点。常用的document方法有:
方法
描述
createattribute()
用指定的名字创建新的attr节点。
createcomment()
用指定的字符串创建新的comment节点。
createelement()
用指定的标记名创建新的element节点。
createtextnode()
用指定的文本创建新的textnode节点。
getelementbyid()
返回文档中具有指定id属性的element节点。
getelementsbytagname()
返回文档中具有指定标记名的所有element节点。
element常用的方法:
方法
描述
getattribute()
以字符串形式返回指定属性的值。
getattributenode()
以attr节点的形式返回指定属性的值。
getelementsbytabname()
返回一个node数组,包含具有指定标记名的所有element节点的子孙节点,其顺序为在文档中出现的顺序。
hasattribute()
如果该元素具有指定名字的属性,则返回true。
removeattribute()
从元素中删除指定的属性。
removeattributenode()
从元素的属性列表中删除指定的attr节点。
setattribute()
把指定的属性设置为指定的字符串值,如果该属性不存在则添加一个新属性。
setattributenode()
把指定的attr节点添加到该元素的属性列表中。
node对象常用属性:
属性
描述
attributes
如果该节点是一个element,则以namednodemap形式返回该元素的属性。
childnodes
以node[]的形式存放当前节点的子节点。如果没有子节点,则返回空数组。
firstchild
以node的形式返回当前节点的第一个子节点。如果没有子节点,则为null。
lastchild
以node的形式返回当前节点的最后一个子节点。如果没有子节点,则为null。
nextsibling
以node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点,则返回null。
nodename
节点的名字,element节点则代表element的标记名称。
nodetype
代表节点的类型。
parentnode
以node的形式返回当前节点的父节点。如果没有父节点,则为null。
previoussibling
以node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点,则返回null。
node对象常用方法:
方法
描述
appendchild()
通过把一个节点增加到当前节点的childnodes[]组,给文档树增加节点。
clonenode()
复制当前节点,或者复制当前节点以及它的所有子孙节点。
haschildnodes()
如果当前节点拥有子节点,则将返回true。
insertbefore()
给文档树插入一个节点,位置在当前节点的指定子节点之前。如果该节点已经存在,则删除之再插入到它的位置。
removechild()
从文档树中删除并返回指定的子节点。
replacechild()
从文档树中删除并返回指定的子节点,用另一个节点替换它。
获取元素的值下面的代码检索第一个 b2386ffb911b14667cb8f0f91ea547a7 元素的文本值:
x=xmldoc.getelementsbytagname("title")[0].childnodes[0];txt=x.nodevalue; //其实应该先判断节点是否存在
结果:txt = "harry potter"
获取属性的值下面的代码检索第一个 <title> 元素的 "lang" 属性的文本值:
txt=xmldoc.getelementsbytagname("title")[0].getattribute("lang");
结果:txt = "en"
改变元素的值下面的代码改变第一个 <title> 元素的文本值:
x=xmldoc.getelementsbytagname("title")[0].childnodes[0];x.nodevalue="easy cooking";
改变属性的值setattribute() 方法可用于改变已有属性的值,或创建一个新属性。
下面的代码向每个 <book> 元素添加了名为 "edition" 的新属性(值是 "first"):
x=xmldoc.getelementsbytagname("book");for(i=0;i<x.length;i++) { x[i].setattribute("edition","first"); }
创建元素createelement() 方法创建新的元素节点。
createtextnode() 方法创建新的文本节点。
appendchild() 方法向节点添加子节点(在最后一个子节点之后)。
如需创建带有文本内容的新元素,需要同时创建元素节点和文本节点。
下面的代码创建了一个元素 (<edition>),然后把它添加到第一个 <book> 元素中:
newel=xmldoc.createelement("edition");
newtext=xmldoc.createtextnode("first");
newel.appendchild(newtext);
x=xmldoc.getelementsbytagname("book");x[0].appendchild(newel);
例子解释:创建 <edition> 元素
创建值为 "first" 的文本节点
把这个文本节点追加到 <edition> 元素
把 <edition> 元素追加到第一个 <book> 元素
删除元素removechild() 方法删除指定的节点(或元素)。
下面的代码片段将删除第一个 <book> 元素中的第一个节点:
x=xmldoc.getelementsbytagname("book")[0];x.removechild(x.childnodes[0]);
实例代码<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function parsexml() {
try //internet explorer
{
xmldoc = new activexobject("microsoft.xmldom");
}
catch (e) {
try //firefox, mozilla, opera, etc.
{
xmldoc = document.implementation.createdocument("", "", null);
}
catch (e) {
alert(e.message);
return;
}
}
xmldoc.async = false; //假如xml载入完毕执行以下
xmldoc.load("note.xml");
var x = xmldoc.getelementsbytagname("to");
// xmldoc.getelementsbytagname("to")[0].setattribute("date") = "1515"; //设置属性值
// xmldoc.getelementsbytagname("to")[0].childnodes[0].nodevalue = "tiewang"; //设置文本节点值
// //循环修改
// for (i = 0; i < x.length; i++) {
// if (x[i].childnodes[0] == null) { //如果不存在问题,则添加
// newtext1 = xmldoc.createtextnode("af");
// x[i].appendchild(newtext1);
// }
// x[i].childnodes[0].nodevalue = "af";
// }
// //循环添加 //注意,如果把create放在for循环外面,则只能添加到最后一个,需要放在for里面
for (i = 0; i < x.length; i++) {
if (x[i].getelementsbytagname("too")[0] == null) {
newelemenet = xmldoc.createelement("too");
newtext = xmldoc.createtextnode("logo");
newelemenet.setattribute("id", "1");
newelemenet.appendchild(newtext);
x[i].appendchild(newelemenet);
}
}
// //循环删除
// for (i = 0; i < x.length; i++) {
// if (x[i].getelementsbytagname("too")[0] != null) {
// x[i].removechild(x[i].getelementsbytagname("too")[0]);
// }
// }
//删除to -> too 节点中的id属性
for (i = 0; i < x.length; i++) {
if (x[i].getelementsbytagname("too")[0] != null) {
if (x[i].getelementsbytagname("too")[0].getattribute("id")!=null) {
x[i].getelementsbytagname("too")[0].removeattribute("id");
}
}
}
var xmlhttp;
try {
// firefox, opera 8.0+, safari
xmlhttp = new xmlhttprequest();
}
catch (e) {
// internet explorer
try {
xmlhttp = new activexobject("msxml2.xmlhttp");
}
catch (e) {
try {
xmlhttp = new activexobject("microsoft.xmlhttp");
}
catch (e) {
alert("您的浏览器不支持ajax!");
return false;
}
}
}
xmlhttp.onreadystatechange = function() { //onreadystatechange 属性存有处理服务器响应的函数
if (xmlhttp.readystate == 4) { //readystate 属性存有服务器响应的状态信息
document.getelementbyid("to").innerhtml = xmlhttp.responsetext; //通过 responsetext 属性来取回由服务器返回的数据
}
}
xmlhttp.open("post", "receive.aspx?type=xmlsave", true);
// open() 方法需要三个参数。第一个参数定义发送请求所使用的方法(get 还是 post)。第二个参数规定服务器端脚本的 url。第三个参数规定应当对请求进行异步地处理。
xmlhttp.send(xmldoc); //send() 方法可将请求送往服务器
}
</script>
</head>
<body onload="parsexml()">
<form id="form1" runat="server">
<p>
<h1 id = "to"></h1>
<h1 id ="value"></h1>
</p>
</form>
</body>
</html>
以上就是xml学习(二)详解dom操作xml文档的详细内容。