属性名
|
描述
|
childNodes
|
返回当前元素所有子元素的数组
|
firstChild
|
返回当前元素的第一个下级子元素
|
lastChild
|
返回当前元素的最后一个子元素
|
nextSibling
|
返回紧跟在当前元素后面的元素
|
nodeValue
|
指定表示元素值的读
/
写属性
|
parentNode
|
返回元素的父节点
|
previousSibling
|
返回紧邻当前元素之前的元素
|
方法名
|
描述
|
getElementById(id) (document)
|
获取有指定惟一
ID
属性值文档中的元素
|
getElementsByTagName(name)
|
返回当前元素中有指定标记名的子元素的数组
|
hasChildNodes()
|
返回一个布尔值,指示元素是否有子元素
|
getAttribute(name)
|
返回元素的属性值,属性由
name
指定
|
< 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的内容:
< state > Minnesota </ state >
< state > Iowa </ state >
< state > North Dakota </ state >
</ north >
var northStates = northNode.getElementsByTagName("state");
在这里也可以var northStates =northNode.childNodes;
northStates是一个数组:
< 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动态编辑页面
属性
/
方法
|
描述
|
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,从而生成一个表。
< 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 >
< table id ="resultsTable" width ="75%" border ="0" >
< tbody id ="resultsBody" >
</ tbody >
</ table >
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的函数,不过先插入对象再添加内容比较好,所以我大胆改了,测试没问题
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);
return row; //cell;
}
addTableRow函数使用W3C DOM方法和JavaScript建立一个表行。使用document.cre-
ateElement方法创建一个row对象,之后,再使用名为createCellWithText的辅助函数分别为address、price和comments值创建一个cell对象。createCellWithText函数会创建并返回一个以指定的文本作为单元格内容的cell对象。
完整例子:http://blog.csdn.net/lin49940/archive/2007/08/07/1730838.aspx