使用 E4X 處理 XML

  • 版本網址代稱: E4X/使用_E4X_處理_XML
  • 版本標題: 使用 E4X 處理 XML
  • 版本 ID: 272796
  • 建立日期:
  • 建立者: happysadman
  • Is current revision?
  • 回應 30 words added, 99 words removed

版本內容

{{ Js_minversion_header("1") }}

使用 E4X 處理 XML

JavaScript 在 1.6 版本中首次引入,E4X 引入原生的 XML 物件以供 JavaScript 語言使用,並新增用來在 JavaScript 的代碼中嵌入照字面表達的 XML 文件的語法。

E4X 的完整定義可以在 Ecma-357 規範 中找到。本章提供實踐中的語言概要;但這並不是全面的參考資料。

相容性的問題

在主要的瀏覽器支援 <script> 元素以前,對於嵌入到頁面裡的 JavaScript 存有一種常見的做法,就是使用 HTML 的註解標籤將其包夾,避免瀏覽器直接把 <script> 裡的 JavaScript 代碼顯示在使用者眼前。如今已無須這麼做,不過仍殘存在部分遺留下來的代碼中。為了向後相容的需要,E4X 預設會忽略註解和 CDATA 區段。你可以給你的 <script> 標籤加上 e4x=1 參數以解除這項限制︰

<script type="text/javascript;e4x=1">
...
</script>

XML 物件的建立

E4X 提供兩種建立 XML 物件的方式。第一種是傳入字串給 XML 建構子︰

 var languages = new XML('<languages type="dynamic"><lang>JavaScript</lang><lang>Python</lang></languages>');

第二種是直接在你的 Script 中嵌入 XML︰

 var languages = <languages type="dynamic">
   <lang>JavaScript</lang>
   <lang>Python</lang>
 </languages>;

在這兩種情況裡,產生都會是 E4X XML 物件,他提供了方便的語法用以存取並更新其內夾藏著的資料。

XML 物件在外觀上和行為上都和普通的 JavaScript 物件很類似,但有兩件事並不相同。E4X 引入的新語法只能用在 E4X XML 物件上。雖然新語法被設計成對 JavaScript 設計者而言較熟悉的形式,但 E4X 並不提供從 XML 到原生 JavaScript 物件的完整對應;只是看起來很像而已。

可以把變數加入到 XML 的字面中用來建立元素的名稱(或是內容)。

var h = 'html';
var text = "Here's some text";
var doc = <{h}><body>{text}</body></{h}>;
alert(doc.toXMLString());
// 產生的是
<html>
  <body>Here's some text</body>
</html>

屬性的運用

當你需要動態的建立標記的時候,XML 字面語法明顯更勝 XML 建構子。使用 E4X 可輕易的在標記中嵌入動態值。只需使用花括弧 ({}) 包夾要建立的屬性值,並省略一般會加上的引號標記,變數和表達式即可用於建立屬性值,如同下例所示︰

 var a = 2;
 var b = <foo bar={a}>"hi"</foo>;

開始執行時,變數的值會被求出,並自動在適當的位置加上引號。前面的例子產生的 XML 物件看起來就像這樣︰<foo bar="2">"hi"</foo>

在屬性的替換方面,雙引號會被跳脫成 &quot;,單引號則按平常方式處理。

var b = 'He said "Don\'t go there."';
var el = <foo a={b}/>;
alert(el.toXMLString());
// 產生︰<foo a="He said &quot;Don't go there.&quot;"/>

小於和 & 符號也會被跳脫成各自的等價實體。由於大於符號不會被跳脫,因此如果包含了 CDATA 結束序列 (]]>),就有可能產生 XML 錯誤。

通常不會直接在字面(或變數)的屬性內容之中作修改(例如,bar="a{var1}{var2}")。如果有必須使用 JavaScript 表達式計算變數來替代的內容的話(例如,bar={'a'+var1+var2}),在元素字面之前先定義新的變數,在變數中包含完整的修改內容,然後在字面中含入這個變數,或在字面之後取回屬性並將其修改(見下)。

可如同屬性值一般的修改屬性的名稱︰

