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>

参考


トラックバックについて
Trackback URL:
お気軽にどうぞ。トラックバック前にポリシーをお読みください。[policy]
このエントリへのTrackbackにはこのURLが必要です→https://blog.cles.jp/item/12126
Trackbacks
このエントリにトラックバックはありません
Comments
愛のあるツッコミをお気軽にどうぞ。[policy]
古いエントリについてはコメント制御しているため、即時に反映されないことがあります。
コメントはありません
Comments Form

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

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

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