W3C DOM

W3C DOM

W3C DOM到底是什么？W3C主页提供了清晰的定义：

文档对象模型（DOM）是与平台和语言无关的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。文档可以进一步处理，处理的结果可以放回到所提供的页面中。

不仅如此，W3C还解释了为什么要定义标准的DOM。W3C从其成员处收到了大量请求，这些请求都是关于将XML和HTML文档的对象模型提供给脚本所要采用的方法。提案并没有提出任何新的标记或样式表技术，而只是力图确保这些可互操作而且与脚本语言无关的解决方案能得到共识，并为开发社区所采纳。简单地说，W3C DOM标准的目的是尽量避免20世纪90年代末的脚本恶梦，那时相互竞争的浏览器都有自己专用的对象模型，而且通常都是不兼容的，这就使得实现跨平台的脚本极其困难。

W3C DOM和JavaScript

W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM，JavaScript根本没有Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分，这就使得JavaScript可以访问元素的属性和方法。

DOM独立于具体的编程语言，通常通过JavaScript访问DOM，不过并不严格要求这样。可以使用任何脚本语言来访问DOM，这要归功于其一致的API。表3-1列出了DOM元素的一些有用的属性，表3-2列出了一些有用的方法。

表3-1  用于处理XML文档的DOM元素属性

属性名

描述

childNodes

返回当前元素所有子元素的数组

firstChild

返回当前元素的第一个下级子元素

lastChild

返回当前元素的最后一个子元素

nextSibling

返回紧跟在当前元素后面的元素

nodeValue

指定表示元素值的读/写属性

parentNode

返回元素的父节点

previousSibling

返回紧邻当前元素之前的元素

表3-2　用于遍历XML文档的DOM元素方法

方法名

描述

getElementById(id) (document)

获取有指定惟一ID属性值文档中的元素

getElementsByTagName(name)

返回当前元素中有指定标记名的子元素的数组

hasChildNodes()

返回一个布尔值，指示元素是否有子元素

getAttribute(name)

返回元素的属性值，属性由name指定

有了W3C DOM，就能编写简单的跨浏览器脚本，从而充分利用XML的强大功能和灵活性，将XML作为浏览器和服务器之间的通信介质。

从下面的例子可以看到，使用遵循W3C DOM的JavaScript来读取XML文档是何等简单。代码清单3-3显示了服务器向浏览器返回的XML文档的内容。这是一个简单的美国州名列表，各个州按地区划分。

代码清单3-3 服务器返回的美国州名列表

<?xml version="1.0" encoding="UTF-8"?>

<states>

    <north>

        <state>Minnesota</state>

        <state>Iowa</state>

        <state>North Dakota</state>

    </north>

    <south>

        <state>Texas</state>

        <state>Oklahoma</state>

        <state>Louisiana</state>

    </south>

    <east>

        <state>New York</state>

        <state>North Carolina</state>

        <state>Massachusetts</state>

    </east>

    <west>

        <state>California</state>

        <state>Oregon</state>

        <state>Nevada</state>

    </west>

</states>

 

var xmlDoc = xmlHttp.responseXML;

var northNode = xmlDoc.getElementsByTagName("north")[0];

northNode的内容：

<north>

        <state>Minnesota</state>

        <state>Iowa</state>

        <state>North Dakota</state>

    </north>

var northStates = northNode.getElementsByTagName("state");

在这里也可以var northStates ＝northNode.childNodes;

northStates是一个数组：

<state>Minnesota</state>

<state>Iowa</state>

<state>North Dakota</state>

northStates[0]是<state>Minnesota</state>、

northStates[1]是<state>Iowa</state>

.........................................................................

northStates[0]的子元素数组的第一个子元素的值，对于nodeValue一定要到达元素的最底层数据部分

northStates[0].childNodes[0].nodeValue;//值为Minnesota

完整例子：http://blog.csdn.net/lin49940/archive/2007/08/07/1730853.aspx

使用W3C DOM动态编辑页面

表3-3 动态创建内容时所用的W3C DOM属性和方法

属性/方法

描述

document.createElement(tagName)

文档对象上的createElement方法可以创建由tagName指定的元素。如果以串div作为方法参数，就会生成一个div元素

document.createTextNode(text)

文档对象的createTextNode方法会创建一个包含静态文本的节点

<element>.appendChild(childNode)

appendChild方法将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。例如，可以增加一个option元素，作为select元素的子节点

<element>.getAttribute(name)

<element>.setAttribute(name, value)

这些方法分别获得和设置元素中name属性的值

<element>.insertBefore(newNode, targetNode)

这个方法将节点newNode作为当前元素的子节点插到targetNode元素前面

<element>.removeAttribute(name)

这个方法从元素中删除属性name

<element>.removeChild(childNode)

这个方法从元素中删除子元素childNode

<element>.replaceChild(newNode, oldNode)

这个方法将节点oldNode替换为节点newNode

<element>.hasChildnodes()

