BLOGTIMES
« :: »
2020/11/24

JavaScript で XPath を使う

  javascript 
このエントリーをはてなブックマークに追加

JavaScript から HTML のノードを XPath で検索する方法を調べてみました。

Document.evaluate()*1を使うと意外と簡単に実装できますね。
以下のプログラムを以下の HTML に対して実行すると fuga2, fuga3 のノードが取り出せることが確認できます。

var xpathResult = document.evaluate( "//p[ancestor::div[@id='hoge']]", document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null ); while(var node = xpathResult.iterateNext()) { console.log(node); }

sample.html

<code class="html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test page</title> </head> <body> <p id="fuga1">abc</p> <div id="hoge"> <p id="fuga2">def</p> <p id="fuga3">ghi</p> </div> <p id="fuga4">jkl</p> <p id="fuga5">mno</p> <p id="fuga6">pqr</p> </body> </html>

† 参考


by hsur at 21:38 [5年前][4年前][3年前][2年前][1年前] |
こんな記事もあります 「Document.evaluate pqr XPath」
・Windows の Python に lxml を入れようとしてハマる
・Raspberry Pi を使ってレシートプリンタから印刷してみる
・2017 年の人気エントリは？
・2014年の人気エントリ Top100
・XSLT 2.0 で正規表現による置換処理を行う
・XSLT 2.0 で ISO 8601 形式の日付を処理する
・シェルスクリプトで XML を処理する
・シェルスクリプトで JSON のデータを処理する
・Route53 を使ってダイナミック DNS を構築する
・Google Apps Scriptで超簡易版RSSリーダーを書いてみた
トラックバックについて
Trackback URL:
お気軽にどうぞ。トラックバック前にポリシーをお読みください。[policy]
このエントリへのTrackbackにはこのURLが必要です→https://blog.cles.jp/item/12126
Trackbacks
このエントリにトラックバックはありません
Comments
愛のあるツッコミをお気軽にどうぞ。[policy]
古いエントリについてはコメント制御しているため、即時に反映されないことがあります。
コメントはありません
Comments Form

コメントは承認後の表示となります。
OpenIDでログインすると、即時に公開されます。

OpenID を使ってログインすることができます。

Identity URL: Yahoo! JAPAN IDでログイン

« :: »
Copyright © 2004-2020 by CLES All Rights Reserved.