var a = 'att';
var b = <b {a}='value'/>;
alert(b);
// Gives:
<b att="value"/>

…但之後就不能修改表達式(例如,<b {a}>)。

執行上面的例子之後,參考 XML 物件的語言變數與 XML 文件中的 <languages> 結點一致。這個結點只有一個屬性︰type,這個屬性可用各種方式來存取並更新︰

 alert(languages.@type); // 警報 "dynamic"
 languages.@type = "agile";
 alert(languages.@type); // 警報 "agile"
 alert(languages.toString());
 /* 警報:
   <languages type="agile"><lang>JavaScript</lang><lang>Python</lang></languages>
 */

注意,如果想要把取回的屬性與其他的字串作比較,就有必要先把屬性作轉換,即使屬性有可能會在其他地方被轉換成字串(例如插入到文字框中)。

if (languages.@type.toString() === 'agile') {
 ...
}

XML 物件的運用

XML 物件提供一系列的方法用來查閱並更新其中的內容。這類物件亦支援 JavaScript 的點 (.) 和 [] 符號,但不是用來存取物件的屬性,E4X 覆蓋了這些運算子,改用來存取元素的子結點︰

var person = <person>
  <name>Bob Smith</name>
  <likes>
    <os>Linux</os>
    <browser>Firefox</browser>
    <language>JavaScript</language>
    <language>Python</language>
  </likes>
</person>;

alert(person.name); // Bob Smith
alert(person['name']); // Bob Smith
alert(person.likes.browser); // Firefox
alert(person['likes'].browser); // Firefox

如果你使用多於一個以上的元素來存取的話,你會得到 XMLList

alert(person.likes.language.length()); // 2

和 DOM 一樣,* 可以用來存取所有的子結點︰

alert(person.likes.*.length()); // 4

. 運算子會直接存取指定結點的子結點,.. 運算子則會存取所有的子結點,不論嵌入的有多深︰

alert(person..*.length()); // 11

length() 方法在此返回 11,因為元素結點和文字結點兩者都被包含在 XMLList 的結果中。

用來表示 XML 元素的物件提供一系列實用的方法,部分方法的解說見下︰TODO: Add all of the methods to the JavaScript reference, link from here

alert(person.name.text()) // Bob Smith

var xml = person.name.toXMLString(); // 內含 XML 的字串

var personCopy = person.copy(); // XML 物件的深層複製

var child = person.child(1); // 第二個子結點;目前是 <likes> 元素

XMLLists 的運用

除了 XML 物件以外,E4X 也引入了 XMLList 物件。XMLList 是用來表示附有編號的 XML 物件的集合;例如,元素的列表。接續上面的例子,我們可以在頁面上存取 XMLList<lang> 元素如下︰

 var langs = languages.lang;

XMLList 提供 length() 方法,可用來查出內含元素的數目︰

 alert(languages.lang.length());

注意,有別於 JavaScript 陣列的 length 屬性,這個 length 是方法,不是屬性,而且必須使用 length() 來呼叫。

我們可以迭代所有相配的元素,就像這樣︰

 for (var i = 0; i < languages.lang.length(); i++) {
     alert(languages.lang[i].toString());
 }

在此我們使用同一個語法存取陣列中的已編號項。雖然這部分很類似普通的陣列,但 XMLList 並不支援 Array 的方法,如 forEach,且陣列的通用功能,如 Array.forEach() 也不相容於 XMLList 物件。

我們也可以使用在 JavaScript 1.6 中所引入的 for each...in 語法,他已支援 E4X 的部分︰

 for each (var lang in languages.lang) {
     alert(lang);
 }

for each...in 也可以用在普通的 JavaScript 物件,迭代出內含在物件中的值(不是鍵)。如同 for...in非常不建議 和陣列一起使用。

可以使用下面的 XML 字面語法來建立 XMLList,而無須建立格式正確的 XML 文件︰

 var xmllist = <>
   <lang>JavaScript</lang>
   <lang>Python</lang>
 </>;

+= 運算子可用來把新的元素附加到文件中的 XMLList

 languages.lang += <lang>Ruby</lang>;

