はじめに

「特定のページのこの部分を、jsで操作できる形で欲しい...」みたいなケースが時折あります。
そんな時はChromeDevツールでJSPathをコピーしてみましょう!

機能と使い方

<参考資料> Copyの画面キャプチャ

copied_JSpath.js

document.querySelector("#main > div.adventCalendarJumbotron > div > div > div > div > h1")

コピーできていますね。

querySelectorで取得しているので、簡単に加工できます。

innerText.js

document.querySelector("#main > div.adventCalendarJumbotron > div > div > div > div > h1").innerText

//console出力
//"IBJ.Inc Advent Calendar 2020"

Background-color.js

document.querySelector("#main > div.adventCalendarJumbotron > div > div > div > div > h1").style.backgroundColor = 'yellow'

最後まで読んでいただきありがとうございました。
コピーしたJSPathを活かしてできる楽しい作業の具体例は、機会があればご紹介します。