修改 272788 of 使用 E4X 處理 XML

  • 版本網址代稱: E4X/使用_E4X_處理_XML
  • 版本標題: 使用 E4X 處理 XML
  • 版本 ID: 272788
  • 建立日期:
  • 建立者: happysadman
  • 是目前線上的版本?
  • 回應 107 words added, 338 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 objects provide a number of methods for inspecting and updating their contents. They support JavaScript's regular dot and [] notation, but instead of accessing object properties E4X overloads these operators to access the element's children:

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

If you access something with more than one matching element, you get back an XMLList:

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

As with the DOM, * can be used to access all child nodes:

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

While the . operator accesses direct children of the given node, the .. operator accesses all children no matter how deeply nested:

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

The length() method here returns 11 because both elements and text nodes are included in the resulting XMLList.

Objects representing XML elements provide a number of useful methods, some of which are illustrated below: TODO: Add all of the methods to the JavaScript reference, link from here

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

var xml = person.name.toXMLString(); // A string containing XML

var personCopy = person.copy(); // A deep copy of the XML object

var child = person.child(1); // The second child node; in this case the <likes> element

XMLLists 的運用

In addition to the XML object, E4X introduces an XMLList object. XMLList is used to represent an ordered collection of XML objects; for example, a list of elements. Continuing the above example, we can access an XMLList of the <lang> elements in the page as follows:

 var langs = languages.lang;

XMLList provides a length() method which can be used to find the number of contained elements:

 alert(languages.lang.length());

Note that unlike JavaScript arrays length is a method, not a property, and must be called using length().

We can iterate through the matching elements like so:

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

Here we are using identical syntax to that used to access numbered items in an array. Despite these similarities to regular arrays, XMLList does not support Array methods such as forEach, and Array generics such as Array.forEach() are not compatible with XMLList objects.

We can also use the for each...in statement introduced in JavaScript 1.6 as part of JavaScript's E4X support:

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

for each...in can also be used with regular JavaScript objects to iterate over the values (as opposed to the keys) contained in the object. As with for...in, using it with arrays is strongly discouraged.

It is possible to create an XMLList using XML literal syntax without needing to create a well-formed XML document, using the following syntax:

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

The += operator can be used to append new elements to an XMLList within a document:

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

Note that unlike node lists returned by regular DOM methods, XMLLists are static and are not automatically updated to reflect changes in the DOM. If you create an XMLList as a subset of an existing XML object and then modify the original XML object, the XMLList will not reflect those changes; you will need to re-create it to get the most recent updates:

 var languages = <languages>
   <lang>JavaScript</lang>
   <lang>Python</lang>
 </languages>;
 
 var lang = languages.lang;
 alert(lang.length()); // Alerts 2
 
 languages.lang += <lang>Ruby</lang>;
 alert(lang.length()); // Still alerts 2
 
 lang = languages.lang; // Re-create the XMLList
 alert(lang.length()); // Alerts 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 objects provide a number of methods for inspecting and updating their contents. They support JavaScript's regular dot and <code>[]</code> notation, but instead of accessing object properties E4X overloads these operators to access the element's children:</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>If you access something with more than one matching element, you get back an <code>XMLList</code>:</p>
<pre>alert(person.likes.language.length()); // 2
</pre>
<p>As with the DOM, <code>*</code> can be used to access all child nodes:</p>
<pre>alert(person.likes.*.length()); // 4
</pre>
<p>While the <code>.</code> operator accesses direct children of the given node, the <code>..</code> operator accesses all children no matter how deeply nested:</p>
<pre>alert(person..*.length()); // 11
</pre>
<p>The <code>length()</code> method here returns 11 because both elements and text nodes are included in the resulting <code>XMLList</code>.</p>
<p>Objects representing XML elements provide a number of useful methods, some of which are illustrated below: <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(); // A string containing XML

var personCopy = person.copy(); // A deep copy of the XML object

var child = person.child(1); // The second child node; in this case the &lt;likes&gt; element
</pre>
<h3 name="XMLLists_的運用">XMLLists 的運用</h3>
<p>In addition to the XML object, E4X introduces an <code>XMLList</code> object. <code>XMLList</code> is used to represent an ordered collection of XML objects; for example, a list of elements. Continuing the above example, we can access an <code>XMLList</code> of the <code>&lt;lang&gt;</code> elements in the page as follows:</p>
<pre class="eval"> var langs = languages.lang;
</pre>
<p><code>XMLList</code> provides a <code>length()</code> method which can be used to find the number of contained elements:</p>
<pre class="eval"> alert(languages.lang.length());
</pre>
<p>Note that unlike JavaScript arrays length is a method, not a property, and must be called using <code>length()</code>.</p>
<p>We can iterate through the matching elements like so:</p>
<pre class="eval"> for (var i = 0; i &lt; languages.lang.length(); i++) {
     alert(languages.lang[i].toString());
 }
</pre>
<p>Here we are using identical syntax to that used to access numbered items in an array. Despite these similarities to regular arrays, <code>XMLList</code> does not support <code>Array</code> methods such as <code>forEach</code>, and Array generics such as <code>Array.forEach()</code> are not compatible with <code>XMLList</code> objects.</p>
<p>We can also use the <a href="/en/Core_JavaScript_1.5_Reference/Statements/for_each...in" title="en/Core_JavaScript_1.5_Reference/Statements/for_each...in">for each...in statement</a> introduced in JavaScript 1.6 as part of JavaScript's E4X support:</p>
<pre class="eval"> for each (var lang in languages.lang) {
     alert(lang);
 }
</pre>
<p><code>for each...in</code> can also be used with regular JavaScript objects to iterate over the values (as opposed to the keys) contained in the object. As with <a href="/en/Core_JavaScript_1.5_Reference/Statements/for...in" title="en/Core_JavaScript_1.5_Reference/Statements/for...in">for...in</a>, using it with arrays is <a href="/en/Core_JavaScript_1.5_Reference/Statements/for...in#Description" title="en/Core_JavaScript_1.5_Reference/Statements/for...in#Description">strongly discouraged</a>.</p>
<p>It is possible to create an <code>XMLList</code> using XML literal syntax without needing to create a well-formed XML document, using the following syntax:</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>The <code>+=</code> operator can be used to append new elements to an <code>XMLList</code> within a document:</p>
<pre class="eval"> languages.lang += &lt;lang&gt;Ruby&lt;/lang&gt;;
</pre>
<p>Note that unlike node lists returned by regular DOM methods, <code>XMLList</code>s are static and are not automatically updated to reflect changes in the DOM. If you create an <code>XMLList</code> as a subset of an existing <code>XML</code> object and then modify the original <code>XML</code> object, the <code>XMLList</code> will not reflect those changes; you will need to re-create it to get the most recent updates:</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()); // Alerts 2
 
 languages.lang += &lt;lang&gt;Ruby&lt;/lang&gt;;
 alert(lang.length()); // Still alerts 2
 
 lang = languages.lang; // Re-create the XMLList
 alert(lang.length()); // Alerts 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>
還原至此版本