javascript解析dom

最新推荐文章于 2024-08-10 16:15:00 发布

weixin_30615767

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量61

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jianjialin/archive/2009/01/10/1373380.html

版权

预备知识点
nodeName                    节点的名字（文本节点为#text）
nodeValue                   节点的值
childNodes      nodelist    子节点集合
previousSibling node        前一个兄弟节点
nextSibling     node        后一个兄弟节点

访问一个dom模型的根节点是  moxing.documentElement;
比如document.documentElement访问的是<html />节点

访问一个节点的文本可以用node.text或者node.childNodes[0].nodeValue(节点的第一个子节点的值)

创建一个table
var otable=document.createElement("table");
//create the tbody
var oTBody=document.createElement("tbody");
//add tbody
otable.appendChild(oTBody);
oTBody.insertRow(0);
oTBody.rows[0].insertCell(0);
oTBody.rows[0].cells[0].appendChild(document.createTextNode('文本节点'));

………………
//最后把otable添加到html的body里面
document.body.appendChild(otable);

新建一个数据访问层

返回dataset
public static DataSet getSupplier() {
        Con.Open();
        SqlCommand com=new SqlCommand("select * from suppliers",Con);
        SqlDataAdapter sda = new SqlDataAdapter(com);
        DataSet ds = new DataSet();
        sda.Fill(ds, "suppliers");
        con.Close();
        return ds;

    }

新建一个一般处理程序

一般处理程序
public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        if (context.Request.QueryString["id"] == "suppliers") {
            Xml_GetSupplier(context);
        }
    }

    private void Xml_GetSupplier(HttpContext context) {
//获得dataset
        DataSet ds = DataAccess.getSupplier();
//用dataset的writexml方法把数据写入xmltextWriter对象
//xmltextWriter写入输出流返回给前台XML结构的数据
        XmlTextWriter write = new XmlTextWriter(context.Response.OutputStream, System.Text.Encoding.UTF8);
        write.Formatting = Formatting.Indented;
        write.Indentation = 4;
        write.IndentChar = ' ';
        ds.WriteXml(write);
        write.Flush();
        context.Response.End();
        write.Close();
    }

前台页面

HTML元素
<input type="button" value="获得供应商" onclick="getSupplier()" />
        <select id="supplier" onchange="changeSelect(this)">
            <option value="-1">请选择提供商</option>
         </select>

ajax脚本

新建XMLHTTPREQUEST对象
        var request;

//        function createRequest()
//        {
//            try
//            {
//                request = new XMLHttpRequest();
//            }
//            catch (trymicrosoft)
//            {
//                try
//                {
//                    request = new ActiveXObject("Msxml2.XMLHTTP");
//                }
//                catch (othermicrosoft)
//                {
//                    try
//                    {
//                        request = new ActiveXObject("Microsoft.XMLHTTP");
//                    }
//                    catch (failed)
//                    {
//                        request = false;
//                    }
//                }
//            }
//         }

给按钮的函数

ajax
function getSupplier(){
            //createRequest();
            request=new XMLHttpRequest();
            request.open("POST","Handler.ashx?id=suppliers",true);
            request.onreadystatechange=setSupplier;
            request.send(null);

        }

回调函数
function setSupplier(){
            if (request.readyState == 4){
                if (request.status == 200){
                    var xml=request.responseText;
//加载微软的XML DOM解析库
                    var doc=new ActiveXObject("Msxml2.DOMDocument");
//加载服务器传过来的XML数据
                    doc.loadXML(xml);
                    //alert(xml);
//得到下拉列表
                    var select=document.getElementById("supplier");
//移除下拉列表原有记录
                    for(var i=0; i<select.options.length; i++){
                        select.options.remove(select.options[i]);
                    }
//通过selectNodes获得所有的的符合XPATH的节点
                    var suppliers=doc.documentElement.selectNodes("suppliers/CompanyName");
                    var supplierID=doc.documentElement.selectNodes("suppliers/SupplierID");
//                    alert(suppliers[0].text);
//                    alert(suppliers[0].childNodes[0].nodeValue);
//                    alert(supplierID[0].text);
加入进select下拉列表
                    for(var i=0; i<suppliers.length; i++){
                        var option=document.createElement("option");
                        option.text=suppliers[i].text;
                        option.value=supplierID[i].text;

                        select.options.add(option);

                    }


                }
            }
         }

转载于:https://www.cnblogs.com/jianjialin/archive/2009/01/10/1373380.html

weixin_30615767

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript解析dom

预备知识点nodeName节点的名字（文本节点为#text）nodeValue节点的值childNodesnodelist子节点集合previousSiblingnode前一个兄弟节点nextSiblingnode后一个兄弟节点...
复制链接

扫一扫