counter
counter

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

      }

   

posted @ 2012-07-24 17:10  bfy  阅读(539)  评论(0编辑  收藏  举报