注意,有別於由普通的 DOM 方法所返回的結點列表,XMLList 只是靜態的,而且不會自動更新以反映在 DOM 中的改變。如果你在既有的 XML 物件底下建立 XMLList 作為子集,XMLList 並不會反映 XML 物件的改變;你需要重新建立 XMLList 以取得最近的更新︰

 var languages = <languages>
   <lang>JavaScript</lang>
   <lang>Python</lang>
 </languages>;
 
 var lang = languages.lang;
 alert(lang.length()); // 警報 2
 
 languages.lang += <lang>Ruby</lang>;
 alert(lang.length()); // 仍舊警報 2
 
 lang = languages.lang; // 重新建立 XMLList
 alert(lang.length()); // 警報 3

搜尋和過濾

E4X 提供特殊的運算子用來在通過指定條件的文件內部選取結點。這種過濾動作是由括弧裡面的表達式所指定的︰

var html = <html>
  <p id="p1">First paragraph</p>
  <p id="p2">Second paragraph</p>
</html>;

alert(html.p.(@id == "p1")); // 警報 "First paragraph"

在表達式前面比對路徑的結點(在本例中即 p 元素)會在表達式求值之前先加上作用域的限縮。就如同已經用 with 語法 指定了一樣。

因此,過濾器也可以依據在目前元素中內含的單一結點的值來執行︰

var people = <people>
  <person>
    <name>Bob</name>
    <age>32</age>
  </person>
  <person>
    <name>Joe</name>
    <age>46</age>
  </person>
</people>;

alert(people.person.(name == "Joe").age); // 警報 46

也可以使用 JavaScript 函數當作過濾器的表達式︰

function over40(i) {
    return i > 40;
}

alert(people.person.(over40(parseInt(age))).name); // 警報 Joe

命名空間的處理

E4X 也全面考慮到命名空間。任何代表結點或屬性的 XML 物件都提供了可返回 QName 物件的 name() 方法,使加上命名空間的元素的查詢更為容易。

預設

default xml namespace = "http://www.w3.org/1999/xhtml";
// 目前還沒有必要在 HTML 標記裡指定命名空間
var xhtml = <html><head><title></title></head><body>
            <p>text</p></body></html>;
alert(xhtml.head); // 目前還沒有必要在此處的子元素中指定命名空間

非預設

var xhtml = <html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Embedded SVG demo</title>
	</head>
	<body>
		<h1>Embedded SVG demo</h1>
		<svg xmlns="http://www.w3.org/2000/svg" 
			viewBox="0 0 100 100">
			<circle cx="50"
				cy="50"
				r="20"
				stroke="orange"
				stroke-width="2px"
				fill="yellow" />
		</svg>
	</body>
</html>;

alert(xhtml.name().localName); // 警報 "html"
alert(xhtml.name().uri); // 警報 "http://www.w3.org/1999/xhtml"

若要存取非預設命名空間內部的元素,首先建立 Namespace 物件把特定的命名空間的 URI 加以封裝︰

var svgns = new Namespace('http://www.w3.org/2000/svg');

目前可以在 E4X 中使用 namespace::localName 代替一般的元素指定子來作查詢︰

var svg = xhtml..svgns::svg;
alert(svg); // 顯示文件中的 <svg> 部分

參閱

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Processing_XML_with_E4X", "fr": "fr/Guide_JavaScript_1.5/Traitement_de_XML_avec_E4X", "ja": "ja/Core_JavaScript_1.5_Guide/Processing_XML_with_E4X" } ) }}

版本來源

