DOM节点解析与操作-优快云博客

节点

DOM 是这样规定的：

整个文档是一个文档节点
每个 XML 元素是一个元素节点
包含在 XML 元素中的文本是文本节点
每一个 XML 属性是一个属性节点
注释是注释节点

在 DOM 处理中一个普遍的错误是，认为元素节点包含文本。
不过，元素节点的文本是存储在文本节点中的。
在这个实例中：<year>2005</year>，元素节点 <year>，拥有一个值为 “2005” 的文本节点。
“2005” 不是 <year> 元素的值！

节点树

XML DOM 把 XML 文档视为一棵节点树。
在这里插入图片描述

加载函数

为了让加载函数便于管理，可以把加载函数写成一个函数，然后使用时从脚本中调用：
loadxmldoc.js


function loadXMLDoc(dname)
{
    if (window.XMLHttpRequest)
    {
        xhttp=new XMLHttpRequest();
    }
    else
    {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhttp.open("GET",dname,false);
    xhttp.send();
    return xhttp.responseXML;
}


<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
 
<script>
xmlDoc=loadXMLDoc("books.xml");
 
code goes here.....
 
</script>
 
</body>
</html>

DOM属性

一些典型的 DOM 属性：

x.documentElement - x的根节点
x.nodeName - x 的名称

nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

x.nodeValue - x 的值

元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性的值

x.parentNode - x 的父节点
x.childNodes - x 的子节点
x.attributes - x 的属性节点

三个重要的节点属性是：

nodeName：只读，规定节点名称
nodeValue：规定节点的值，注意元素节点的值是undefined
nodeType：规定节点的类型，只读，元素节点类型值是1，属性是2，文本是3，注释是8，文档是9

获取节点

getElementsByTagName（）-通过标签名获取元素对象
getAttribute()-获取对象属性值
getAttributeNode()-获取对象属性节点

改变节点

在 DOM 中，每种成分都是节点。元素节点没有文本值。元素节点的文本存储在子节点中。该节点称为文本节点。改变元素文本的方法，就是改变这个子节点（文本节点）的值。
对于属性节点，可以通过使用 setAttribute() 方法或属性节点的 nodeValue 属性来实现这个效果

<script>
    xmlDoc=loadXMLDoc("helloXml.xml");
    x=xmlDoc.getElementsByTagName("book")[0];
    x.setAttribute("category","food");//用setAttribute改变属性
    document.write(x.getAttribute("category")+"<br>");
    y=x.getAttributeNode("category");//获取属性节点
    y.nodeValue="en";//改变属性节点的值
    document.write(x.getAttribute("category"));
</script>

在这里插入图片描述