![](https://www.w2solution.co.jp/wp-content/uploads/2023/01/javascript-960x504-1-e1673941784847.png)
HTML要素のスクレイピングをJavaScriptのES6でやってみる
こんにちは!
最近フロントテストの自動化のためにSeleniumを業務でよく使うため、今回はまず HTMLの要素 をJavaScriptのES6でスクレイピングしようと思います。
参考サイトはw2のECプラットフォームである「Value 5」のEC ショップ画面です。
1. 色々な情報を取得してみる
まずはChromeで「Value 5」のテスト用ECショップ画面を開いてから、「Command + Shift + i」でデバッガーのコンソールを開きます。
![](https://www.w2solution.co.jp/tech/wp-content/uploads/2019/12/ff1ac2968dae1f96e1e17be263ea41d4-1024x319.png)
単体取得
基本的にIDで取得する場合は、getByIdを使いますが、ES6から使えるquerySelectorを使うと、単体取得なら全てこちらで完結するのでとても楽です。
引数はCSSセレクターで指定できるため、CSSさえわかっていれば使うことができます。
1.画面のヘッダーにあるログインの文字列を取得してみます。「#HeadMembers」の中の「a」タグ内にログインの文字列があるようなので、CSSセレクタは「HeadMembers>a」と記述します。
![](https://www.w2solution.co.jp/tech/wp-content/uploads/2019/12/d65cad2af1be18d09b572c9a89e5a5a4.png)
![](https://www.w2solution.co.jp/tech/wp-content/uploads/2019/12/9e663a7ef71693e1ebf21c7e1f64c936.png)
では、次に「a」タグのテキストを取得したいため、今回はinnerTextで取得します。
![](https://www.w2solution.co.jp/tech/wp-content/uploads/2019/12/09ea6a6b5bbbd5d3e927e72a1a9e472e.png)
こちらも取得できました。とても簡単ですね!
複数取得
では、次に querySelectorAllを使ってみましょう。
今回は複数のエレメントが取得できる querySelectorAll を使います。こちらもCSSセレクタで指定します。
1.まずはページ上記にあるナビゲーションメニューの「aタグ」を全て取得してみます。
欲しいaタグの階層は「#HeadGlobalNavi>ul>li>a」なので、そのまま querySelectorAll に記述します。
![](https://www.w2solution.co.jp/tech/wp-content/uploads/2019/12/f6feae1b7ebf86ce1b8c0ca488edf4d0.png)
![](https://www.w2solution.co.jp/tech/wp-content/uploads/2019/12/426af2f9f0e4d506fc14ca3c3972a070.png)
2.では、aタグのテキストを取得してみます!
[…] と書かれている記述は、スプレッド演算子というものです。こちらを使うと、複数のエレメントを取得した際に、簡単にmapなどで回すことができます。
![](https://www.w2solution.co.jp/tech/wp-content/uploads/2019/12/283ad5f49bfc4654f2f3f5ebfd9b8aab.png)
ナビゲーションメニューの文字列を全て取得できました!
2. まとめ
デベロッパーツールなどで、HTMLのデータを取得しようと思った場合、私は基本的に下記2つを使って取得します。
・document.querySelector
・document.querySelectorAll
取得してきた複数のエレメントの場合は、mapやforEach, filter, reduce, every, someなどを駆使して必要な値を取得する、という感じです。
ES6のJSは、ChromeやFireFoxだと標準で動くため、デバッガーツールで使うには非常に便利です。次は、DOM操作繋がりであるSelenium IDEを紹介したいと思います。