<p>{{ Js_minversion_header("1") }}</p>
<h2 name="使用_E4X_處理_XML">使用 E4X 處理 XML</h2>
<p>JavaScript 在 1.6 版本中首次引入,<strong><a class="internal" href="/zh_tw/E4X" title="zh tw/E4X">E4X</a></strong> 引入原生的 XML 物件以供 JavaScript 語言使用,並新增用來在 JavaScript 的代碼中嵌入照字面表達的 XML 文件的語法。</p>
<p>E4X 的完整定義可以在 <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-357.htm">Ecma-357 規範</a> 中找到。本章提供實踐中的語言概要;但這並不是全面的參考資料。</p>
<h3 name="相容性的問題">相容性的問題</h3>
<p>在主要的瀏覽器支援 <code>&lt;script&gt;</code> 元素以前,對於嵌入到頁面裡的 JavaScript 存有一種常見的做法,就是使用 HTML 的註解標籤將其包夾,避免瀏覽器直接把 <code>&lt;script&gt;</code> 裡的 JavaScript 代碼顯示在使用者眼前。如今已無須這麼做,不過仍殘存在部分遺留下來的代碼中。為了向後相容的需要,E4X 預設會忽略註解和 CDATA 區段。你可以給你的 <code>&lt;script&gt;</code> 標籤加上 <code>e4x=1</code> 參數以解除這項限制︰</p>
<pre>&lt;script type="text/javascript;e4x=1"&gt;
...
&lt;/script&gt;
</pre><h3 name="XML_物件的建立">XML 物件的建立</h3>
<p>E4X 提供兩種建立 XML 物件的方式。第一種是傳入字串給 <code>XML</code> 建構子︰</p>
<pre class="eval"> var languages = new XML('&lt;languages type="dynamic"&gt;&lt;lang&gt;JavaScript&lt;/lang&gt;&lt;lang&gt;Python&lt;/lang&gt;&lt;/languages&gt;');
</pre>
<p>第二種是直接在你的 Script 中嵌入 XML︰</p>
<pre class="eval"> var languages = &lt;languages type="dynamic"&gt;
   &lt;lang&gt;JavaScript&lt;/lang&gt;
   &lt;lang&gt;Python&lt;/lang&gt;
 &lt;/languages&gt;;
</pre>
<p>在這兩種情況裡,產生都會是 E4X <code>XML</code> 物件,他提供了方便的語法用以存取並更新其內夾藏著的資料。</p>
<p>XML 物件在外觀上和行為上都和普通的 JavaScript 物件很類似,但有兩件事並不相同。E4X 引入的新語法只能用在 E4X XML 物件上。雖然新語法被設計成對 JavaScript 設計者而言較熟悉的形式,但 E4X 並不提供從 XML 到原生 JavaScript 物件的完整對應;只是看起來很像而已。</p>
<p>可以把變數加入到 XML 的字面中用來建立元素的名稱(或是內容)。</p>
<pre>var h = 'html';
var text = "Here's some text";
var doc = &lt;{h}&gt;&lt;body&gt;{text}&lt;/body&gt;&lt;/{h}&gt;;
alert(doc.toXMLString());
// 產生的是
&lt;html&gt;
  &lt;body&gt;Here's some text&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="屬性的運用">屬性的運用</h3>
<p>當你需要動態的建立標記的時候,XML 字面語法明顯更勝 <code>XML</code> 建構子。使用 E4X 可輕易的在標記中嵌入動態值。只需使用花括弧 ({}) 包夾要建立的屬性值,並省略一般會加上的引號標記,變數和表達式即可用於建立屬性值,如同下例所示︰</p>
<pre class="eval"> var a = 2;
 var b = &lt;foo bar={a}&gt;"hi"&lt;/foo&gt;;
