js STUDIO

.getElementsByTagNameNS()

与えられた名前空間に沿って、与えられた名前のタグを持つ要素のリストを返します。 ルートノードを含め、ドキュメント全体が検索されます。

文法 

  1. elements = document.getElementsByTagNameNS(namespace, name)
引数 説明
namespace 検索対象の要素の名前空間URIを指定します。 (element.namespaceURI 参照)
name 検索のためのローカル名、または全ての要素にマッチする特別な値"*"のどちらかを指定します。 (element.localName参照)
戻り値
elements 検出された実稼働中の要素が、 ツリー内で現れた順に並べられたNodeList(ただし、後述する注意を参照)として返されます。

注意: W3Cの仕様では返される要素(elements)はNodeListとされていますが、 このメソッドはGeckoとInternet Explorerは、HTMLCollectionを返します。 OperaはNodeListを返しますが、これにはHTMLCollectionと同じになるように、 namedItemメソッドが実装されています。(翻訳に自信なし) 2012年1月時点では、WebKitのブラウザだけが純粋なNodeListを返します。 詳細は、bug 14869を参照。

例

下記の例では、getElementsByTagNameNS()は特定の親要素から開始して、 親要素からDOMを通ってトップダウンで再帰的に検索を行い、 タグのnameパラメーターにマッチする子要素を探します。

getElementsByTagNameNS()がdocumentノードでは無いノード上で実行された場合、 実際にはelement.getElementsByTagNameNS()メソッドが使用されることに注意してください。

下記の例を使用するのに必要な事は、.xhtml拡張子の新しいファイルへ、コピー・ペーストして保存するだけです。 

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>getElementsByTagNameNS example</title>
  4. <script type="text/javascript">
  6. function getAllParaElems()
  7. {
  8.   var allParas = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
  9.   var num = allParas.length;
  10.   alert("There are " + num + " &lt;p&gt; elements in this document");
  11. }
  13. function div1ParaElems()
  14. {
  15.   var div1 = document.getElementById("div1")
  16.   var div1Paras = div1.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
  17.   var num = div1Paras.length;
  18.   alert("There are " + num + " &lt;p&gt; elements in div1 element");
  19. }
  21. function div2ParaElems()
  22. {
  23.   var div2 = document.getElementById("div2")
  24.   var div2Paras = div2.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
  25.   var num = div2Paras.length;
  26.   alert("There are " + num + " &lt;p&gt; elements in div2 element");
  27. }
  29. </script>
  30. </head>
  32. <body style="border: solid green 3px">
  33. <p>Some outer text</p>
  34. <p>Some outer text</p>
  36.   <div id="div1" style="border: solid blue 3px">
  37.     <p>Some div1 text</p>
  38.     <p>Some div1 text</p>
  39.     <p>Some div1 text</p>
  41.     <div id="div2" style="border: solid red 3px">
  42.     <p>Some div2 text</p>
  43.     <p>Some div2 text</p>
  44.     </div>
  45.   </div>
  47. <p>Some outer text</p>
  48. <p>Some outer text</p>
  50. <button onclick="getAllParaElems();">
  51.  show all p elements in document</button><br />
  53. <button onclick="div1ParaElems();">
  54.  show all p elements in div1 element</button><br />
  56. <button onclick="div2ParaElems();">
  57.  show all p elements in div2 element</button>
  59. </body>
  60. </html>

サポートしていないブラウザでの回避策

希望するブラウザがXPathをサポートしていなかった場合、 望んだローカル名と名前空間の全てのタグを見つけ出す別のアプローチ(その全ての子を通してDOMを探し、 全ての@xmlnsインスタンスを識別するといったような)が必須となりますが、XPathの方が断然早く動作します。(翻訳に自信無し) Internet Explorerに対応するために(Internet Explorerは別のAPIでXPathをサポートしているため)、 下記の関数無いでXPathの代わりに、XPathラッパーを呼び出して対応します。(翻訳に自信無し) 

  1. function getElementsByTagNameNSWrapper (ns, elName, doc, context) {
  2. 	if (!doc) {
  3. 		doc = document;
  4. 	}
  5. 	if (!context) {
  6. 		context = doc;
  7. 	}
  9. 	var result = doc.evaluate('//*[local-name()="'+elName+'" and namespace-uri() = "'+ns+'"]', context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  11.     var a = [];
  12.     for(var i = 0; i < result.snapshotLength; i++) {
  13.         a[i] = result.snapshotItem(i);
  14.     }
  15.     return a;
  16. }

仕様

 Back to top

© 2017 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。 構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 特定のブラウザに特化しすぎている情報やあまりにも古い情報、 または試験的に導入されているようなAPIや機能については、省略していることがあります。
  • 例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、 その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
  • MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。