这个方法返回一个布尔值，指示元素是否有子元素

 

关于浏览器的不兼容性

尽管当前Web浏览器中W3C DOM和JavaScript的实现在不断改进，但还是存在一些特异性和不兼容性，这使得应用DOM和JavaScript进行开发时很是头疼。

IE的W3C DOM和JavaScript实现最受限制。2000年初，一些统计称IE占据了整个浏览器市场95%的份额，由于没有竞争压力，Microsoft决定不完全实现各个Web标准。

这些特异问题大多都能得到解决，不过这样做会让脚本更是混乱不堪而且不合标准。例如，如果使用appendChild将<tr>元素直接增加到<table>中，则在IE中这一行并不出现，但在其他浏览器中却会显示出来。对此的解决之道是，将<tr>元素增加到表的<tbody>元素中，这种解决办法在所有浏览器中都能正确工作。

关于setAttribute方法，IE也有麻烦。IE不能使用setAttribute正确地设置class属性。对此有一个跨浏览器的解决方法，即同时使用setAttribute("class", "new- ClassName") 和setAttribute("className","newClassName")。另外，在IE中不能使用setAttribute设置style属性。最能保证浏览器兼容的技术不是<element>.setA-
ttribute("style, "font-weight:bold;")，而是<element>.style.cssText = "font
- weight:bold;"。

本书中的例子会尽可能地遵循W3C DOM和JavaScript标准，不过如果必须确保大多数当前浏览器的兼容性，可能也会稍稍偏离标准。

    下面的例子展示了如何使用W3C DOM和JavaScript来动态创建内容。这个例子是假想的房地产清单搜索引擎，点击表单上的Search（搜索）按钮，会使用XMLHttpRequest对象以XML格式获取结果。使用JavaScript处理响应XML，从而生成一个表。

服务器返回的XML很简单（见代码清单3-5）。根节点properties包含了得到的所有property元素。每个property元素包含3个子元素：address、price和comments。

代码清单3-5  dynamicContent.xml

<?xml version="1.0" encoding="UTF-8"?>

<properties>

    <property>

        <address>812 Gwyn Ave</address>

        <price>$100,000</price>

        <comments>Quiet, serene neighborhood</comments>

    </property>

    <property>

        <address>3308 James Ave S</address>

        <price>$110,000</price>

        <comments>Close to schools, shopping, entertainment</comments>

    </property>

    <property>

        <address>98320 County Rd 113</address>

        <price>$115,000</price>

        <comments>Small acreage outside of town</comments>

    </property>

</properties>

 

HTML里面

<span id="header">

  </span>

  <table id="resultsTable" width="75%" border="0">

    <tbody id="resultsBody">

    </tbody>

  </table>

clearPreviousResults函数

function clearPreviousResults() {

    var header = document.getElementById("header");

    if(header.hasChildNodes()) {

        header.removeChild(header.childNodes[0]);

    }

 

    var tableBody = document.getElementById("resultsBody");

    while(tableBody.childNodes.length > 0) {

        tableBody.removeChild(tableBody.childNodes[0]);

    }

}

        clearPreviousResults函数完成两个任务：删除出现在最上面的“Results”标题文本，并从结果表中清除所有行。首先使用hasChildNodes方法查看可能包括标题文本的span元素是否有子元素。应该知道，只有hasChildNodes方法返回true时才存在标题文本。如果确实返回true，则删除span元素的第一个（也是惟一的）子节点，因为这个子节点表示的就是标题文本。

 给<tableBody>增加row和cell的函数，不过先插入对象再添加内容比较好，所以我大胆改了，测试没问题

function addTableRow(address, price, comments) {

    var row = document.createElement("tr");

    //var cell = createCellWithText(address);

    row = createCellWithText(row,address);       // row.appendChild(cell);


    //cell = createCellWithText(price);

    row = createCellWithText(row,price);       //row.appendChild(cell);

 
    //cell = createCellWithText(comments);

    row = createCellWithText(row,comments);       //row.appendChild(cell);


    document.getElementById("resultsBody").appendChild(row);

}


function createCellWithText(row,text){                         

    var cell = document.createElement("td");

    var textNode = document.createTextNode(text);

    row.appendChild(cell);

 

    cell.appendChild(textNode);
 
    return row;         //cell;

}

       addTableRow函数使用W3C DOM方法和JavaScript建立一个表行。使用document.cre-
ateElement方法创建一个row对象，之后，再使用名为createCellWithText的辅助函数分别为address、price和comments值创建一个cell对象。createCellWithText函数会创建并返回一个以指定的文本作为单元格内容的cell对象。

createCellWithText函数首先使用document.createElement方法创建一个td元素，然后使用document.createTextNode方法创建一个包含所需文本的文本节点，所得到的文本节点追加到td元素。这个函数再把新创建的td元素返回给调用函数（addTableRow）。

 完整例子：http://blog.csdn.net/lin49940/archive/2007/08/07/1730838.aspx