用jQuery 处理XML--写在前面的话

用jQuery 处理XML-- DOM（文本对象模型）简介

用jQuery 处理XML--浏览器中的XML与JavaScript

用jQuery 处理XML-- jQuery与XML

原文：Processing XML with jQuery

来自IBM Developer Works

DOM（文本对象模型）简介

在正式开始介绍jQuery处理XML前我们来了解一些必备的基础知识。

DOM是HTML或者XML结构的一种展现形式，通过编程对DOM进行修改可以达到修改HTML/XML的目的。这部分使用一段简单的HTML文档并配合几个简单的例子来展示使用JavaScript对DOM上各节点的遍历和操作。

JavaScript中操作DOM

JavaScript中提供了一套完备的方法来获取，遍历，操作DOM。这里不详述，只是通过简单的例子来说明如何对操作。

后面的例子都基于以下HTML片段：

Listing 1. A simple HTML document

<!DOCTYPE html>

<html>

<head>

<title>This is the page Title</title>

</head>

<body class="signed-out">

<div id="header">

<ul id="nav">

<li><a href="/home" class="home">Home</a></li>

<li><a href="/about" class="about">About</a></li>

<li><a href="/auth" class="auth">Sign In</a></li>

</ul>

</div>

<div id="article">

<h1>A Plain DOM</h1>

<h2>An sample <b>HTML</b> document.</h2>

<div id="section"></div>

</div>

</body>

</html>

清单1中，id为header的Div中包含了一些导航链接，为了在JavaScript中取得这个id为header的Div，可以像清单2中的代码这样：

Listing 2. Getting a DOM element by id

<script type="text/javascript">

var article = document.getElementById("article");

</script>

getElementById()是JavaScript中获取DOM元素最快的方法。元素的id属性可以让浏览器直接在众多DOM元素中找到它，因为id是唯一的。但由于当DOM中有重复的id时，浏览器并不会报错，并且微软的IE还把元素的name属性也当id来处理，所以在编写HTML代码时你要注意避免使用重复的id。

另一种获取DOM元素的方法为展示了getElementsByTagName()的使用，用它来获取H1节点。

Listing 3. Getting a set of elements by tag name

<script type="text/javascript">

var headers = document.getElementsByTagName("h1"); // returns array of H1 elements

alert(headers[0].innerHTML); // alerts inner html of the first H1 tag: "A Plain DOM"

</script>

这里注意两点有趣的地方。第一点是getElementsByTagName() 返回的是一个数组（包含所给元素名的所有元素组成的一个数组）。因为本例中只有一个H1元素，所以可以通过访问[0]下标来获取该元素。但这种方法是不保险的。因为页面中可能不存在H1元素，那么妳通过下标[0]就返回不到任何东西，然后浏览器可能会报错。 所以在使用获得的一个元素的属性（或方法时），最好先检查这个元素是否存在并且成功取到了。

第二，妳可能注意到了innerHTML 这个属性。顾名思义，通过它可以访问一个元素的内容，本例中则是H1中的文本。如果H1中还包含了其它元素的话，那么返回的这个文本中也包含这些元素。如清单4所展示的那样。

Listing 4. Using innerHTML to retrieve value with HTML elements

<script type="text/javascript">

var subheaders = document.getElementsByTagName("h2"); // returns array of H1 elements

alert(subheaders[0].innerHTML); // "An sample <b>HTML</b> document."

</script>

除了innerHTML外，浏览器还提供一个只返回元素的文本内容的方法。但这个方法在IE中叫做innerText 然而在其他浏览器中又叫做textContent 。所以为了写出跨浏览器通用的代码，妳可以需要像清单5这样操作。

Listing 5. Using innerText and textContent properties across different browsers

<script type="text/javascript">

var headers = document.getElementsByTagName("h1"); // returns array of H1 elements

var headerText = headers[0].textContent || headers[0].innerText;

</script>

这样，如果textContent 有返回值的话， headerText 变量就获取它，否则获取innerText 返回的值。一个更明智的做法是把这些有浏览器差异的地方都写一个方法来处理，jQuery已经包装了这些方法。

