Google上对DOM的简明解释是:
文档对象模型(Docuement Object Model,简称DOM),是W3C组织推荐的处理XML的标准适配器。

我们说的简明一点,DOM就是:
1:一些信息的集合
2:这些信息有标准的结构
3:这个结构是基于“层”概念的
4:“层”的意思就是这样:<第一层><第二层><第三层></第三层></第二层></第一层>

DOM是一个很概念性的东西,并非这几句话就可以阐述清楚地。

javascript中对xml dom的支持,与其他任何特性一样面临着浏览器兼容问题。

JavaScript操作XMLDOM对象

 

//两种方式创建XML对象
var doc = new ActiveXObject("Msxml2.DOMDocument"); 
var doc = new ActiveXObject("Microsoft.XMLDOM");//ie5.5+

//加载文档
//doc.load("b.xml");

//将XML文档设为同步方式,默认是异步方式
doc.async = false;

//创建文件头
var p = doc.createProcessingInstruction("xml\","version=1.0 encoding=gb2312");

//添加文件头
doc.appendChild(p);

//用于直接加载时获得根接点
var root = doc.documentElement;

//两种方式创建根接点
var root = doc.createElement("students");
var root = doc.createNode(1,"students","");

//创建子接点
var n = doc.createNode(1,"ttyp","");
//添加孙接点
n.appendChild(o);

//添加文本接点
n.appendChild(doc.createTextNode("this is a text node."));

//添加注释
n.appendChild(doc.createComment("this is a comment\n"));

//添加子接点
root.appendChild(n);

//复制接点
var m = n.cloneNode(true);
root.appendChild(m);

//删除接点
root.removeChild(root.childNodes(0));

//遍历DOM文档
documentElement 文档根元素的引用
attributes 节点属性数组
childNodes 节点子节点数组
firstChild 第一个子节点引用
lastChild 最后一个子节点引用
parentNode 父节点
nextSibling 下一个邻居节点
previousSibling 上一个邻居节点
nodeName 节点名
nodeType 节点类型
nodeValue 节点值
ownerDocument 回到根节点

 

<?xml version="1.0" encoding="utf-8" ?>
<root>
    <prov id="p001" name="山东">
        <city id="c001" name="济南"></city>
        <city id="c002" name="青岛"></city>
    </prov>
    <prov id="p002" name="辽宁">
        <city id="c003" name="沈阳"></city>
        <city id="c004" name="大连"></city>
    </prov>
    <prov id="p003" name="江苏">
        <city id="c001" name="南京"></city>
        <city id="c002" name="苏州"></city>
    </prov>
    <prov id="p004" name="四川">
        <city id="c001" name="成都"></city>
        <city id="c002" name="汶川"></city>
        <city id="c003" name="北川"></city>
     </prov>
</root>

 

var listprov = document.getElementById("listProv");
    //创建XMLDOM
    var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    var root;
    //将XMLDOM文档对象的访问方式设为同步,否则默认是异步方式
    xmlDoc.async = false;
    //加载XML文档对象
    xmlDoc.load("ProvCity.xml");
    //取得XML文档对象的根元素
    root = xmlDoc.documentElement;
    //遍历根元素下的直接子接点,加载到省份的下拉列表中
    for (var i=0; i<root.childNodes.length; i++) 
    {
        //为省份下拉列表创建option
        var option = document.createElement("<option>");
        //设置option的文本
        option.innerText = root.childNodes[i].attributes[1].text;
        //设置option的value值
        option.value = root.childNodes[i].attributes[0].text;
        //向省份下拉列表加载上面的option
        listprov.appendChild(option);
    }

    //加载省份的函数
    function showcity()
    {
        //取得省份下拉列表框对象
        var list = document.getElementById("listProv");
        //取得城市下拉列表框对象
        var city = document.getElementById("listCity");
        //先清空原有的城市下拉列表项
        var n = city.options.length;
        for(var k=0;k<n;k++)
        {
            city.removeChild(city.options[0]);
        }
        //取得省份下拉列表的value值
        var ss = list.options[list.selectedIndex].value;
        //查询XML相关节点,并加载其元素
        for(var i=0;i<root.childNodes.length;i++)
        {
            //取得选中的省份的value
            var val = root.childNodes[i].attributes[0].text;
            //根据选中省份的value值,定位XML文件的指定元素,并加载相关的子元素
            if(val == ss)
            {
                var node = root.childNodes[i];
                //遍历当前节点的所有的子元素,并加载
                for(var j=0;j<node.childNodes.length;j++)
                {
                    
                    var option = document.createElement("<option>");
                    option.innerText = node.childNodes[j].attributes[1].text;
                    option.value = node.childNodes[j].attributes[0].text;
                    city.appendChild(option);
                }
            }
        }
    }

 

 

 

 

评论
发表评论

您还没有登录,请登录后发表评论