本文介绍了如何使用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服务器,也可以使用XSLT,Xlink进行转换,还可以使用JXON算法将自身转换为一个JavaScript对象等等.
你可以使用DOM数来组织数据,在不适合使用RDF文件的情况下(或许你只是不喜欢使用RDF).另外一个应用是,由于XUL是XML,所以你的应用程序的界面可以很容易的被动态地修改、下载、上传、保存、加载、转换、或者变形.