</pre>
<p>開始執行時,變數的值會被求出,並自動在適當的位置加上引號。前面的例子產生的 XML 物件看起來就像這樣︰<code>&lt;foo bar="2"&gt;"hi"&lt;/foo&gt;</code>。</p>
<p>在屬性的替換方面,雙引號會被跳脫成 &amp;quot;,單引號則按平常方式處理。</p>
<pre class="eval">var b = 'He said "Don\'t go there."';
var el = &lt;foo a={b}/&gt;;
alert(el.toXMLString());
// 產生︰&lt;foo a="He said &amp;quot;Don't go there.&amp;quot;"/&gt;
</pre>
<p>小於和 &amp; 符號也會被跳脫成各自的等價實體。由於大於符號不會被跳脫,因此如果包含了 <a class="internal" href="/zh_tw/DOM/CDATASection" title="zh tw/DOM/CDATASection">CDATA</a> 結束序列 (]]&gt;),就有可能產生 XML 錯誤。</p>
<p>通常不會直接在字面(或變數)的屬性內容之中作修改(例如,<code>bar="a{var1}{var2}"</code>)。如果有必須使用 JavaScript 表達式計算變數來替代的內容的話(例如,<code>bar={'a'+var1+var2}</code>),在元素字面之前先定義新的變數,在變數中包含完整的修改內容,然後在字面中含入這個變數,或在字面之後取回屬性並將其修改(見下)。</p>
<p>可如同屬性值一般的修改屬性的名稱︰</p>
<pre>var a = 'att';
var b = &lt;b {a}='value'/&gt;;
alert(b);
// Gives:
&lt;b att="value"/&gt;

</pre>
<p>…但之後就不能修改表達式(例如,&lt;b {a}&gt;)。</p>
<p>執行上面的例子之後,參考 XML 物件的語言變數與 XML 文件中的 <code>&lt;languages&gt;</code> 結點一致。這個結點只有一個屬性︰type,這個屬性可用各種方式來存取並更新︰</p>
<pre class="eval"> alert(languages.@type); // 警報 "dynamic"
 languages.@type = "agile";
 alert(languages.@type); // 警報 "agile"
</pre>
<pre class="eval"> alert(languages.toString());
 /* 警報:
   &lt;languages type="agile"&gt;&lt;lang&gt;JavaScript&lt;/lang&gt;&lt;lang&gt;Python&lt;/lang&gt;&lt;/languages&gt;
 */
</pre>
<p>注意,如果想要把取回的屬性與其他的字串作比較,就有必要先把屬性作轉換,即使屬性有可能會在其他地方被轉換成字串(例如插入到文字框中)。</p>
<pre class="eval">if (<a class=" link-mailto" href="mailto:languages.@type.toString()" rel="freelink">languages.@type.toString()</a> === 'agile') {
 ...
}
</pre><h3 name="XML_物件的運用">XML 物件的運用</h3>
<p>XML 物件提供一系列的方法用來查閱並更新其中的內容。這類物件亦支援 JavaScript 的點 (.) 和 <code>[]</code> 符號,但不是用來存取物件的屬性,E4X 覆蓋了這些運算子,改用來存取元素的子結點︰</p>
<pre>var person = &lt;person&gt;
  &lt;name&gt;Bob Smith&lt;/name&gt;
  &lt;likes&gt;
    &lt;os&gt;Linux&lt;/os&gt;
    &lt;browser&gt;Firefox&lt;/browser&gt;
    &lt;language&gt;JavaScript&lt;/language&gt;
    &lt;language&gt;Python&lt;/language&gt;
  &lt;/likes&gt;
&lt;/person&gt;;

alert(person.name); // Bob Smith
alert(person['name']); // Bob Smith
alert(person.likes.browser); // Firefox
alert(person['likes'].browser); // Firefox
</pre>
<p>如果你使用多於一個以上的元素來存取的話,你會得到 <code>XMLList</code>︰</p>
<pre>alert(person.likes.language.length()); // 2
</pre>
<p>和 DOM 一樣,<code>*</code> 可以用來存取所有的子結點︰</p>
<pre>alert(person.likes.*.length()); // 4
</pre>
<p><code>.</code> 運算子會直接存取指定結點的子結點,<code>..</code> 運算子則會存取所有的子結點,不論嵌入的有多深︰</p>
<pre>alert(person..*.length()); // 11
</pre>
<p><code>length()</code> 方法在此返回 11,因為元素結點和文字結點兩者都被包含在 <code>XMLList</code> 的結果中。</p>
<p>用來表示 XML 元素的物件提供一系列實用的方法,部分方法的解說見下︰<span class="comment">TODO: Add all of the methods to the JavaScript reference, link from here</span></p>
<pre>alert(person.name.text()) // Bob Smith

var xml = person.name.toXMLString(); // 內含 XML 的字串

var personCopy = person.copy(); // XML 物件的深層複製

