Document: getElementsByTagNameNS() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

指定された名前空間の指定されたタグ名を持つ要素のリストを返します。ルートノードを含め、文書全体が検索されます。

構文

js
getElementsByTagNameNS(namespace, name)

引数

namespace

検索する要素の名前空間 URI です（element.namespaceURI を参照）。

name

検索する要素のローカル名、またはすべての要素に一致する特殊な値 * です（element.localName を参照）。

返値

見つかった要素の生きた NodeList（但し下記のメモを参照）で、ツリーに現れる順です。

メモ: W3C の仕様書では返値は NodeList であるとされていますが、Firefox ではこのメソッドは HTMLCollection を返します。 Opera は NodeList を返しますが、 namedItem メソッドを実装しているので、 HTMLCollection と同様になります。2012 年 1 月時点で、 WebKit ブラウザーのみが純粋な NodeList の値を返します。 詳しくは bug 14869 を参照してください。

メモ: 現在、このメソッドの引数は大文字と小文字を区別しますが、 Firefox 3.5 以前は大文字と小文字を区別していませんでした。 詳しくは Firefox 3.6 の開発者リリースノートおよび Element.getElementsByTagNameNS のブラウザーの互換性のメモをご覧ください。

例

以下の例では、 getElementsByTagNameNS は特定の親要素から始め、 DOM 内を親要素から再帰的に通して検索し、タグの name が引数に一致する子要素を検索します。

なお、 getElementsByTagName が呼び出されたノードが document ではない場合、実際には element.getElementsByTagNameNS メソッドが使用されます。

以下の例を使用するには、新しいファイルにそのままコピー＆ペーストして、 .xhtml の拡張子で保存してください。

html
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>getElementsByTagNameNS の例</title>

    <script>
      function getAllParaElems() {
        const allParas = document.getElementsByTagNameNS(
          "http://www.w3.org/1999/xhtml",
          "p",
        );
        const num = allParas.length;
        alert(`この文書には ${num} 個の &lt;p&gt; 要素があります`);
      }

      function div1ParaElems() {
        const div1 = document.getElementById("div1");
        const div1Paras = div1.getElementsByTagNameNS(
          "http://www.w3.org/1999/xhtml",
          "p",
        );
        const num = div1Paras.length;
        alert(`この div1 要素には ${num} 個の &lt;p&gt; 要素があります`);
      }

      function div2ParaElems() {
        const div2 = document.getElementById("div2");
        const div2Paras = div2.getElementsByTagNameNS(
          "http://www.w3.org/1999/xhtml",
          "p",
        );
        const num = div2Paras.length;
        alert(`この div2 要素には ${num} 個の &lt;p&gt; 要素があります。`);
      }
    </script>
  </head>

  <body style="border: solid green 3px">
    <p>外側のテキスト</p>
    <p>外側のテキスト</p>

    <div id="div1" style="border: solid blue 3px">
      <p>div1 のテキスト</p>
      <p>div1 のテキスト</p>
      <p>div1 のテキスト</p>

      <div id="div2" style="border: solid red 3px">
        <p>div2 のテキスト</p>
        <p>div2 のテキスト</p>
      </div>
    </div>

    <p>外側のテキスト</p>
    <p>外側のテキスト</p>

    <button onclick="getAllParaElems();">
      文書内のすべての p 要素
    </button>
    <br />

    <button onclick="div1ParaElems();">
      div1 要素内のすべての p 要素
    </button>
    <br />

    <button onclick="div2ParaElems();">
      div2 要素内のすべての p 要素
    </button>
  </body>
</html>

仕様書

Specification
DOM
# ref-for-dom-document-getelementsbytagnamens①

ブラウザーの互換性

関連情報