uhyohyo.net

JavaScript初級者から中級者になろう

十章第三回 属性の取得と型

属性を取得する

今回は、新しい軸が出てきます。

実は、XPathではあるノードの属性を調べることができます。

そこで使うのがattribute軸です。例えばこうです。

/html/attribute::lang

これは、html要素のlang属性を取得していることになります。

さて、ここで、今までXPathではノードセットを取得してきました。ところが、属性というのはどうなんでしょう。属性はノードではないのではないでしょうか。

ということで、実験してみましょう。

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <p>test</p>
    <script type="text/javascript">
      var result = document.evaluate('/html/attribute::lang', document, null, XPathResult.ANY_UNORDERED_NODE_TYPE, null);

      var kekka = result.singleNodeValue;
      console.log(kekka);
    </script>
  </body>
</html>
          

結果を見ると、得られたオブジェクトはAttrというオブジェクトだということが分かります。実は、

kekka instanceof Attr
kekka instanceof Node

のどちらもtrueであり、これもノードの一種であることが分かります。

Attrノード

さて、このAttrから値をどう取得するのかというと、valueというプロパティがあり、それに文字列で値が入っています。

他にもできることはありますが、今回はこのAttrは本題ではないので詳しく解説しません。

それで、

console.log(kekka.value);

とすると無事"jp"が取得できます。

XPathの型

さて、これが本題でないとはどういうことかというと、実際のところこのAttrオブジェクトの使用頻度は低く、もっと便利な方法があります。

それは、XPath上で直接文字列に変換するという方法です。今までXPathが扱ってきたのはノードだけでしたが、実は文字列も扱えるのです。それどころか、JavaScriptと同様の真偽値数値も扱えます。

つまり、XPathにもがあるのです。つまり、真偽値型、数値型、文字列型、そしてノードセット型の4つです。

それでは具体的にどうするのか見てみます。

string( /html/attribute::lang )

というようにします。

ここで、/html/attribute::langstring()で囲んでいます。これは関数のようですが、実際関数です。XPathには関数があったのです。

それで、このstring関数は当然引数を文字列に変換して返します。これは属性のノードの場合その属性の値に変換されます。

つまり、

string( /html/attribute::lang )

の最終的な結果は文字列型であるということです。

ここで、最終的に結果の取得はどうすればよいのでしょう。前回紹介した結果タイプは、全てノードセット用のものでした。実はこれでは対応できません。そこで、新しい定数を紹介します。

NUMBER_TYPE
数値である結果を取得します。プロパティnumberValueで取り出せます。
STRING_TYPE
文字列である結果を取得します。プロパティstringValueで取り出せます。
BOOLEAN_TYPE
真偽値である結果を取得します。プロパティbooleanValueで取り出せます。
ANY_TYPE
結果の型に応じて自動的に結果タイプを選びます。数値、文字列、真偽値の場合はNUMBER_TYPE,STRING_TYPE,BOOLEAN_TYPEになり、ノードセットの場合はUNORDERED_NODE_ITERATOR_TYPEとなります。

これは単純ですね。では、属性を文字列値で取得してみましょう。

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <p>test</p>
    <script type="text/javascript">
      var result = document.evaluate('string(/html/attribute::lang)', document, null, XPathResult.STRING_TYPE, null);

      var kekka = result.stringValue;
      console.log(kekka);
    </script>
  </body>
</html>
          

result.stringValueに直接文字列値で"jp"が入っていることが分かります。

attribute軸の省略

ここでひとつ新しい省略記法を紹介しておきます。といっても単純なもので、attribute軸を@で省略できるというものです。すなわち、

/html/attribute::lang

/html/@lang

と書けます。これは楽ですね。