DOM可以做如何,javascript飞快入门26

XPath是一个好工具

2014/02/23 · CSS · 3
评论DOM可以做如何,javascript飞快入门26。 ·
CSS

本文由 伯乐在线 –
杨帅
翻译。未经许可,禁止转发!
英文出处:rapgenius。欢迎加入翻译组。

自家首先次接触XPath是在二零零七年,但近来才起来对它发出兴趣。从前在大部动静下自己都会尽量防止使用它,而当自家只能尝试使用它时,每一回都以战败告终。那时XPath对自己来说并没有怎么意义。

唯独后来自我遇上了一个新鲜的辨析难点(对CSS拔取器来说过于复杂,而用手工代码的话又过分不难),于是自己决定再尝试五回XPath。令我深感惊喜的是,那的确行得通,而且很有用。

以下是自家的亲身经历

DOM节点新闻
每个DOM节点都保存了关于该节点的一对信息,大家来看看哪些访问那么些新闻。
nodeName、nodeValue和nodeType
同样,依照字面意思:nodeName表示节点名称,nodeValue表示节点值,nodeType则为节点类型。每个DOM节点都富含这么些音信,大家能够很有利地经过JavaScript来访问这一个属性。上边大家就来看一个利用那一个属性的一个例证。
选用实例
HTML代码:
<div>
  <p id=”test”>test文字</p>
</div>

XPath

XPath 简介

XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML
文档中对元素和属性举办遍历。XPath 是 W3C XSLT 标准的机要元素,并且
XQuery 和 XPointer 同时被营造于 XPath 表明之上。由此,对 XPath
的领会是成百上千高档 XML 应用的根基。
其实对些大家并不生疏,最与XPath相似的便是CSS的挑选器.在CSS中使用CSS接纳符接纳元一贯利用样式,而在XSLT中则运用XPath,XPath与CSS接纳器比较如强大的过多!下边是CSS拔取符与XPath选取符一些对照:

    //CSS选择符
    body p  //选择所有body下面的p元素
    body>p //选择body的子元素p
    * //选择所有的元素
    //与之对应的XPath选择符
    body//p
    body/p
    *

 

虽说现在还无法领会这一个XPath表达的含意,但足以窥见,它和CSS选取符卓殊相像!但XPath有更强劲的地点,比如它可以一定到body元素下具体地方上的p或可以接纳前N个p:

    body/p[position()=4]  //这个XPath表达式将选取body子元素中第4个p元素,注意这里从1开始计数
    body/p[position()<3]  //将选取body子元素中前两个p元素

 

XPath 使用路径表达式来抉择 XML
文档中的节点依旧节点集。那个途径表明式和大家在正常的电脑文件系统中观察的表明式卓殊相似。别的,XPath
含有超过 100
个内建的函数。那些函数用于字符串值、数值,日期和岁月比较、节点和 QName
处理、连串处理、逻辑值等等。

本人遇上的题目

比方你管理一个歌词网站,为了保险一致的翻阅经验,你要收集每行歌词的首先个单词。如若歌词使用纯文本格式保存,那么可以直接用上边的代码来完毕。

JavaScript

lyrics.gsub!(/^./) { |character| character.upcase }

1
lyrics.gsub!(/^./) { |character| character.upcase }

然则假诺歌词被保存肯html格式就不曾这么简单了,因为dom结构自身并从未”行”的概念,所以并未主意使用一个简练的正则表明式来识别行。

据此我们要做的第一件工作是概念什么是dom结构中的“行的源点”,上面是七个简易的例证:

  • <p>标签中首个公文节点
  • <br>前边的率先个文本节点

如同上边那样:

XHTML

<p>This is the beginning of a line.<br>This is
too.</p>

1
<p>This is the beginning of a line.<br>This is too.</p>

可是除此之外我们兴许还要处理嵌套的行内元素:

XHTML

<p><em>This</em> is the beginning of a line.
<strong>This is not.</strong></p>

1
<p><em>This</em> is the beginning of a line. <strong>This is not.</strong></p>

JavaScript代码
<script type=”text/javascript”>
function getName(){
        var x =document.getElementById(“test”);
        alert(x.nodeName);
}
function getValue(){
        var x =document.getElementById(“test”);
        alert(x.nodeValue);
}
function getType(){
        var x =document.getElementById(“test”);
        alert(x.nodeType);
}
</script>

XPath 简介

XPath 是一门在 XML 文档中查找新闻的语言。XPath 可用来在 XML
文档中对元素和质量举行遍历。XPath 是 W3C XSLT 标准的重中之重因素,并且
XQuery 和 XPointer 同时被创设于 XPath 表明之上。因而,对 XPath
的掌握是无数高档 XML 应用的基础。
其实对些大家并不生疏,最与XPath相似的便是CSS的选择器.在CSS中运用CSS接纳符选用元向来利用样式,而在XSLT中则采纳XPath,XPath与CSS选用器相比较如强大的过多!上面是CSS接纳符与XPath拔取符一些比照:

   //CSS选择符
    body p  //选择所有body下面的p元素
    body>p //选择body的子元素p
    * //选择所有的元素
    //与之对应的XPath选择符
    body//p
    body/p
    *