上文提供的HTML代码片段中包含了一个"Sign in"的连接，假设用户已经通过某种方式登陆了，我们想把这个"Sign in" 改掉显示成"Sign out"。在先前的例子中，通过使用innerHTML来得到元素的内容，现在也可以用它来设置元素的内容。清单6展示了这个特性。

Listing 6. Updating the innerHTML value of a DOM node

<script type="text/javascript">

var authElem = document.getElementById("auth"); // returns single element

authElem.innerHTML = "Sign Out"; // Updates element contents

</script>

除了更新已有的节点内容外，还可以创建全新的元素然后附加到已有的DOM元素上去（见清单7）。

Listing 7. Creating and injecting a new DOM node

<script type="text/javascript">

var ulElems = document.getElementsByTagName("ul"); // returns array of UL elements

var ul = ulElems[0]; // get the first element (in this case, the only one)

var li = document.createElement("li"); // create a new list item element

var text = document.createTextNode("List Item Text"); // create a text node

li.appendChild(text); // append text node to li node (still not added to DOM)

ul.appendChild(li); // append new list node to UL, which inserts it into DOM

</script>

正如上面代码所示，妳可以看到getElementById()和getElementsByTagName()经常是通过document来调用，这意味着方法是在document上面执行。妳当然也可以让方法在其他元素上执行，从而缩小找到目标需要的范围。这样的方法调用始终假设妳所想到获取的目标元素是妳所调用方法那个元素的子元素。记住这点因为在后面用jQuery处理XML时也是同样的道理。

）。（关于parentNode 及相关属性将在下面会介绍）

Listing 8. Removing an element from the DOM

<script type="text/javascript">

var firstList = document.getElementsByTagName("ul")[0];

firstList.parentNode.removeChild(firstList);

</script>

现在让我们来进行属性的设置及属性的移除。通过使用setAttribute() 和 getAttribute() 来实现（见清单9）。

Listing 9. Setting and removing an element attribute

<script type="text/javascript">

var firstUL = document.getElementsByTagName("ul")[0];

firstUL.setAttribute("class", "collapsed");

firstUL.getAttribute("class"); // returns "collapsed"

</script>

JavaScript 中遍历DOM元素

除了获取和处理DOM元素外，JavaScript学提供了一套完备的用来遍历DOM节点的方法。在之前的例子里妳已经看到过parentNode 这个方法的使用了。给定一个DOM元素后，妳就可以得到它周围的一些元素。

Listing 10. JavaScript's DOM traversal properties

firstChild //获取第一个子节点

lastChild //获取最后一个子节点

nextSibling //获取下一下兄妹节点

parentNode //获取父节点

previousSibling //获取前一个兄妹节点

更多关于节点属性的信息请移步这里。

DOM节点间的这些相邻关系在HTML中就像清单11所展示的那个样子。

Listing 11. Relationship of related DOM elements

<parent_node>

<previous_sibling/>

<node>

<first_child/>

...

<last_child/>

</node>

<next_sibling/>

</parent_node>

最后我们来考虑一下展示了这些层级关系的树状图，见图1。一个给定的节点比如图中的"NODE"，往上是父节点，处于同一层的包括了它的前一个和后一个兄妹节点。一个节点可以包含一个或多个子节点（其中就包括了第一个子节点firstChild 和最后一个子节点lastChild ）。

Figure 1. Tree representation of adjacent nodes

当我产创建一个用来从给定起点遍历DOM元素的方法时，这些元素间的层级关系就变得非常有用（见清单12的例子）。在处理XML也会用到相似的方法。

Listing 12. JavaScript function for traversing the DOM

<script type="text/javascript">

function traverseDOM(node, fn){

fn(node); // execute passed function on current node

node = node.firstChild; // get node's child

while (node){ // if child exists

traverseDOM(node, fn); // recursively call the passed function on it

node = node.nextSibling; // set node to its next sibling

}

}

// example: adds "visited" attribute set to "true" to every node in DOM

traverseDOM(document, function(curNode){

if (curNode.nodeType==="3"){ // setAttribute() only exists on an ELEMENT_NODE

// add HTML5 friendly attribute (with data- prefix)

curNode.setAttribute("data-visited", "true");

}

});

</script>

