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);　　

　　　　　　}