【javascript】特定のタグのHTMLを表示する方法／querySelectorAll

問題

HTMLのタグの内、<p>タグのテキスト情報を取得したい。

また、クラスに”fruit”を持つ<div>タグの中にある<p>タグのテキスト情報を取得したい。

解決方法

querySelectorAllを使ってタグの情報を取得することが可能。

例えば、以下のようなHTMLがあったときdivタグを持ったノードを取得する方法は以下の通りである。

console.logによりdivタグを持ったノード情報を取得している。

取得されたノードの数は4つだが、詳細は以下の４通りである。

また、以下のように特定のクラスでのノード情報を取得できたりもする。

• element1 divタグのfruitクラスを持つNodeを抽出
• element2 divタグのNodeの内、pタグを持つNodeを抽出
• element3 pタグの内、「align=”center”」を持つNodeを抽出