到这里，妳应该已经熟悉HTML中遍历和处理各元素了。下一节当中将展示如何将同样的方法应用到XML的处理上。

【译】用jQuery 处理XML-- DOM（文本对象模型）简介的更多相关文章

  1. DOM（文本对象模型）简介

    DOM(文本对象模型)简介 在正式开始介绍jQuery处理XML前我们来了解一些必备的基础知识. DOM是HTML或者XML结构的一种展现形式,通过编程对DOM进行修改可以达到修改HTML/XML的目 ...

  2. xml.dom——文档对象模型API

    文档对象模型,或者“DOM”,是一个跨语言API的World Wide Web Consortium(W3C)来访问和修改XML文档.DOM的实现提供了一个XML文档树结构,或允许客户机代码从头开始建 ...

  3. js文本对象模型【DOM】(十一)

    一.W3C DOM 标准被分为 3 个不同的部分:1.Core DOM - 所有文档类型的标准模型[)Document--> 9;Element -->1;TextNode -->3 ...

  4. 文本对象模型（Document Object Model）

    本文内容: 1. 概述 2. DOM中的节点类型 3. DOM节点的选取 4. 存取元素属性 5.DOM元素的增删 6.小结 ★ 概述 文本对象模型(DOM)是一个能够让程序和脚本动态访问和更新文档内 ...

  5. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  6. Jquery基础之DOM操作

    转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...

  7. XML中文本节点存储任意字符的方法

    XML xml是一种可扩展标签语言, 为众多浏览器支持解析, ajax更是利用xml来完成服务器和客户端之前的通信. xml基本元素为 <label>xxx</label>, ...

  8. jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  9. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

随机推荐

  1. 【javascript】：Highcharts实战

    PS: Highcharts是一款前端图标设计框架,非常绚. 前端JS: var probabilityStatisticsData; var yearTool; var CoordinateX = ...

  2. （python）对象的引用

    对比下列两个例子: 例子1: a=10 b=a a=a+2 print "a=",a,"b=",b 结果:a= 12 b= 10 a+2后,b仍然是10 例子2 ...

  3. 误打误撞写了段能让电脑奔溃的JS代码，但是自己不知道为什么，高手看到可以解答下吗？

    代码如下: <script> for(i=1;j=3*i;i++){ for(;j<=50;){ document.write(j+"<br>") } ...

  4. 转：Xms Xmx PermSize MaxPermSize 区别

    Eclipse崩溃,错误提示:MyEclipse has detected that less than 5% of the 64MB of Perm Gen (Non-heap memory) sp ...

  5. 安装和配置Mantis<项目管理工具>

    说明: 黑色加粗部分为配置文档修改或添加的内容,例如index.cgi意思为修改或添加index.cgi 红色加粗部分为操作控制而非直接输入,例如空格意思为此处需要按下空格键 一.介绍 Apache: ...

  6. 20151013 C# 第一篇 流程控制语句

    20151013 流程控制语句: 1.选择语句 if … else if...else 选择语句 if(布尔表达式){  语句块:} if(布尔表达式){  语句块1:}else{  语句块2:} i ...

  7. 置入式模型inclusion model和显示具现化

    1.置入式模型 链接错误: 大多数非模板程序代码的组织如下:A,类声明在头文件中: B:全局变量和非inline函数在cpp文件中定义 但是,如果模板程序也这样组织,则会出错.原因在于:函数模板的定义 ...

  8. 转 ：meta name的含义：<META http-equiv=Content-Type content="text/html; charset=gb2312">

    meta是什么?meta其实是html语言head区的一个辅助性标签.在几乎所有的网页里,我们都可以看到类似下面这段html代码:<META http-equiv=Content-Type co ...

  9. 【Thinking in Java】Java Callable的使用

    Callable<>和Runable类似,都是用于Java的并发执行. 唯一的区别是,Runable的run方法的返回是void,而Callable的call方法是有返回值的. call方 ...

  10. iOS-详细解读Const

    在过去开发中,几乎每一个人都会定义宏,因为这东西实在是好用,省去了代码量而且还不容易错,而我这篇文中所介绍的const可以完美替带宏定义. 并且苹果也建议大家抛弃宏定义而转投const ,并且swif ...