标签：dom4j 建立 people z-index 改变 pad inpu lan add
<div id="bgchange" style="width: 660px;">
<div class="fontsize_bgcolor_controler">
<div class="a_bgcolor">
<img src="http://pubimage.360doc.com/NewArticle/bgcolor.jpg">
<div class="a_colorlist">
<span class="a_color1" onclick="artStatistics(‘20-11-1‘);">
<img src="http://pubimage.360doc.com/NewArticle/yes.gif"></span>
<span class="a_color2" onclick="artStatistics(‘20-11-2‘);">
<img src="http://pubimage.360doc.com/NewArticle/yes.gif"></span>
<span class="a_color3" onclick="artStatistics(‘20-11-3‘);">
<img src="http://pubimage.360doc.com/NewArticle/yes.gif"></span>
<span class="a_color4" onclick="artStatistics(‘20-11-4‘);">
<img src="http://pubimage.360doc.com/NewArticle/yes.gif"></span>
<span class="a_color5" onclick="artStatistics(‘20-11-5‘);">
<img src="http://pubimage.360doc.com/NewArticle/yes.gif"></span>
<span class="a_color6 cur" onclick="artStatistics(‘20-11-6‘);">
<img src="http://pubimage.360doc.com/NewArticle/yes.gif"></span>
</div>
</div>
<div class="a_fontsize">
<img src="http://pubimage.360doc.com/NewArticle/fontSize.jpg">
<div class="fschange">
<label>
<input type="radio" name="font_Size" id="" value="18" onclick="artStatistics(‘20-10-1‘);">大
</label>
<label>
<input type="radio" name="font_Size" id="" value="16" onclick="artStatistics(‘20-10-2‘);">中
</label>
<label>
<input type="radio" name="font_Size" id="" value="14" onclick="artStatistics(‘20-10-3‘);">小
</label>
</div>
</div>
</div>
<h2 id="titiletext">JSON格式</h2>
<div class="article_data">
<div class="article_data_left">
2013-08-05
<span class="a_username"> <a href="http://www.360doc.com/userhome/8074294" id="savernickname" target="_blank" onclick="artStatistics(‘20-7-1‘);">博弈知识库</a>
</span>
<span id="articleinfo">
<span id="docsource" class="a_from" style="display: none;"></span><span id="360doc_Readnum"> 阅 366265 </span><span id="360docResaveCount"><span onclick="ShowSaverUser();artStatistics(‘20-13‘);" id="360doc_saverNum" style="cursor: pointer;"> 转 <span style="cursor:pointer;" onclick="javascript:ShowSaverUser();">795</span></span>
<span id="360doc_saverUser"><div id="sameArtOuter" style="display:none;position: absolute; height:305px;width:144px;left:0px;margin-top:15px;z-index:100000;"><div id="sameArt" style=" overflow-y: auto; height:300px;overflow-x: hidden; z-index: 100;right:0px;margin-top:-10px;" onclick="event.cancelBubble=true;"></div></div></span>
</span>
</span>
</div>
<div id="resavelayer1" class="bdsharebuttonbox article_data_right bdshare-button-style0-16" data-bd-bind="1529396690970"><div class="zcommond"><a class="p2" href="javascript:void(0);" onclick="SaveArt();artStatistics(‘20-3-1‘);">转藏到我的图书馆</a><div class="s2 f_right" onclick="setTimeout(function(){$(‘.article_data_right .sharelist_new‘).slideToggle(0);},10);"><span onclick="artStatistics(‘20-8-2‘);"></span></div><a class="p1" href="javascript:void(0);" onclick="shareWeixin();artStatistics(‘20-8-5‘);">微信</a> <span class="s1" onclick="setTimeout(function(){$(‘.article_data_right .sharelist_new‘).slideToggle(0);},10);artStatistics(‘20-8-1‘);" onmouseover="this.style.color=‘#0f659c‘" onmouseout="this.style.color=‘‘">分享：</span></div><div class="sharelist_new" id="fenxiangLayer" style="display: none;"> <a class="slbg1" href="javascript:void(0);" data-cmd="qzone" onclick="artStatistics(‘20-8-7‘);">QQ空间</a> <a class="slbg2" href="javascript:void(0);" data-cmd="sqq" onclick="artStatistics(‘20-8-9‘);">QQ好友</a> <a class="slbg3" href="javascript:void(0);" data-cmd="tsina" onclick="artStatistics(‘20-8-11‘);">新浪微博</a><a class="slbg5" href="javascript:void(0);" onclick="showdivemail1();artStatistics(‘20-8-15‘);">推荐给朋友</a> </div><div style="position: absolute;display:none;z-index:1;left:143px;" id="fuzhitishidiv"></div></div>
</div>
<div id="articlecontent" class="article_container" onmousedown="newhighlight = true;" onmouseup="NewHighlight(event);">
<table>
<tbody>
<tr>
<td id="artContent">
<div style="width: 656px; margin: 0; padding: 0; height: 0;"></div>
<div>
<div class="card-summary-content">
<div class="para">JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。</div></div>
<div style="WIDTH: 177px" id="catalog-0" class="text_dir nslog-area log-set-param" data-nslog-type="1016" data-subindex="0" log-set-param="catalogshow">
<p>目录</p>
<dl id="catalog-holder-0" class="holder">
<dd class="catalog-item"><a class="nslog:1274 " href="http://baike.baidu.com/view/136475.htm#1" name="stat_oncg_unsubmit_catalog" catalog="true">基础结构</a></dd>
<dd class="catalog-item"><a class="nslog:1274 " href="http://baike.baidu.com/view/136475.htm#2" name="stat_oncg_unsubmit_catalog" catalog="true">基础示例</a>
<ol class="hide">
<li class="hold-catalog-li"><a href="http://baike.baidu.com/view/136475.htm#2_1" catalog="true">名称 / 值对</a></li>
<li class="hold-catalog-li"><a href="http://baike.baidu.com/view/136475.htm#2_2" catalog="true">表示数组</a></li></ol></dd>
<dd class="catalog-item"><a class="nslog:1274 " href="http://baike.baidu.com/view/136475.htm#3" name="stat_oncg_unsubmit_catalog" catalog="true">格式应用</a>
<ol class="hide">
<li class="hold-catalog-li"><a href="http://baike.baidu.com/view/136475.htm#3_3" catalog="true">赋值给变量</a></li>
<li class="hold-catalog-li"><a href="http://baike.baidu.com/view/136475.htm#3_4" catalog="true">访问数据</a></li>
<li class="hold-catalog-li"><a href="http://baike.baidu.com/view/136475.htm#3_5" catalog="true">修改数据</a></li>
<li class="hold-catalog-li"><a href="http://baike.baidu.com/view/136475.htm#3_6" catalog="true">换回字符串</a></li></ol></dd>
<dd class="catalog-item"><a class="nslog:1274 " href="http://baike.baidu.com/view/136475.htm#4" name="stat_oncg_unsubmit_catalog" catalog="true">具体形式</a></dd>
<dd class="catalog-item"><a class="nslog:1274 " href="http://baike.baidu.com/view/136475.htm#5" name="stat_oncg_unsubmit_catalog" catalog="true">概念比较</a></dd>
<dd class="catalog-item"><a class="nslog:1274 " href="http://baike.baidu.com/view/136475.htm#6" name="stat_oncg_unsubmit_catalog" catalog="true">校验工具</a>
<ol class="hide">
<li class="hold-catalog-li"><a href="http://baike.baidu.com/view/136475.htm#6_7" catalog="true">前言</a></li>
<li class="hold-catalog-li"><a href="http://baike.baidu.com/view/136475.htm#6_8" catalog="true">功能简介</a></li></ol></dd>
<dd class="nslog:1018 catalog-holder catalog-holder0" show-type="show">展开</dd></dl>
<dl style="WIDTH: 102px; LEFT: -1px" id="catalog-holder-2-0" class="holder2 hideholder" tangram_guid="TANGRAM__60">
<dd class="catalog-item"><a class="nslog:1274 " href="http://baike.baidu.com/view/136475.htm#1" name="stat_oncg_unsubmit_catalog" catalog="true">基础结构</a></dd>
<dd class="catalog-item"><a class="nslog:1274 " href="http://baike.baidu.com/view/136475.htm#2" name="stat_oncg_unsubmit_catalog" catalog="true">基础示例</a>
<ol class="hide">
<li class="hold-catalog-li"><a href="http://baike.baidu.com/view/136475.htm#2_1" catalog="true">名称 / 值对</a></li>
<li class="hold-catalog-li"><a href="http://baike.baidu.com/view/136475.htm#2_2" catalog="true">表示数组</a></li></ol></dd>
<dd class="catalog-item"><a class="nslog:1274 " href="http://baike.baidu.com/view/136475.htm#3" name="stat_oncg_unsubmit_catalog" catalog="true">格式应用</a>
<ol class="hide">
<li class="hold-catalog-li"><a href="http://baike.baidu.com/view/136475.htm#3_3" catalog="true">赋值给变量</a></li>
<li class="hold-catalog-li"><a href="http://baike.baidu.com/view/136475.htm#3_4" catalog="true">访问数据</a></li>
<li class="hold-catalog-li"><a href="http://baike.baidu.com/view/136475.htm#3_5" catalog="true">修改数据</a></li>
<li class="hold-catalog-li"><a href="http://baike.baidu.com/view/136475.htm#3_6" catalog="true">换回字符串</a></li></ol></dd>
<dd class="catalog-item"><a class="nslog:1274 " href="http://baike.baidu.com/view/136475.htm#4" name="stat_oncg_unsubmit_catalog" catalog="true">具体形式</a></dd>
<dd class="catalog-item"><a class="nslog:1274 " href="http://baike.baidu.com/view/136475.htm#5" name="stat_oncg_unsubmit_catalog" catalog="true">概念比较</a></dd>
<dd class="catalog-item"><a class="nslog:1274 " href="http://baike.baidu.com/view/136475.htm#6" name="stat_oncg_unsubmit_catalog" catalog="true">校验工具</a>
<ol class="hide">
<li class="hold-catalog-li"><a href="http://baike.baidu.com/view/136475.htm#6_7" catalog="true">前言</a></li>
<li class="hold-catalog-li"><a href="http://baike.baidu.com/view/136475.htm#6_8" catalog="true">功能简介</a></li></ol></dd>
<dd class="nslog:1018 catalog-holder catalog-holder0" show-type="show">展开</dd></dl></div>
<div class="clear"></div>
<div id="lemmaContent-0" class="lemma-main-content rainbowlemma-0-" sizset="0" sizcache07378799448531016="218">
<h2 class="headline-1"><span class="text_edit editable-title" data-edit-id="136475:136475:1"><a class="nslog:1019" href="http://baike.baidu.com/view/136475.htm#" tangram_guid="TANGRAM__11">编辑本段</a></span><a name="1"></a><a name="sub136475_1"></a><span class="headline-content">基础结构</span></h2>
<div class="para">JSON建构有两种结构：<sup tangram_guid="TANGRAM__36">[1]</sup><a name="ref_[1]_136475"></a></div>
<div class="para">json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组2种结构，通过这两种结构可以表示各种复杂的结构</div>
<div class="para">1、对象：对象在js中表示为“{}”扩起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为 对象.key 获取属性值，这个属性值的类型可以是 数字、字符串、数组、对象几种。</div>
<div class="para">2、数组：数组在js中是中括号“[]”扩起来的内容，数据结构为 ["<a href="http://baike.baidu.com/view/29.htm" target="_blank">java</a>","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是 数字、字符串、数组、对象几种。</div>
<div class="para">经过对象、数组2种结构就可以组合成复杂的数据结构了。</div>
<h2 class="headline-1"><span class="text_edit editable-title" data-edit-id="136475:136475:2"><a class="nslog:1019" href="http://baike.baidu.com/view/136475.htm#" tangram_guid="TANGRAM__12">编辑本段</a></span><a name="2"></a><a name="sub136475_2"></a><span class="headline-content">基础示例</span></h2>
<div class="para">简单地说<sup tangram_guid="TANGRAM__37">[1]</sup><a name="ref_[1]_136475"></a>，JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪，但是<a href="http://baike.baidu.com/view/16168.htm" target="_blank">JavaScript</a>很容易解释它，而且 JSON 可以表示比"名称 / 值对"更复杂的结构。例如，可以表示<a href="http://baike.baidu.com/view/209670.htm" target="_blank">数组</a>和复杂的对象，而不仅仅是键和值的简单列表。</div>
<h3 class="headline-2"><a name="2_1"></a><a name="sub136475_2_1"></a><span class="headline-content">名称 / 值对</span></h3>
<div class="para">按照最简单的形式，可以用下面这样的 JSON 表示"名称 / 值对"：</div>
<div class="para">{ "firstName": "Brett" }</div>
<div class="para">这个示例非常基本，而且实际上比等效的纯文本"名称 / 值对"占用更多的空间：</div>
<div class="para">firstName=Brett</div>
<div class="para">但是，当将多个"名称 / 值对"串在一起时，JSON 就会体现出它的价值了。首先，可以创建包含多个"名称 / 值对"的 记录，比如：</div>
<div class="para">{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }</div>
<div class="para">从语法方面来看，这与"名称 / 值对"相比并没有很大的优势，但是在这种情况下 JSON 更容易使用，而且可读性更好。例如，它明确地表示以上三个值都是同一记录的一部分；花括号使这些值有了某种联系。</div>
<h3 class="headline-2"><a name="2_2"></a><a name="sub136475_2_2"></a><span class="headline-content">表示数组</span></h3>
<div class="para">当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性。例如，假设您希望表示一个人名列表。在<a href="http://baike.baidu.com/view/63.htm" target="_blank">XML</a>中，需要许多开始标记和结束标记；如果使用典型的名称 / 值对（就像在本系列前面文章中看到的那种名称 / 值对），那么必须建立一种专有的数据格式，或者将键名称修改为 person1-firstName这样的形式。</div>
<div class="para">如果使用 JSON，就只需将多个带花括号的记录分组在一起：</div>
<div class="para">{ "people": [</div>
<div class="para">{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },</div>
<div class="para">{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb"},</div>
<div class="para">{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }</div>
<div class="para">]}</div>
<div class="para">这不难理解。在这个示例中，只有一个名为 people的<a href="http://baike.baidu.com/view/296689.htm" target="_blank">变量</a>，值是包含三个条目的<a href="http://baike.baidu.com/view/209670.htm" target="_blank">数组</a>，每个条目是一个人的记录，其中包含名、姓和<a href="http://baike.baidu.com/view/126647.htm" target="_blank">电子邮件地址</a>。上面的示例演示如何用括号将记录组合成一个值。当然，可以使用相同的语法表示多个值（每个值包含多个记录）：</div>
<div class="para">{ "programmers": [</div>
<div class="para">{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },</div>
<div class="para">{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb" },</div>
<div class="para">{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }</div>
<div class="para">],</div>
<div class="para">"authors": [</div>
<div class="para">{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },</div>
<div class="para">{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },</div>
<div class="para">{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }</div>
<div class="para">],</div>
<div class="para">"musicians": [</div>
<div class="para">{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },</div>
<div class="para">{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }</div>
<div class="para">] }</div>
<div class="para">这里最值得注意的是，能够表示多个值，每个值进而包含多个值。但是还应该注意，在不同的主条目（programmers、authors 和 musicians）之间，记录中实际的名称 / 值对可以不一样。JSON 是完全动态的，允许在 JSON 结构的中间改变表示数据的方式。</div>
<div class="para">在处理 JSON 格式的数据时，没有需要遵守的预定义的约束。所以，在同样的数据结构中，可以改变表示数据的方式，甚至可以以不同方式表示同一事物。</div>
<h2 class="headline-1"><span class="text_edit editable-title" data-edit-id="136475:136475:3"><a class="nslog:1019" href="http://baike.baidu.com/view/136475.htm#" tangram_guid="TANGRAM__13">编辑本段</a></span><a name="3"></a><a name="sub136475_3"></a><span class="headline-content">格式应用</span></h2>
<div class="para">掌握了 JSON 格式之后，在 JavaScript 中使用它就很简单了。JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。</div>
<h3 class="headline-2"><a name="3_3"></a><a name="sub136475_3_3"></a><span class="headline-content">赋值给变量</span></h3>
<div class="para">例如，可以创建一个新的 JavaScript 变量，然后将 JSON 格式的数据字符串直接赋值给它：</div>
<div class="para"><sup tangram_guid="TANGRAM__38">[2]</sup><a name="ref_[2]_136475"></a> var people = { "programmers": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },</div>
<div class="para">{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb" },</div>
<div class="para">{ "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }</div>
<div class="para">],</div>
<div class="para">"authors": [</div>
<div class="para">{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },</div>
<div class="para">{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },</div>
<div class="para">{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }</div>
<div class="para">],</div>
<div class="para">"musicians": [</div>
<div class="para">{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },</div>
<div class="para">{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }</div>
<div class="para">] }</div>
<div class="para">这非常简单；现在 people包含前面看到的 JSON 格式的数据。但是，这还不够，因为访问数据的方式似乎还不明显。</div>
<h3 class="headline-2"><a name="3_4"></a><a name="sub136475_3_4"></a><span class="headline-content">访问数据</span></h3>
<div class="para" sizset="0" sizcache07378799448531016="218">尽管看起来不明显，但是上面的长字符串实际上只是一个<a href="http://baike.baidu.com/view/209670.htm" target="_blank">数组</a>；将这个数组放进 JavaScript<a href="http://baike.baidu.com/view/296689.htm" target="_blank">变量</a>之后，就可以很轻松地访问它。实际上，只需用点号表示法来表示<a href="http://baike.baidu.com/view/209670.htm" target="_blank">数组</a>元素。所以，要想访问 programmers 列表的第一个条目的姓氏，只需在 JavaScript 中使用下面这样的代码：</div>
<div class="para">people.programmers[0].lastName;</div>
<div class="para">注意，<a href="http://baike.baidu.com/view/209670.htm" target="_blank">数组</a>索引是从零开始的。所以，这行代码首先访问 people<a href="http://baike.baidu.com/view/296689.htm" target="_blank">变量</a>中的数据；然后移动到称为 programmers的条目，再移动到第一个记录（[0]）；最后，访问 lastName键的值。结果是字符串值 “McLaughlin”。</div>
<div class="para">下面是使用同一<a href="http://baike.baidu.com/view/296689.htm" target="_blank">变量</a>的几个示例。</div>
<div class="para">people.authors[1].genre // Value is "fantasy"</div>
<div class="para">people.musicians[3].lastName // Undefined. This refers to the fourth entry, and there isn‘t one</div>
<div class="para">people.programmers[2].firstName // Value is "Elliotte"</div>
<div class="para">利用这样的语法，可以处理任何 JSON 格式的数据，而不需要使用任何额外的 JavaScript 工具包或 API。</div>
<h3 class="headline-2"><a name="3_5"></a><a name="sub136475_3_5"></a><span class="headline-content">修改数据</span></h3>
<div class="para">正如可以用点号和方括号访问数据，也可以按照同样的方式轻松地修改数据：</div>
<div class="para">people.musicians[1].lastName = "Rachmaninov";</div>
<div class="para">在将字符串转换为 JavaScript 对象之后，就可以像这样修改<a href="http://baike.baidu.com/view/296689.htm" target="_blank">变量</a>中的数据。</div>
<h3 class="headline-2"><a name="3_6"></a><a name="sub136475_3_6"></a><span class="headline-content">换回字符串</span></h3>
<div class="para">当然，如果不能轻松地将对象转换回本文提到的文本格式，那么所有<a href="http://baike.baidu.com/view/702991.htm" target="_blank">数据修改</a>都没有太大的价值。在 JavaScript 中这种转换也很简单：</div>
<div class="para">String newJSONtext = people.toJSONString();</div>
<div class="para">这样就行了！现在就获得了一个可以在任何地方使用的<a href="http://baike.baidu.com/view/300107.htm" target="_blank">文本</a>字符串，例如，可以将它用作 Ajax 应用程序中的请求字符串。</div>
<div class="para">更重要的是，可以将 任何JavaScript 对象转换为 JSON 文本。并非只能处理原来用 JSON 字符串赋值的<a href="http://baike.baidu.com/view/296689.htm" target="_blank">变量</a>。为了对名为 myObject的对象进行转换，只需执行相同形式的命令：</div>
<div class="para">String myObjectInJSON = myObject.toJSONString();</div>
<div class="para">这就是 JSON 与本系列讨论的其他数据格式之间最大的差异。如果使用 JSON，只需调用一个简单的函数，就可以获得经过格式化的数据，可以直接使用了。对于其他数据格式，需要在<a href="http://baike.baidu.com/view/3364695.htm" target="_blank">原始数据</a>和格式化数据之间进行转换。即使使用 Document Object Model 这样的 API（提供了将自己的数据结构转换为文本的函数），也需要学习这个 API 并使用 API 的对象，而不是使用原生的 JavaScript 对象和语法。</div>
<div class="para">最终结论是，如果要处理大量 JavaScript 对象，那么 JSON 几乎肯定是一个好选择，这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。</div>
<div class="para">
<div class="para"><b>和XML的比较</b></div>
<div class="para">◆<b>可读性</b></div>
<div class="para">JSON和XML的可读性可谓不相上下，一边是简易的语法，一边是规范的标签形式，很难分出胜负。</div>
<div class="para">◆<b>可扩展性</b></div>
<div class="para">XML天生有很好的扩展性，JSON当然也有，没有什么是XML能扩展，而JSON却不能扩展的。不过JSON在Javascript主场作战，可以存储Javascript复合对象，有着xml不可比拟的优势。</div>
<div class="para">◆<b>编码难度</b></div>
<div class="para">XML有丰富的<a href="http://baike.baidu.com/view/3526570.htm" target="_blank">编码工具</a>，比如Dom4j、JDom等，JSON也有提供的工具。无工具的情况下，相信熟练的开发人员一样能很快的写出想要的xml文档和JSON<a href="http://baike.baidu.com/view/263416.htm" target="_blank">字符</a>串，不过，xml文档要多很多结构上的字符。</div>
<div class="para">◆<b>解码难度</b></div>
<div class="para">XML的解析方式有两种：</div>
<div class="para">一是通过文档模型解析，也就是通过父标签索引出一组标记。例如：xmlData.getElementsByTagName("tagName")，但是这样是要在预先知道文档结构的情况下使用，无法进行通用的封装。</div>
<div class="para">另外一种方法是遍历节点（document 以及 childNodes）。这个可以通过<a href="http://baike.baidu.com/view/96473.htm" target="_blank">递归</a>来实现，不过解析出来的数据仍旧是形式各异，往往也不能满足预先的要求。</div>
<div class="para">凡是这样可扩展的结构数据解析起来一定都很困难。</div>
<div class="para">JSON也同样如此。如果预先知道JSON结构的情况下，使用JSON进行数据传递简直是太美妙了，可以写出很实用美观可读性强的代码。如果你是纯粹的前台开发人员，一定会非常喜欢JSON。但是如果你是一个应用开发人员，就不是那么喜欢了，毕竟xml才是真正的结构化<a href="http://baike.baidu.com/view/329009.htm" target="_blank">标记语言</a>，用于进行数据传递。</div>
<div class="para">而如果不知道JSON的结构而去解析JSON的话，那简直是噩梦。费时费力不说，代码也会变得冗余拖沓，得到的结果也不尽人意。但是这样也不影响众多前台开发人员选择JSON。因为json.js中的toJSONString()就可以看到JSON的字符串结构。当然不是使用这个字符串，这样仍旧是噩梦。常用JSON的人看到这个字符串之后，就对JSON的结构很明了了，就更容易的操作JSON。</div>
<div class="para">以上是在Javascript中仅对于数据传递的xml与JSON的解析。在Javascript地盘内，JSON毕竟是主场作战，其优势当然要远远优越于xml。如果JSON中存储Javascript复合对象，而且不知道其结构的话，我相信很多程序员也一样是哭着解析JSON的。</div>
<div class="para">◆<b>实例比较</b></div>
<div class="para">XML和JSON都使用<a href="http://baike.baidu.com/view/551681.htm" target="_blank">结构化方法</a>来标记数据，下面来做一个简单的比较。</div>
<div class="para">用XML表示<a href="http://baike.baidu.com/view/61891.htm" target="_blank">中国</a>部分省市数据如下：</div>
<div class="para"><?xml version="1.0" encoding="utf-8"?></div>
<div class="para"><country></div>
<div class="para"><name>中国</name></div>
<div class="para"><province></div>
<div class="para"><name>黑龙江</name></div>
<div class="para"><cities></div>
<div class="para"><city>哈尔滨</city></div>
<div class="para"><city>大庆</city></div>
<div class="para"></cities></div>
<div class="para"></province></div>
<div class="para"><province></div>
<div class="para"><name>广东</name></div>
<div class="para"><cities></div>
<div class="para"><city>广州</city></div>
<div class="para"><city>深圳</city></div>
<div class="para"><city>珠海</city></div>
<div class="para"></cities></div>
<div class="para"></province></div>
<div class="para"><province></div>
<div class="para"><name>台湾</name></div>
<div class="para"><cities></div>
<div class="para"><city>台北</city></div>
<div class="para"><city>高雄</city></div>
<div class="para"></cities></div>
<div class="para"></province></div>
<div class="para"><province></div>
<div class="para"><name>新疆</name></div>
<div class="para"><cities></div>
<div class="para"><city>乌鲁木齐</city></div>
<div class="para"></cities></div>
<div class="para"></province></div>
<div class="para"></country></div>
<div class="para">用JSON表示如下：</div>
<div class="para">{</div>
<div class="para">"name":"中国",</div>
<div class="para">"province":[</div>
<div class="para">{</div>
<div class="para">"name":"黑龙江",</div>
<div class="para">"cities":{</div>
<div class="para">"city":["哈尔滨","大庆"]</div>
<div class="para">}</div>
<div class="para">},</div>
<div class="para">{</div>
<div class="para">"name":"广东",</div>
<div class="para">"cities":{</div>
<div class="para">"city":["广州","深圳","珠海"]</div>
<div class="para">}</div>
<div class="para">},</div>
<div class="para">{</div>
<div class="para">"name":"台湾",</div>
<div class="para">"cities":{</div>
<div class="para">"city":["台北","高雄"]</div>
<div class="para">}</div>
<div class="para">},</div>
<div class="para">{</div>
<div class="para">"name":"新疆",</div>
<div class="para">"cities":{</div>
<div class="para">"city":["乌鲁木齐"]</div>
<div class="para">}</div>
<div class="para">}</div>
<div class="para">]</div>
<div class="para">}</div>
<div class="para">编码的可读性，xml有明显的优势，毕竟人类的语言更贴近这样的说明结构。json读起来更像一个<a href="http://baike.baidu.com/view/702806.htm" target="_blank">数据块</a>，读起来就比较费解了。不过，我们读起来费解的语言，恰恰是适合机器阅读，所以通过json的索引.province[0].name就能够读取“黑龙江”这个值。</div>
<div class="para">编码的手写难度来说，xml还是舒服一些，好读当然就好写。不过写出来的<a href="http://baike.baidu.com/view/263416.htm" target="_blank">字符</a>JSON就明显少很多。去掉空白制表以及换行的话，JSON就是密密麻麻的有用数据，而xml却包含很多重复的标记<a href="http://baike.baidu.com/view/263416.htm" target="_blank">字符</a>。</div></div></div></div>
</td>
<script>
var html = document.getElementById("artContent").innerHTML;
document.getElementById("artContent").innerHTML = html;
</script>
</tr>
</tbody>
</table>
<div id="viewerPlaceHolder" style="width: 717px; height: 700px; display: none; margin: 0 auto;">
</div>
</div>
<table>
<tbody>
<tr>
<td>
<ul></ul>
</td>
</tr>
</tbody>
</table>
<div></div>
<span></span>
<a></a>
<p style="margin: 0; padding: 0;"></p>
<p class="clearboth"></p>
<div id="divreward" style="display: none; width: 660px;"></div>
<div class="bdsharebuttonbox bottombtn bdshare-button-style0-16" style="margin-top: 33px;" data-bd-bind="1529396690970">
<div class="zcommond" style="overflow: visible;">
<a href="javascript:void(0);" class="btn_collect" onclick="SaveArt();artStatistics(‘20-3-2‘);">转藏到我的图书馆</a>
<a id="flowimg3" href="javascript:void(0);" class="btn_good" onclick="Showflowerlayer(‘sendedLayer1‘);">献花（<span id="articleflowernum">0</span>）
<span id="flowernumadd" style="display: none;">+1</span>
</a>
<span class="span1 f_left" onclick="setTimeout(function(){$(‘.bottombtn .sharelist_new‘).slideToggle(0);},10);artStatistics(‘20-8-3‘);" onmouseover="this.style.color=‘#0f659c‘" onmouseout="this.style.color=‘‘">分享：</span>
<a class="sharewx f_left" href="javascript:void(0);" onclick="shareWeixin();artStatistics(‘20-8-6‘);">微信</a>
<div class="s2 f_left" onclick="setTimeout(function(){$(‘.bottombtn .sharelist_new‘).slideToggle(0);},10);artStatistics(‘20-8-4‘);"><span></span></div>
</div>
<div class="sharelist_new" id="fenxiangLayer2" style="display: none;">
<a class="slbg1" href="javascript:void(0);" data-cmd="qzone" onclick="artStatistics(‘20-8-8‘);">QQ空间</a>
<a class="slbg2" href="javascript:void(0);" data-cmd="sqq" onclick="artStatistics(‘20-8-10‘);">QQ好友</a>
<a class="slbg3" href="javascript:void(0);" data-cmd="tsina" onclick="artStatistics(‘20-8-12‘);">新浪微博</a>
<a class="slbg5" href="javascript:void(0);" onclick="showdivemail1();artStatistics(‘20-8-16‘);">推荐给朋友</a>
</div>
</div>
<div class="bottom_controler">
<p class="bottom_cleft">
来自：
<span class="a_username" style="width: auto;">
<a href="http://www.360doc.com/userhome/8074294" id="savernickname2" target="_blank" onclick="artStatistics(‘20-7-2‘);">博弈知识库</a>
</span>
>
<span id="cname" class="a_from"><a href="http://www.360doc.com/userhome.aspx?userid=8074294&cid=58" target="_blank" onclick="artStatistics("20-6");">《技术科普》</a></span>
</p>
<div class="bottom_cright">
<a href=" https://www.baidu.com/s?wd=json+firstname+lastname&tn=SE_hldp01010_6r0gix1f" target="_blank" class="a1" onclick="artStatistics(‘20-19‘);">以文找文</a>
|
<a href="javascript:void(0);" class="a2" onclick="showAlertLayer1();artStatistics(‘20-18‘);">举报</a>
</div>
</div>
<div class="prev_next">
<p id="lastart" class="p1" style="display: block;"> 上一篇：<a onclick="artStatistics("20-9-5");" href="http://www.360doc.com/content/13/0805/14/8074294_304898338.shtml" target="_blank">4种无刷新页面的技术</a></p>
<p id="nextart" class="p2" style="display: block;"> 下一篇：<a onclick="artStatistics("20-9-6");" href="http://www.360doc.com/content/13/0807/10/8074294_305311374.shtml" target="_blank">js中join函数的使用方法</a></p>
</div>
</div>
标签：dom4j 建立 people z-index 改变 pad inpu lan add
原文地址：https://www.cnblogs.com/bdqczhl/p/9199322.html