var child = person.child(1); // 第二個子結點;目前是 &lt;likes&gt; 元素
</pre><h3 name="XMLLists_的運用">XMLLists 的運用</h3>
<p>除了 XML 物件以外,E4X 也引入了 <code>XMLList</code> 物件。<code>XMLList</code> 是用來表示附有編號的 XML 物件的集合;例如,元素的列表。接續上面的例子,我們可以在頁面上存取 <code>XMLList</code> 的 <code>&lt;lang&gt;</code> 元素如下︰</p>
<pre class="eval"> var langs = languages.lang;
</pre>
<p><code>XMLList</code> 提供 <code>length()</code> 方法,可用來查出內含元素的數目︰</p>
<pre class="eval"> alert(languages.lang.length());
</pre>
<p>注意,有別於 JavaScript 陣列的 length 屬性,這個 length 是方法,不是屬性,而且必須使用 <code>length()</code> 來呼叫。</p>
<p>我們可以迭代所有相配的元素,就像這樣︰</p>
<pre class="eval"> for (var i = 0; i &lt; languages.lang.length(); i++) {
     alert(languages.lang[i].toString());
 }
</pre>
<p>在此我們使用同一個語法存取陣列中的已編號項。雖然這部分很類似普通的陣列,但 <code>XMLList</code> 並不支援 <code>Array</code> 的方法,如 <code>forEach</code>,且陣列的通用功能,如 <code>Array.forEach()</code> 也不相容於 <code>XMLList</code> 物件。</p>
<p>我們也可以使用在 JavaScript 1.6 中所引入的 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/for_each...in" title="zh tw/Core JavaScript 1.5 參考/語法/for each...in">for each...in 語法</a>,他已支援 E4X 的部分︰</p>
<pre class="eval"> for each (var lang in languages.lang) {
     alert(lang);
 }
</pre>
<p><code>for each...in</code> 也可以用在普通的 JavaScript 物件,迭代出內含在物件中的值(不是鍵)。如同 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/for...in" title="zh tw/Core JavaScript 1.5 參考/語法/for...in">for...in</a>,<a href="/en/Core_JavaScript_1.5_Reference/Statements/for...in#Description" title="en/Core_JavaScript_1.5_Reference/Statements/for...in#Description">非常不建議</a> 和陣列一起使用。</p>
<p>可以使用下面的 XML 字面語法來建立 <code>XMLList</code>,而無須建立格式正確的 XML 文件︰</p>
<pre class="eval"> var xmllist = &lt;&gt;
   &lt;lang&gt;JavaScript&lt;/lang&gt;
   &lt;lang&gt;Python&lt;/lang&gt;
 &lt;/&gt;;
</pre>
<p><code>+=</code> 運算子可用來把新的元素附加到文件中的 <code>XMLList</code>︰</p>
<pre class="eval"> languages.lang += &lt;lang&gt;Ruby&lt;/lang&gt;;
</pre>
<p>注意,有別於由普通的 DOM 方法所返回的結點列表,<code>XMLList</code> 只是靜態的,而且不會自動更新以反映在 DOM 中的改變。如果你在既有的 <code>XML</code> 物件底下建立 <code>XMLList</code> 作為子集,<code>XMLList</code> 並不會反映 XML 物件的改變;你需要重新建立 XMLList 以取得最近的更新︰</p>
<pre class="eval"> var languages = &lt;languages&gt;
   &lt;lang&gt;JavaScript&lt;/lang&gt;
   &lt;lang&gt;Python&lt;/lang&gt;
 &lt;/languages&gt;;
 
 var lang = languages.lang;
 alert(lang.length()); // 警報 2
 
 languages.lang += &lt;lang&gt;Ruby&lt;/lang&gt;;
 alert(lang.length()); // 仍舊警報 2
 
 lang = languages.lang; // 重新建立 XMLList
 alert(lang.length()); // 警報 3
