mozilla
您的搜索结果

    如何创建一个DOM树

    本文介绍了如何使用javascript中的DOM CoreAPI来创建并修改DOM对象.它适用于所有基于Gecko的应用程序(比如firefox),包括有特权的(扩展)和没有特权的(网页)代码。

    动态创建一个DOM树

    考虑下面的xml文档:

    <?xml version="1.0"?>
    <people>
      <person first-name="eric" middle-initial="H" last-name="jung">
        <address street="321 south st" city="denver" state="co" country="usa"/>
        <address street="123 main st" city="arlington" state="ma" country="usa"/>
      </person>
    
      <person first-name="jed" last-name="brown">
        <address street="321 north st" city="atlanta" state="ga" country="usa"/>
        <address street="123 west st" city="seattle" state="wa" country="usa"/>
        <address street="321 south avenue" city="denver" state="co" country="usa"/>
      </person>
    </people>
    

    mozilla支持的W3C DOM API,可以使用如下代码创建上面的DOM树结构:

    var doc = document.implementation.createDocument("", "", null);
    var peopleElem = doc.createElement("people");
    
    var personElem1 = doc.createElement("person");
    personElem1.setAttribute("first-name", "eric");
    personElem1.setAttribute("middle-initial", "h");
    personElem1.setAttribute("last-name", "jung");
    
    var addressElem1 = doc.createElement("address");
    addressElem1.setAttribute("street", "321 south st");
    addressElem1.setAttribute("city", "denver");
    addressElem1.setAttribute("state", "co");
    addressElem1.setAttribute("country", "usa");
    personElem1.appendChild(addressElem1);
    
    var addressElem2 = doc.createElement("address");
    addressElem2.setAttribute("street", "123 main st");
    addressElem2.setAttribute("city", "arlington");
    addressElem2.setAttribute("state", "ma");
    addressElem2.setAttribute("country", "usa");
    personElem1.appendChild(addressElem2);
    
    var personElem2 = doc.createElement("person");
    personElem2.setAttribute("first-name", "jed");
    personElem2.setAttribute("last-name", "brown");
    
    var addressElem3 = doc.createElement("address");
    addressElem3.setAttribute("street", "321 north st");
    addressElem3.setAttribute("city", "atlanta");
    addressElem3.setAttribute("state", "ga");
    addressElem3.setAttribute("country", "usa");
    personElem2.appendChild(addressElem3);
    
    var addressElem4 = doc.createElement("address");
    addressElem4.setAttribute("street", "123 west st");
    addressElem4.setAttribute("city", "seattle");
    addressElem4.setAttribute("state", "wa");
    addressElem4.setAttribute("country", "usa");
    personElem2.appendChild(addressElem4);
    
    var addressElem5 = doc.createElement("address");
    addressElem5.setAttribute("street", "321 south avenue");
    addressElem5.setAttribute("city", "denver");
    addressElem5.setAttribute("state", "co");
    addressElem5.setAttribute("country", "usa");
    personElem2.appendChild(addressElem5);
    
    peopleElem.appendChild(personElem1);
    peopleElem.appendChild(personElem2);
    doc.appendChild(peopleElem);
    

    查看 DOM chapter of the XUL Tutorial 了解更多详情.

    你可以使用 JXON 反转算法 将一个JSON字符串自动的转换成DOM树:

    {
      "people": {
        "person": [{
          "address": [{
            "@street": "321 south st",
            "@city": "denver",
            "@state": "co",
            "@country": "usa"
          }, {
            "@street": "123 main st",
            "@city": "arlington",
            "@state": "ma",
            "@country": "usa"
          }],
          "@first-name": "eric",
          "@middle-initial": "H",
          "@last-name": "jung"
        }, {
          "address": [{
            "@street": "321 north st",
            "@city": "atlanta",
            "@state": "ga",
            "@country": "usa"
          }, {
            "@street": "123 west st",
            "@city": "seattle",
            "@state": "wa",
            "@country": "usa"
          }, {
            "@street": "321 south avenue",
            "@city": "denver",
            "@state": "co",
            "@country": "usa"
          }],
          "@first-name": "jed",
          "@last-name": "brown"
        }]
      }
    }
    

    相关内容

    DOM树可以通过使用XPath表达式来查询元素,可以通过使用XMLSerializer(不用先转换为字符串)将自身转换为一个字符串或写入本地/远程文件,也可以通过 XMLHttpRequest被POST到一个web服务器,也可以使用XSLTXlink进行转换,还可以使用JXON算法将自身转换为一个JavaScript对象等等.

    你可以使用DOM数来组织数据,在不适合使用RDF文件的情况下(或许你只是不喜欢使用RDF).另外一个应用是,由于XUL是XML,所以你的应用程序的界面可以很容易的被动态地修改、下载、上传、保存、加载、转换、或者变形.

    相关链接

    文档标签和贡献者

    Contributors to this page: kmaglione, ziyunfei, Mgjbot, Carrie zhxj, Laser
    最后编辑者: ziyunfei,