DOM技术 及浏览器中XPath的支持
1.CSS样式:background-color 。 javascript样式属性:style.backgroundColor。style还包括cssText属性,显示所有的样式。
1.1:DOM样式的方法:odiv=document.getElementById("div1");
odiv.style.getPropertyvalue(css样式名) 返回样式名的值。
odiv.style.item(index) 返回index处的CSS样式名, 如:background-color 。
odiv.style.removeProperty(CSS样式名) 移除CSS样式名。
odiv.style.setProperty(propertyname,value,priority),按照优先级priority来设置value的优先级,priority可为important或为空。
IE不支持DOM的style方法,最好直接用style对象的特性来获取或设置CSS的特性。如: odiv.style.background-color ="Red"
1.2:innerText与innerHTML
<div><span>a</span></div>
innerText:不保留HTML标签。a
innerHTML:保留HTML标签。<span>a</span>
1.3:DOM范围中的简单选区
<div id="p"><b>hello</b>world</div>
var p1 = document.createRange();
var p2 = document.createRange();
var p3=document.getElementById("p");
p1.selectNode(p3);=><div id="p"><b>hello</b></div>
p1.selectNodeContents(p3);=><b>hello</b>
var ohello=p.firstChild.firstChild;
var oworld=p.lastChild;
var p4 = document.createRange();
p4.setStart(ohello,2);=>llo
p4.setEnd(oworld,3);=>wor
var ofragement=p4.CloneContents();
document.body.appendChild(p4);=>llo</b>wor将会被加载到页面底部
var ospan=document.CreateElement("span“);
ospan.style.color="Red";
P4.surroundContent(ospan);=>llo</b>wor背景成红色。
ospan.appendChild(document.createTextNode("Insert Node"));
p4.insertNode(ospan);=><div id="p"><b>he<span style="color:red">Insert Node</span>llo</b>world</div>
2.<?xml version="1.0"?>
<employees>
<employer title="SoftWare">
<name>Micle</name>
</employer >
<employer title="HardWare">
<name>Tomas</name>
</employer >
</employees>
匹配employees的第一个元素:employer[position()=1]/name
匹配title:employer[@title="SoftWare"] . @是attribute的缩写
2.IE中的XPath支持:
var listNodes=oxmlDom.documentElement.selectNode(employer/name);返回匹配给定模式的数据集合。
for(var i=0;i<listNodes.lenth;i++)
{
alert(listNodes[i]);
}
var listNode=oxmlDom.documentElement.selectSingleNode(employer/name);返回匹配模式的第一个元素。
3.Mozilla中的XPath支持:
重要两个对象:XPathEvaluator和XPathResult.模拟IE的selectNodes方法
XPathEvaluator.evaluate(xpath表达式,上下文节点,命名空间解释程序,返回结果的类型,在XPathResult中存放的结果(通常为null))方法的五个参数.
Element.property.selectNodes=function(sXpath)
{
var oEvaluate=new XPathEvaluator();
var oResult=oEvaluate.evaluate(sXpath,oXmlDom.documentelement,null,XPathResult.ORDERED_NODE_ITERATOR-TYPE,null) ;
var aNodes=new Array();
if(oResult!=null)
{
var oElement=oResult.iteraterNext();
//oElement为节点迭代子,不管有序还是无序,都可以用iteraterNext函数获取在结果中的每一个匹配结果
while(oElement!=null)
{
//alert(oElement.tagname);
aNodes.push(oElement);
oElement=oResult.iteraterNext();
}
}
}
可以用上面函数来模拟IE的selectNodes方法。返回类型的有十种。sXpath:"employer/name"
新用法:var aNodes=oXmlDom.documentElement.selectNodes("employer/name");
for(var i=0;i<aNodes.length;i++)
{
alert(aNodes[i].xml);
}