</pre>
<h3 name="搜尋和過濾">搜尋和過濾</h3>
<p>E4X 提供特殊的運算子用來在通過指定條件的文件內部選取結點。這種過濾動作是由括弧裡面的表達式所指定的︰</p>
<pre>var html = &lt;html&gt;
  &lt;p id="p1"&gt;First paragraph&lt;/p&gt;
  &lt;p id="p2"&gt;Second paragraph&lt;/p&gt;
&lt;/html&gt;;

alert(html.p.(@id == "p1")); // 警報 "First paragraph"
</pre>
<p>在表達式前面比對路徑的結點(在本例中即 p 元素)會在表達式求值之前先加上作用域的限縮。就如同已經用 <a class="internal" href="/zh_tw/Core_JavaScript_1.5_%E5%8F%83%E8%80%83/%E8%AA%9E%E6%B3%95/with" title="zh tw/Core JavaScript 1.5 參考/語法/with">with 語法</a> 指定了一樣。</p>
<p>因此,過濾器也可以依據在目前元素中內含的單一結點的值來執行︰</p>
<pre>var people = &lt;people&gt;
  &lt;person&gt;
    &lt;name&gt;Bob&lt;/name&gt;
    &lt;age&gt;32&lt;/age&gt;
  &lt;/person&gt;
  &lt;person&gt;
    &lt;name&gt;Joe&lt;/name&gt;
    &lt;age&gt;46&lt;/age&gt;
  &lt;/person&gt;
&lt;/people&gt;;

alert(people.person.(name == "Joe").age); // 警報 46
</pre>
<p>也可以使用 JavaScript 函數當作過濾器的表達式︰</p>
<pre>function over40(i) {
    return i &gt; 40;
}

alert(people.person.(over40(parseInt(age))).name); // 警報 Joe
</pre><h3 name="命名空間的處理">命名空間的處理</h3>
<p>E4X 也全面考慮到命名空間。任何代表結點或屬性的 XML 物件都提供了可返回 <code>QName</code> 物件的 <code>name()</code> 方法,使加上命名空間的元素的查詢更為容易。</p>
<h4 name="預設">預設</h4>
<pre>default xml namespace = "http://www.w3.org/1999/xhtml";
// 目前還沒有必要在 HTML 標記裡指定命名空間
var xhtml = &lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt;
            &lt;p&gt;text&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;;
alert(xhtml.head); // 目前還沒有必要在此處的子元素中指定命名空間</pre>
<h4 name="非預設">非預設</h4>
<pre>var xhtml = &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
	&lt;head&gt;
		&lt;title&gt;Embedded SVG demo&lt;/title&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;h1&gt;Embedded SVG demo&lt;/h1&gt;
		&lt;svg xmlns="http://www.w3.org/2000/svg" 
			viewBox="0 0 100 100"&gt;
			&lt;circle cx="50"
				cy="50"
				r="20"
				stroke="orange"
				stroke-width="2px"
				fill="yellow" /&gt;
		&lt;/svg&gt;
	&lt;/body&gt;
&lt;/html&gt;;

alert(xhtml.name().localName); // 警報 "html"
alert(xhtml.name().uri); // 警報 "http://www.w3.org/1999/xhtml"
</pre>
<p>若要存取非預設命名空間內部的元素,首先建立 <code>Namespace</code> 物件把特定的命名空間的 URI 加以封裝︰</p>
<pre>var svgns = new Namespace('http://www.w3.org/2000/svg');
</pre>
<p>目前可以在 E4X 中使用 <code>namespace::localName</code> 代替一般的元素指定子來作查詢︰</p>
<pre>var svg = xhtml..svgns::svg;
alert(svg); // 顯示文件中的 &lt;svg&gt; 部分
</pre>
<h2 name="參閱">參閱</h2>
<ul> <li><a href="/en/E4X" title="en/E4X">E4X</a></li> <li><a href="/en/E4X_Tutorial" title="en/E4X_Tutorial">E4X Tutorial</a></li>
</ul>
<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Processing_XML_with_E4X", "fr": "fr/Guide_JavaScript_1.5/Traitement_de_XML_avec_E4X", "ja": "ja/Core_JavaScript_1.5_Guide/Processing_XML_with_E4X" } ) }}</p>
Revert to this revision