t_hazawaの日記

株式投資とWebエンジニアリングのブログです。株式投資の目次は→です。 https://t-hazawa.hatenablog.com/entry/2021/02/12/220933

JavaScript中級者になろう 10章を読んだ(XPath)

前: JavaScript中級者になろう 9章を読んだ(オブジェクト志向) - t_hazawaの日記

経緯

  • 業務システムをTypeScriptにする構想を練った
  • 息抜きがてら中級者

第十章 XPath

十章第一回 XPathとは

https://uhyohyo.net/javascript/10_1.html

  • xpathcssセレクタよりも数段強力な表現力をもちます

  • xpathには「現在のノード」という概念があります

  • 僕はこのことを認識してなかった
  • スラッシュ(/)に続けて要素名を書く構文は、子ノードへの移動を意味します

  • body要素の子に複数のp要素がある場合どれが当てはまるかというと、全部です このように、現在のノードが複数となることもあります。

  • 軸 :: ノードテスト

  • *は全ての要素ノードを意味するノードテストであり、テキストノードなどその他のノードは含みません

  • /html/body/child::text()

  • /html/body/descendant::text()と書けば、body要素内の全てのテキストノードのノードセットとなり、webページのテキストが全て集まるでしょう - ☆すごく便利そう

  • node()(全ての種類のノード)

  • /html/body//とすると、body要素を含めてそれ以下の要素全部のノードセットが結果

  • /html/body//self::p。。これは「body要素中のp要素全て」

  • /html/body/descendant-or-self:p と同じ

十章第二回 DOMでのXPathの利用

https://uhyohyo.net/javascript/10_2.html

  • XPathを実際に使ってみよう
  • documentが持つevaluateというメソッド これは、5個の引数を渡してxpathを処理してもらい、結果をxpathresultというオブジェクトで返すものです

  • 引数ooi
  • ルートノードもわたせるよ
  • 第三引数は 名前空間解決器 (かっこいい) xml よう
  • XPathResult.FIRST_ORDERED_NODE_TYPE

  • iterateNext は木構造が変わるとエラー

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

https://uhyohyo.net/javascript/10_3.html

  • /attribute:: だと、現在nodeの属性を調べるぞ
  • nodeTypeプロパティを持ち、しかもNode.ATTRIBUTE_NODEという定数で示される種類のノードであることが分かります。これが属性ノードです。なお、属性ノードの正式名称はAttrといいます。

  • 属性ノードというものがアンんだね
  • zokuseiNode.value で lang属性の値である "en" がとれる
  • attrノードが使われることは多くありません

  • xpathは文字列や数値・真偽値も扱うことができます xpathの型は真偽値型、数値型、文字列型、そしてノードセット型の4つです。

  • string(/html/attribute::lang)
  • XPathには関数がある
  • 実は属性ノードは文字列に変換すると属性の値に変換されます。

  • attribute軸を@で省略できるというものです。すなわち、 /html/attribute::lang を /html/@lang と書けます。

十章第四回 述語による絞り込み

https://uhyohyo.net/javascript/10_4.html

  • 述語(Predicates)

  • ノードテストによる絞り込みでは不十分で、もっと細かい条件を指定したい場合もあることでしょう。そういったときに使うのが述語です。

  • 述語の書き方は、/html/body/child::p[1]のように[]で囲んだ式をくっつけます

  • /html/body/p[last()]

  • /html/body/p[position()<=2]

  • /html/body/p[1]は/html/body/p[position()=1]の省略形
  • /html/body/descendant::p[attribute::lang="ja"]
  • 要素ノードなど木構造中に存在するノードを文字列に変換するときには、その子孫のテキストノードを全て連結した値になります。

  • /html/body/descendant::p[ancestor-or-self::*/@lang="ja"]
  • /html/body/p[@lang="ja"][last()]。。まず、ノードテストでbodyの子のpに絞りこまれ、次の述語でlang属性が"ja"のものに絞りこまれ、その次の述語で、絞りこまれたp要素のうち最後のp要素になります

時間まとめ

  • 2021/11/20-21
  • 15+22+18 + ブログ6分 = 61分
  • 累計 : 912分

次回

  • 次からはいよいよES2015 (楽しみ)

次: JavaScript中級者になろう 11章を読んだ (ES5) - t_hazawaの日記