使用 E4X 處理 XML

  • 版本網址代稱: E4X/使用_E4X_處理_XML
  • 版本標題: 使用 E4X 處理 XML
  • 版本 ID: 272793
  • 建立日期:
  • 建立者: happysadman
  • Is current revision?
  • 回應 3 words added, 3 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 provides special operators for selecting nodes within a document that match specific criteria. These filter operations are specified using an expression contained in parentheses:

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

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

Nodes matching the path before the expression (in this case the paragraph elements) are added to the scope chain before the expression is evaluated, as if they had been specified using the with statement.

Consequently, filters can also run against the value of a single node contained within the current element:

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); // Alerts 46

Filter expressions can even use JavaScript functions:

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

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

命名空間的處理

E4X is fully namespace aware. Any XML object that represents a node or attribute provides a name() method which returns a QName object, allowing easy inspection of namespaced elements.

預設

default xml namespace = "http://www.w3.org/1999/xhtml";
// No need now to specify a namespace in the html tag
var xhtml = <html><head><title></title></head><body>
            <p>text</p></body></html>;
alert(xhtml.head); // No need to specify a namespace on subelements here either

非預設

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); // Alerts "html"
alert(xhtml.name().uri); // Alerts "http://www.w3.org/1999/xhtml"

To access elements that are within a non-default namespace, first create a Namespace object encapsulating the URI for that namespace:

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

This can now be used in E4X queries by using namespace::localName in place of a normal element specifier:

var svg = xhtml..svgns::svg;
alert(svg); // Shows the <svg> portion of the document

參閱

{{ 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 provides special operators for selecting nodes within a document that match specific criteria. These filter operations are specified using an expression contained in parentheses:</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")); // Alerts "First paragraph"
</pre>
<p>Nodes matching the path before the expression (in this case the paragraph elements) are added to the scope chain before the expression is evaluated, as if they had been specified using the <a href="/en/Core_JavaScript_1.5_Reference/Statements/with" title="en/Core_JavaScript_1.5_Reference/Statements/with">with statement</a>.</p>
<p>Consequently, filters can also run against the value of a single node contained within the current element:</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); // Alerts 46
</pre>
<p>Filter expressions can even use JavaScript functions:</p>
<pre>function over40(i) {
    return i &gt; 40;
}

alert(people.person.(over40(parseInt(age))).name); // Alerts Joe
</pre>
<h3 name="命名空間的處理">命名空間的處理</h3>
<p>E4X is fully namespace aware. Any XML object that represents a node or attribute provides a <code>name()</code> method which returns a <code>QName</code> object, allowing easy inspection of namespaced elements.</p>
<h4 name="預設">預設</h4>
<pre>default xml namespace = "http://www.w3.org/1999/xhtml";
// No need now to specify a namespace in the html tag
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); // No need to specify a namespace on subelements here either</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); // Alerts "html"
alert(xhtml.name().uri); // Alerts "http://www.w3.org/1999/xhtml"
</pre>
<p>To access elements that are within a non-default namespace, first create a <code>Namespace</code> object encapsulating the URI for that namespace:</p>
<pre>var svgns = new Namespace('http://www.w3.org/2000/svg');
</pre>
<p>This can now be used in E4X queries by using <code>namespace::localName</code> in place of a normal element specifier:</p>
<pre>var svg = xhtml..svgns::svg;
alert(svg); // Shows the &lt;svg&gt; portion of the document
</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