虽说现在还不可能精晓这个XPath说明的味道,但可以发现,它和CSS选拔符分外相像!但XPath有更强劲的地方,比如它可以一定到body元素下具体地点上的p或可以选拔前N个p:

   body/p[position()=4]  //这个XPath表达式将选取body子元素中第4个p元素,注意这里从1开始计数
    body/p[position()<3]  //将选取body子元素中前两个p元素

XPath 使用路径表明式来拔取 XML
文档中的节点仍旧节点集。那一个途径表达式和大家在健康的电脑文件系统中看出的表达式非凡相似。其余,XPath
含有领先 100
个内建的函数。这几个函数用于字符串值、数值,日期和岁月比较、节点和 QName
处理、种类处理、逻辑值等等。

书写XPath

XPath使用路径表达式在 XML 文档中精选节点。节点是透过沿着路径(path)或者
步(step)
来摘取的。如”/”表示文档节点,”.”表示近日节点,而”..”则意味方今节点的父节点.示例:

    {因为XPath表示达式中有斜杠,所以暂时用这个表示注释!
    / {选取文档节点,nodeType为9
    /root {选取文档根元素,类似于文件系统的路径(Unix),以/开头的路径都是绝对路径
    /root/child/.. {选取根节点root的子节点child的父节点(就是root)

 

下边是有的常用路径表达式

  • nodeName 选用名称为nodeName的节点
  • / 从根节点接纳
  • // 接纳元素后代元素,必须在后边跟上nodeName
  • . 接纳当前节点
  • .. 选择当前节点的父节点
  • @ 选拔属性节点(@是attribute的缩写)

    <?xml version="1.0"?>
    <root>
        <child attr="attr" />
        <child>
            <a><desc /></a>
        </child>
    </root>
    
    {针对上面的XML文档的XPath结果,当前节点为document
    /root  {选取root
    root {选取root
    child {空,因为child不是document的子元素
    //child {选取两个child元素,//表示后代
    //@attr {选取attr属性节点
    /root/child//desc {返回child的后代元素desc
    

 

好端端的化解方案

本身想到的率先个缓解办法是用Ruby写一个主意来围观dom中享有有关的一些并递归找出装有符合条件的节点。其中使用了多少个轻量级的css选择器:

JavaScript

def each_new_line(document) document.css('p').each { |p|
yield first_text_node(p) } document.css('br').each { |br|
yield first_text_node(br.next) } end def first_text_node(node) if
node.nil? then nil elsif node.text? then node elsif node.children.any?
then first_text_node(node.children.first) end end

1
2
3
4
5
6
7
8
9
10
11
def each_new_line(document)
  document.css(&#039;p&#039;).each { |p| yield first_text_node(p) }
  document.css(&#039;br&#039;).each { |br| yield first_text_node(br.next) }
end
 
def first_text_node(node)
  if node.nil? then nil
  elsif node.text? then node
  elsif node.children.any? then first_text_node(node.children.first)
  end
end

那是一个相比较客观的解决方案,不过11行的代码如同有些儿长。有点儿杀鸡用牛刀的感到,仅仅为了拿走dom的节点而用上Ruby的迭代器和标准语句感觉有些犯不上。应该有更好的办法呢?

实际效果:
test文字

书写XPath

XPath使用路径表明式在 XML 文档中甄选节点。节点是通过沿着路径(path)或者
步(step)
来选择的。如”/”表示文档节点,”.”表示方今节点,而”..”则表示如今节点的父节点.示例:

   {因为XPath表示达式中有斜杠,所以暂时用这个表示注释!
    / {选取文档节点,nodeType为9
    /root {选取文档根元素,类似于文件系统的路径(Unix),以/开头的路径都是绝对路径
    /root/child/.. {选取根节点root的子节点child的父节点(就是root)

下边是部分常用路径表达式

  • nodeName 采用名称为nodeName的节点
  • / 从根节点拔取
  • // 选用元素后代元素,必须在前边跟上nodeName
  • . 选择当前节点
  • .. 选用当前节点的父节点
  • @ 接纳属性节点(@是attribute的缩写)

   <?xml version="1.0"?>
    <root>
        <child attr="attr" />
        <child>
            <a><desc /></a>
        </child>
    </root>
    {针对上面的XML文档的XPath结果,当前节点为document
    /root  {选取root
    root {选取root
    child {空,因为child不是document的子元素
    //child {选取两个child元素,//表示后代
    //@attr {选取attr属性节点
    /root/child//desc {返回child的后代元素desc

谓语(Predicates)

谓语用于在检索节点时提供更详细的音信,谓语被嵌在方括号中。上边是一对涵盖谓语的XPath表明式:

    /root/child[3] {选取root元素的第三个child子元素,注意,这和数组下标不一样,从1开始计数
    //child[@attr] {选取所有具有属性attr的child元素
    //child[@attr="val"]/desc {选取所有属性attr的值为val的child元素的子元素desc
    //child[desc] {选取所有的有desc子元素的child
    //child[position()>3]  {position()是XPath中的一个函数,表示节点的位置
    //child[@attr>12] {XPath表达式还可以进行数值比较,该表达式将选取attr属性值大于12的child元素
    //child[last()] {last()函数返回节点列表最后的位置,该表达式将选取最后一个child元素

 

毕竟说到正题了(XPath)

XPath有弹指间多少个原因不难令人思疑。第一点是网上大概平昔不得以参照的东西(W3Schools!就不要想了)。RFC已经是本身找到的最好的文档了。

第二点是XPath看上去有些像CSS。方法名里就有“path”,所以自己连连如果XPath的表明式中的
/ 和CSS接纳器中的 > 是一个情趣。

JavaScript

document.xpath('//p/em/a') == document.css('p > em
> a')

1
document.xpath(&#039;//p/em/a&#039;) == document.css(&#039;p &gt; em &gt; a&#039;)

其实,XPath表明式包涵了成百上千简写,如若大家想要弄掌握下边代码运行时究竟暴发了何等就亟必要弄领会那一个简写。下边是用全拼写出来的相同的表明式:

JavaScript

/descendant-or-self::node()/child::p/child::em/child::a/

1
/descendant-or-self::node()/child::p/child::em/child::a/

以此XPath表达式和方面的CSS选择器的功用是平等的,但并不像我前边假设的那样。一个XPath表明式是由一个或多个被
/ 分割的原则性步(location steps)组成。表达式中的第四个 /
代表了文档(document)的根节点。每个定位步都注明了一度被匹配的节点并转达一下三条音讯:

本人想从脚下的职位移动到哪?

答案是轴(Axis),是可选的。默许的轴是child,表示“当前被入选节点的所有子节点”。在地点的例证中,descendant-or-self是第四个定位部的轴,表示“所有当前被入选的节点和她们所有的子节点”。大多数XPath规范中定义的轴都有像“descendant-or-self”那样的语义化的名字。

本人想要选用怎么类型的节点?

选料的始末是由节点测试来指定的,那也是各类定位步中不得缺失的有些。在我们事先的例证中,node()匹配的是全部类型;text()匹配到的是文本节点;element()只可以合营到元素,并务必指明节点名称(像p,em等),节点名称必填。

也许增加额外的过滤器吗?

想必大家只想接纳当前所有节点的首个子元素或只想选则有href属性的<a>标签。对于此类断言(assertion),大家能够应用谓词(predicates)依据额外的遍历树(additional
tree
traversals)来过滤出符合条件的节点。那样大家就可以按照这一个节点的习性(children,
parents, or siblings)来过滤出符合条件的节点。

咱俩的事例中从不谓词,现在让大家来加一个只极度有href属性的<a>标签:

JavaScript

/descendant-or-self::node()/child::p/child::em/child::a[attribute::href]

1
/descendant-or-self::node()/child::p/child::em/child::a[attribute::href]

虽说谓词看上去很像一个括号中的定位步,不过谓词中的“节点测试(node
test)”部分有比定位步中的节点测试越多的机能。

getName()
getValue()
getType()

谓语(Predicates)

谓语用于在查找节点时提供更详实的信息,谓语被嵌在方括号中。上边是部分富含谓语的XPath表达式:

   /root/child[3] {选取root元素的第三个child子元素,注意,这和数组下标不一样,从1开始计数
    //child[@attr] {选取所有具有属性attr的child元素
    //child[@attr="val"]/desc {选取所有属性attr的值为val的child元素的子元素desc
    //child[desc] {选取所有的有desc子元素的child
    //child[position()>3]  {position()是XPath中的一个函数,表示节点的位置
    //child[@attr>12] {XPath表达式还可以进行数值比较,该表达式将选取attr属性值大于12的child元素
    //child[last()] {last()函数返回节点列表最后的位置,该表达式将选取最后一个child元素

通配符

XPath 通配符可用来摘取未知的 XML 元素。

  • * ,和CSS中的选择符一样,那将至极任何因素节点
  • @* ,匹配任何性质节点
  • node() ,匹配任何类型的节点

    /root/* {选取根元素下面的所有子元素
    /root/node() {选取根元素下面的所有节点,包括文本节点
    //* {选取文档中所有元素
    //child[@*] {选取所有具有属性的child元素
    //@*  {选取所有的属性节点
    

 

换一个角度来看XPath

与一个增强型的CSS拔取器相比,XPath与JQuery的福利更相像。例如,大家得以把前边的XPath表达式换成JQuery的情势:

JavaScript

$(document).find(‘*’). children(‘p’). children(’em’).
children(‘a’).filter(‘[href]’)

1
2
3
4
$(document).find(‘*’).
  children(‘p’).
  children(’em’).
  children(‘a’).filter(‘[href]’)

上面的代码中,大家用到的JQuery的方法与轴的效果是如出一辙的:

JavaScript

.children()相当于轴中的child,.find()相当于descendant。

1
.children()相当于轴中的child,.find()相当于descendant。

JQuery方法中的拔取器相当于XPath中的节点测试,只可惜jQuery不容许拔取文本节点。

jQuery中的.filter()方法相当于XPath中的谓词,.children(’em’)的作用是协作所有匹配到的<p>标签中的所有<em>子元素。那样看来,XPah要比jQuery强大得多。

从例子中可以发现:一个p标签的nodeName是P,固然在XHMTL中我们把段落写作小些的p,该属性如故为大写字母。它的nodeValue是null,而并不是它所包罗的文书,那是因为文件本身也是一个节点,而文本节点的nodeValue才是文字。
末尾,nodeType是“1”。它的意趣是因素节点(大家知道,p是一个HTML元素)。别的主要的DOM节点类型:
2 —— 属性节点
3 —— 文本节点

通配符

XPath 通配符可用来选拔未知的 XML 元素。

  • * ,和CSS中的选拔符一样,那将匹配任何因素节点
  • @* ,匹配任何性质节点
  • node() ,匹配任何项目标节点

   /root/* {选取根元素下面的所有子元素
    /root/node() {选取根元素下面的所有节点,包括文本节点
    //* {选取文档中所有元素
    //child[@*] {选取所有具有属性的child元素
    //@*  {选取所有的属性节点

构成路径

与CSS中使用逗号组合使用多少个选拔符一样,XPath协助一种采纳”|”来组成七个途径的语法!

    /root | /root/child {选取根元素root与它下面的子元素child
    //child | //desc {选取所有的child元素与desc元素

 

让大家重返识别行首的题材

近来我们对XPath的劳作规律已经有了深深的垂询,上边来用它解决以前涉嫌的题材。首先我们先把问题简化一下,只寻找每段的率先个公文节点:

JavaScript

/descendant-or-self::node()/child::p/child::text()[position()=1]

1
/descendant-or-self::node()/child::p/child::text()[position()=1]

上面的代码的功能依次是:

  • 1.搜寻文档中的所有节点
  • 2.物色这么些节点的具备为<p>的子节点
  • 3.寻找这几个<p>的文本子节点
  • 4.只保留那个节点中符合条件的第二个元素

专注position() function
在代码中象征的是每个<p>中的第三个文本子节点而不是一体文档中的第四个<p>的文本子节点。

接下去,为了找到<p>中被嵌套得很深的文书节点,我们把child换成descendant

JavaScript

/descendant-or-self::node()/child::p/descendant::text()[position()=1]

1
/descendant-or-self::node()/child::p/descendant::text()[position()=1]

接下去是甄别换行的题目,首先大家给这一长串代码折下行(因为太长了),XPath是允许这样做的。参与换行的辨认后,代码如下:

JavaScript

/descendant-or-self::node()/ child::br/
following-sibling::node()[position=1]/
descendant-or-self::text()[position()=1]

1
2
3
4
/descendant-or-self::node()/
child::br/
following-sibling::node()[position=1]/
descendant-or-self::text()[position()=1]

每一行代码的情致分别是:

  • 1.找到所有节点
  • 2.找到到这一个节点的<br>子节点
  • 3.找到这一个<br>的下一个同级节点
  • 4.要是上边取到的不是文本节点,则取它们的子节点中的首个文件节点

那样一来大家就足以同时选出<p>中和<br>后的新的一行。上边大家上述的代码合并成一个表明式:

JavaScript

(/descendant-or-self::node()/child::p|
/descendant-or-self::node()/child::br/following-sibling::node()[position=1])/
descendant-or-self::text()[position()=1]

1
2
3
(/descendant-or-self::node()/child::p|
/descendant-or-self::node()/child::br/following-sibling::node()[position=1])/
descendant-or-self::text()[position()=1]

末尾我们把简写替换进去:

JavaScript

(//p|//br/following-sibling::node()[position=1])/
descendant-or-self::text()[position=1]

1
2
(//p|//br/following-sibling::node()[position=1])/
descendant-or-self::text()[position=1]

那样大家就把一个错综复杂的概念用一个简练的表达式表示出来了。假使大家想出席更加多的对行的操作,只须要往落成匹配的代码中进入越多的元素名称就足以了。

8 —— 注释节点

DOM信息nodeType的应用
本文介绍了使用DOM节点的nodeType属性来过滤出一定项目节点的措施。并且举了一个总结文档内享有因素节点的实例。
行使DOM时一个很奇怪(也很可恶)的状态就是连代码中的换行都可能会被视为节点。以上面的HTML代码为例。
HTML代码
代码如下,我们得以清楚地看到div节点内唯有一个段落。
<div id=”test”>
        <p>我是测试段落</p>
</div>
<div id=”result”> </div>
JavaScript代码
日后大家运用上面的JavaScript代码来突显id为test的div的子节点。首先,我们采用getElementById获得id为test的节点。之后选用childNodes得到它的子结点。最终在id为result的节点中显得那个子结点的节点名称和节点类型。
<script type=”text/javascript”>
function test(){
        var str = “”;
        var nodes =document.getElementById(“test”).childNodes;
        for( var i = 0;i <nodes.length; i++){
               str += nodes[i].nodeName;
               str += “:”;
               str += nodes[i].nodeType;
               str += “<br/>”;
        }
        document.getElementById(“result”).innerHTML= str;
}
</script>
nodeType的应用
点击上面的按钮就足以看来你所选拔的浏览器认为这一个div有多少个子结点。
test()
自己是测试段落
 
在FireFox下,获得如下的结果:
#text:3
P:1
#text:3
在IE下,得到如下结果:
P:1
看得出,在FireFox中,代码中的换行也被认为是一个类型为1,名字为#text的节点。不过平日我们对代码中的换行并不感兴趣。那时大家就可以应用nodeType来过滤掉那类不必要的因素。使用上边的JS代码就可以完毕了。
for( var i = 0;i < nodes.length; i++){
        if(nodes[i].nodeType == 1){
        //代码,唯有在节点为要素节点的时候才实施
        }
}
遍历文档所有的要素节点www.2cto.com
上边大家在来看一段使用nodeType的JS代码。它的效益是遍历文档中装有的因素节点,并且总括元素节点的总数。当然大家以可以修改代码来对那个元素节点做任何操作。JavaScript代码如下:
<script type=”text/javascript”>
function countElements(node){
        var total = 0;
        if(node.nodeType == 1){ total +=1;}
        var children = node.childNodes;
        for(var i = 0;i <children.length; i++){
               total +=countElements(children[i]);
        }
        return total;
}
function test2(){
        var elementsCount =countElements(document);
        alert(elementsCount);
}
</script>
test2()
点击下边的按钮就足以看到那一个网页的总元素节点数了

======================================================================================================
修改DOM——innerHTML
本节介绍使用innerHTML来走访以及修改HTML DOM的办法。
俺们事先曾经了解到一些询问DOM节点的函数,例如getElementById和getElementsByTagName。可是大家不但可以访问DOM节点,更可以变更它们,甚至改变总体节点树的布局。上面大家就来看看改变DOM的最简易的法子——innerHTML。
innerHTML的趣味就是“里面的HTML”,就像是它的名字同样不难精通,使用它也是极度的简便。大家先来看一个例证。
访问innerHTML实例代码
<div id=”test”>
        <p>我是测试段落。</p>
</div>
作用如下:
自身是测试段落。
test() ,点击这么些按钮就足以显得出div的innerHTML,它调用的JS代码如下:
<script type=”text/javascript”>
function test(){
        alert(document.getElementById(“test”).innerHTML);
}
</script>
修改innerHTML实例代码
给元素的innerHTML赋值就足以变更元素的情节了,同样是上边的div,大家创制其余一段代码来改变它的内容:
<script type=”text/javascript”>
function testW(){
        var str = “<p>气象一新!¥%……&*()</p>”;
        document.getElementById(“test”).innerHTML= str;
}
</script>
testW()
,点击这些按钮就足以举办下面的代码,将首先个例子中div的情节改动。
 
删除DOM节点——removeChild
本节介绍了何等选用removeChild从文档中删去DOM节点,举出一个粗略例子的还要还简要介绍了该函数的再次回到值。
上一节我们看了怎么选取innerHTML来修改DOM,而选择removeChild函数则可以去除文档中的指定节点。我们照样选拔一个例证来注脚该函数的施用方法。
HTML代码
<div id=”test”>
        <p>我是快要被删除的节点</p>
</div>
实例JavaScript代码
<script type=”text/javascript”>
function remove(){
        var test =document.getElementById(“test”);
        var children = test.childNodes;
        for(i=0;i<children.length;i++){
               test.removeChild(children[i]);
        }
}
</script>
除去节点示例
自我是即将被删除的节点
remove() ,点击那个按钮就会将地方div的子结点全体删减。
从地点的JS代码可以看来,使用removeChild的格式为:
父节点.removeChild(子结点)
removeChild的再次来到值
removeChild删除节点后会再次来到被删去节点的引用,那样当我们将来再想再次将它添加到文档中,或者是对它进行其余操作的时候就足以利用那一个引用了。例如上面的代码段:
var removed = xxx.removeChild(xxxx);
则removed就是被剔除的节点,可以在背后的代码中选用。
添加DOM节点
本节介绍使用正式的DOM方法向文档中添加节点,用到了createElement、createTextNode以及appendChild等艺术。
面前大家由此innerHTML来改变文档的始末,当然也可以用它来添加节点。下边大家来看别的一种想文档中添加节点的章程——使用正规的DOM方法。
行使DOM方法修改文档比使用innerHTML要麻烦一些,大家先来看一段示例HTML代码:
<div id=”test” style=”border:1pxsolid”></div>
应用DOM方法添加一个段落节点的思绪如下:
创办一个p节点
穿件一个文书节点,并且增进到p节点中
将p节点添加到div中
实例JavaScript代码
按照地点的思路大家得出如下的JS代码:
<script type=”text/javascript”>
function test(){
        var test =document.getElementById(“test”);
        var para = document.createElement(“P”);
        var text =document.createTextNode(“要添加的文书”);
        para.appendChild(text);
        test.appendChild(para);
}      
</script>
添加节点的功力
下边就是原先的div,由于没有内容,大家只可以看看边框。
添加节点
,点击那些按钮就足以运作方面的代码。可以见见地方的div里多出了大家创制的段落节点。
代码解释
率先,大家用到了var para
=document.createElement(“P”);该语句创建了一个段落节点,不过它并不会及时出现在文档中。要开创其余节点,只要求吗传递给该函数的字符串参数修改部分即可,例如document.createElement(“DIV”)。
var text =
document.createTextNode(“要加上的文书”);一句创建了一个文件节点。
para.appendChild(text);将text作为子结点添加到para那个段落节点上。很简单见到,appendChild的调用语法如下:父节点.appendChild.(子结点)。
终极一句test.appendChild(para);则将段落节点para添加到test这几个div节点上,由于test节点原来就是文档的一有些,这一句会导致文档的翻新,也就是我们会师到段落文字被添加到了div节点里。

摘自 刘海闯的特辑

每个DOM节点都保存了关于该节点的一些信息,大家来探望如何访问那么些音讯。
nodeName、nodeValue和nodeType 同样,依照字面意思:…

组成路径

与CSS中使用逗号组合使用多少个选取符一样,XPath帮衬一种拔取”|”来组成八个途径的语法!

   /root | /root/child {选取根元素root与它下面的子元素child
    //child | //desc {选取所有的child元素与desc元素

XPath 运算符

上面列出了可用在 XPath 表明式中的运算符:

  • | ,计算多个节点集
  • + ,加法
  • – ,减法
  • * ,乘法
  • div ,除法,因为/已经被作为路径符了,所以无法用来作为除法标识
  • mod ,取余
  • = ,等于
  • != ,不等于
  • < ,小于
  • <= ,小于或等于
  • > ,大于
  • >= ,大于或等于
  • or ,或
  • and ,与

咱俩究竟能从中得到怎么着?

既是我们能用相对易懂的Ruby来促成为何还要选择XPath呢?

大部情况下,Ruby是用来编排高层代码的,例如商业逻辑,整合利用组件,描述复杂的领域模型。从中可以看来最好的Ruby代码是用来讲述意图而非用于落到实处。所以用Ruby来做一些低品位或与行使非亲非故的工作(遍历dom树来找指定属性的节点)让人蛋疼。

XPath的里边一个优势是它的快慢:XPath的遍历是由此libxml完结的,而原生代码的进程是卓殊快的。对于我上边举的事例,与Ruby的兑现比较,XPath实际上要慢得多。我猜导致那些情景的缘由是对此<br>标签的下一个元素的搜寻。因为在这些动作中其实是先筛选出了<br>前面的保有与之同级的元素然后才过滤出其中的第三个。

因此XPath快慢与否取决于你的选用办法,可是左手有点儿难。那是一个更加用来让您使用简单的惯用表明式来遍历dom的工具。

赞 收藏 3
评论

XPath 运算符

上边列出了可用在 XPath 表明式中的运算符:

  • | ,统计七个节点集
  • + ,加法
  • – ,减法
  • * ,乘法
  • div ,除法,因为/已经被视作路径符了,所以无法用来作为除法标识
  • mod ,取余
  • = ,等于
  • != ,不等于
  • < ,小于
  • <= ,小于或等于
  • > ,大于
  • >= ,大于或等于
  • or ,或
  • and ,与

XPath 轴

轴可定义某个相对于当下节点的节点集。上边一可用的轴名称与相应的结果:

  • ancestor 拔取当前节点的兼具先辈(父、祖父等)
  • ancestor-or-self
    拔取当前节点的保有先辈(父、祖父等)以及当前节点本身
  • attribute 选用当前节点的享有属性
  • child 选择当前节点的具备子元素。
  • descendant 选取当前节点的有所后代元素(子、孙等)。
  • descendant-or-self
    接纳当前节点的兼具后代元素(子、孙等)以及当前节点本身。
  • following 选择文档中当前节点的扫尾标签之后的具有节点。
  • namespace 接纳当前节点的富有命名空间节点
  • parent 拔取当前节点的父节点。
  • preceding 拔取文档中当前节点的初叶标签此前的装有节点。
  • preceding-sibling 选取当前节点在此之前的拥有同级节点。
  • self 选拔当前节点。

实质上,一个一体化的XPath表明式由”/”与”步”构成的,而步又是由 “轴” 、
“节点测试”和”谓语”构成的.如下:

   step/step/.....  {一个XPath表达式
    {step的构成
    轴名称::节点测试[谓语]

在一般的XPath表明式中,没有谓语即发布没有别的条件限制,而从不轴名称,则默许使用child.如”abc”与”child::abc”是同一的,
上面是有的与行使轴名称等效的简练XPath表明式:

  • child::abc ——————— abc(子元素abc)
  • root/attribute::id ———— root/@id(root的属性id)
  • selft::node() —————— .(自身)
  • parent::node() ————— ..(父节点)
  • child::* ———————— *(子元素)
  • child::text() —————— text()(子文本节点)
  • descendant::tag ———— .//tag (后代tag元素)

XPath还蕴涵一套函数库,如position与last就是函数,一般的函数被用在谓语中,而在XSLT及XQuery中它们则收获了更广泛的使用.

至于小编:杨帅

亚洲必赢官网 1

(微博和讯:@JAVA程序员杨帅)

个人主页 ·
我的小说

亚洲必赢官网 2

XPath 轴

轴可定义某个相对于当下节点的节点集。上边一可用的轴名称与相应的结果:

  • ancestor 接纳当前节点的保有先辈(父、祖父等)
  • ancestor-or-self
    拔取当前节点的享有先辈(父、祖父等)以及当前节点本身
  • attribute 拔取当前节点的持有属性
  • child 选择当前节点的有所子元素。
  • descendant 拔取当前节点的兼具后代元素(子、孙等)。
  • descendant-or-self
    选用当前节点的保有后代元素(子、孙等)以及当前节点本身。
  • following 拔取文档中当前节点的终结标签之后的富有节点。
  • namespace 接纳当前节点的有所命名空间节点
  • parent 选择当前节点的父节点。
  • preceding 采取文档中当前节点的早先标签此前的享有节点。
  • preceding-sibling 拔取当前节点此前的持有同级节点。
  • self 选拔当前节点。

其实,一个整机的XPath表明式由”/”与”步”构成的,而步又是由 “轴” 、
“节点测试”和”谓语”构成的.如下:

   step/step/.....  {一个XPath表达式
    {step的构成
    轴名称::节点测试[谓语]

在形似的XPath表明式中,没有谓语即公布没有任何条件限制,而没有轴名称,则默许使用child.如”abc”与”child::abc”是如出一辙的,
上面是一些与利用轴名称等效的大致XPath表达式:

  • child::abc ——————— abc(子元素abc)
  • root/attribute::id ———— root/@id(root的属性id)
  • selft::node() —————— .(自身)
  • parent::node() ————— ..(父节点)
  • child::* ———————— *(子元素)
  • child::text() —————— text()(子文本节点)
  • descendant::tag ———— .//tag (后代tag元素)

XPath还蕴藏一套函数库,如position与last就是函数,一般的函数被用在谓语中,而在XSLT及XQuery中它们则得到了更常见的使用.

浏览器中的XPath

IE浏览器对XPath的贯彻相比不难.一个XML
DOM对象(及种种节点)都有selectSingleNode与selectNodes方法,传入XPath表明式,selectNodes再次回到匹配的节点列表,而selectSingleNode则只回去列表中首个品种!

    var xmlDom = getXMLDOM();//我们之前写的跨浏览器的XML DOM加载函数
    loadXMLFile(xmlDom,"text.xml");
    var root = xmlDom.selectSingleNode("/*");//返回文档根元素
    root = xmlDom.selectNodes("/*")[0];//同上
    var lastChild = xmlDom.selectSingleNode("/*/*[last()]");

 

Mozilla是基于DOM标准来贯彻对XPath的支撑的。DOM Level 3附加标准DOM Level
3
XPath定义了用于在DOM中计算XPath表明式的接口。遗憾的是,那几个正式要比微软直观的办法复杂得多。

固然如此有众多与XPath相关的靶子,最根本的七个是:XPath伊娃luator和XPathResult。XPath伊娃luator利用方式evaluate()总计XPath表达式。

evaluate()方法有三个参数:XPath表明式、上下文节点、命名空间解释程序和再次来到的结果的花色,同时,在XPathResult中存放结果(寻常为null)。

取名空间解释程序,唯有在XML代码应用了XML命名空间时才是必备的,所以普通留空,置为null。再次回到结果的花色,可以是以下十个常量值之一:

 

  • XPathResult.ANY_TYPE——重返符合XPath表明式类型的数目
  • XPathResult.ANY_UNORDERED_NODE_TYPE——重返匹配节点的节点集合,但各样可能与文档中的节点的一一不匹配
  • XPathResult.BOOLEAN_TYPE——再次来到布尔值
  • XPathResult.FIRST_ORDERED_NODE_TYPE——再次回到只包涵一个节点的节点集合,且那么些节点是在文档中首先个门当户对的节点
  • XPathResult.NUMBER_TYPE——重临数字值
  • XPathResult.ORDERED_NODE_ITERATOR_TYPE——再次来到匹配节点的节点集合,顺序为节点在文档中冒出的次第。那是最常用到的结果类型
  • XPathResult.ORDERED_NODE_SNAPSHOT_TYPE——再次回到节点集合快照,在文档外捕获节点,那样未来对文档的别样改动都不会影响那几个节点列表。节点集合中的节点与它们出现在文档中的顺序一样
  • XPathResult.STRING_TYPE——重回字符串值
  • XPathResult.UNORDERED_NODE_ITERATOR_TYPE——重临匹配节点的节点集合,然则顺序可能不会绳趋尺步节点在文档中出现的顺序排列
  • XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE——重回节点集合快照,在文档外捕获节点,那样以后对文档的任何改动都不会影响这几个节点列表。节点集合中的节点和文档中原来的逐条不自然一样。

上边是使用ORDERED_NODE_ITERATOR_TYPE的例子:

    var xmlDom = getXMLDOM();//我们之前写的跨浏览器的XML DOM加载函数
    loadXMLFile(xmlDom,"text.xml");
    var evaluator = new XPathEvaluator();
    var result =evaluator.evaluate("/root",xmlDom,null,XPathResult.ORDERED_NODE_ITERATOR_TYPE,null);
    var node;
    if (result) {//执行失败会返回null
        while(node=result.iterateNext()) {//这个列表必须使用iterateNext方法遍历
            alert(node.tagName);
        }
    }

 

亚洲必赢官网 ,浏览器中的XPath

IE浏览器对XPath的落到实处相比较简单.一个XML
DOM对象(及种种节点)都有selectSingleNode与selectNodes方法,传入XPath表达式,selectNodes再次来到匹配的节点列表,而selectSingleNode则只回去列表中首先个品类!

   var xmlDom = getXMLDOM();//我们之前写的跨浏览器的XML DOM加载函数
    loadXMLFile(xmlDom,"text.xml");
    var root = xmlDom.selectSingleNode("/*");//返回文档根元素
    root = xmlDom.selectNodes("/*")[0];//同上
    var lastChild = xmlDom.selectSingleNode("/*/*[last()]");

Mozilla是基于DOM标准来落成对XPath的协助的。DOM Level 3附加标准DOM Level
3
XPath定义了用来在DOM中总计XPath表明式的接口。遗憾的是,这一个专业要比微软直观的措施复杂得多。

固然有过多与XPath相关的目标,最首要的三个是:XPath伊娃luator和XPathResult。XPath伊娃luator利用形式evaluate()计算XPath表明式。

evaluate()方法有多少个参数:XPath表达式、上下文节点、命名空间解释程序和重回的结果的种类,同时,在XPathResult中存放结果(平常为null)。

取名空间解释程序,唯有在XML代码应用了XML命名空间时才是不可或缺的,所以寻常留空,置为null。再次来到结果的档次,可以是以下十个常量值之一:

 

  • XPathResult.ANY_TYPE——再次来到符合XPath表明式类型的数量
  • XPathResult.ANY_UNORDERED_NODE_TYPE——重临匹配节点的节点集合,但逐一可能与文档中的节点的逐条不般配
  • XPathResult.BOOLEAN_TYPE——重返布尔值
  • XPathResult.FIRST_ORDERED_NODE_TYPE——重回只包括一个节点的节点集合,且这些节点是在文档中率先个极度的节点
  • XPathResult.NUMBER_TYPE——重返数字值
  • XPathResult.ORDERED_NODE_ITERATOR_TYPE——再次回到匹配节点的节点集合,顺序为节点在文档中冒出的相继。这是最常用到的结果类型
  • XPathResult.ORDERED_NODE_SNAPSHOT_TYPE——再次来到节点集合快照,在文档外捕获节点,那样将来对文档的其余修改都不会潜移默化这一个节点列表。节点集合中的节点与它们出现在文档中的顺序一样
  • XPathResult.STRING_TYPE——再次回到字符串值
  • XPathResult.UNORDERED_NODE_ITERATOR_TYPE——再次回到匹配节点的节点集合,然则顺序可能不会根据节点在文档中出现的顺序排列
  • XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE——重临节点集合快照,在文档外捕获节点,那样未来对文档的其余改动都不会潜移默化这么些节点列表。节点集合中的节点和文档中原来的种种不必然一样。

上面是利用ORDERED_NODE_ITERATOR_TYPE的例子:

   var xmlDom = getXMLDOM();//我们之前写的跨浏览器的XML DOM加载函数
    loadXMLFile(xmlDom,"text.xml");
    var evaluator = new XPathEvaluator();
    var result =evaluator.evaluate("/root",xmlDom,null,XPathResult.ORDERED_NODE_ITERATOR_TYPE,null);
    var node;
    if (result) {//执行失败会返回null
        while(node=result.iterateNext()) {//这个列表必须使用iterateNext方法遍历
            alert(node.tagName);
        }
    }
网站地图xml地图