ツール開発講座 ～第5回 XPathで要素を取得〜

すっかり更新が遅くなってしまいましたね＾＾；
ちょっと同盟内のお仕事が忙しくなって参りまして・・・。

さて前置きはさておき今回はXPathを使って要素を取得します。

まずは前回のエントリーを参考に同盟ランク1位の人のXPathを調べてみましょう

次に
そのXPathをコピってきて

var xpath = ".//*[@id='gray02Wrapper']/table[3]/tbody/tr[3]/td[2]/a"
var hogehoge = document.evaluate(xpath,document,null,9,null).singleNodeValue

こんな感じで変数xpathにXPathを代入してください。

これで、変数hogehogeにはXPathで指定した要素の情報が入っています。

全てを覚える必要も理解する必要も今はありません。
「これをコピってきてxpathの所(赤い所)を変えれば良いだけ」という事を覚えておいてください。

今回指定したのは<a>タグのところでしたのでa要素の情報が入っています。
ここから色々な情報を我々が見える形で取り出せます。

とりあえず手に入れられる情報の中でよく使いそうなものを並べてみます。

textContent・・・文字列
innerHTML・・・中身のHTML
outerHTML・・・<a>タグも含めたHTML
getAttribute("href")・・・属性(例えば今回はhref)

コンソールで中身を見てみましょうか。

console.log(hogehoge.textContent)
console.log(hogehoge.innerHTML)
console.log(hogehoge.outerHTML)
console.log(hogehoge.getAttribute("href"))

a要素の中身は同盟ランク1位の人の名前の文字列だけですので

console.log(hogehoge.textContent)

と

console.log(hogehoge.innerHTML)

は同じ結果が出力されるかと思います。

もう少し進めてみましょう。
同盟ランク1位の人の行を調べてみます。
FirePathでXPathを調べると私の場合、

.//*[@id='gray02Wrapper']/table[3]/tbody/tr[3]

こんな感じでした。

これをさっきのやつに当てはめて

var xpath = ".//*[@id='gray02Wrapper']/table[3]/tbody/tr[3]"
var hogehoge = document.evaluate(xpath,document,null,9,null).singleNodeValue

これで同盟ランク1位の人の行の要素を取得出来ました。

ここでは省略しますが、先ほどと同様にいろいろ取得した情報の中身を調べてみてください。
練習で色々なXPathで情報を取ってみても良いかもしれませんね。
例えば、現在のサーバー時間とかBPとか資源値とか。

さて話をもう少しだけ進めます。

hogehoge.style.backgroundColor = "yellow"

と書くとその行が黄色くなります。
これはhogehogeのstyleのbackgroundColorを"yellow"にしなさいって意味です。

難しかったら無理に理解しようとしなくて良いです。
これをそのまま使って、いろんな所の色を変えられるんだと、知っていれば良いです。
覚えなくても問題ありません。

必要になったら、ここからコピってくれば良いんです。
「JavaScript style」でググると、要素のstyleを変えるいろいろな表現を知ることができます。
時間があるときに調べてみると良いかと思います。

話は横道にそれますが、我々のような素人は、無理やり色々と覚える必要はありません。
「グリモンツール（JavaScript）で何が出来るか」
「その方法はどのHPに書いてあるか」
を知っていれば良いのです。
私も、このくらいの簡単な表現はさすがにいつの間にか覚えましたが、ツール作る時は何度も何度もググっています。

さて話を戻しまして、第0回にお示ししたゴールにだいぶ近づいてきましたね。
いろんな行の色を変えて遊んでみると良いかもしれません。
自分の名前のある行のXPathを使えば、見た目だけはゴールと同じに出来ますね。

ただこれでは同盟順位が変わってしまったら、違う人の名前がハイライトされてしまいますｗ

次回以降、何回か使って自分の名前が入ってる行の要素を順位が変わっても取得できるようにする方法を考えていきたいと思います。

それでは本題のこちらもよろしく→