ブラウザで画面上のh3ノードを開発ツール上で取得して表示文字列を表示するまで #JavaScript

現在学習に使っているページの見出しをマインドマップに書き出したいと思ったのですが、手で書き写すくらいならDOM操作して取得してやろうと思ってやってみたので方法をメモしておきます。


// 1. 画面に表示されているh3タグを取得する
var h3s = document.getElementsByTagName('h3') // => HTMLCollectionが返ってくる

// 2. HTMLCollectionの要素数だけfor文を回す
for (i = 0; i < h3s.length; i++) {

  // HTMLCollection.item()を叩いてNodeを取得する
  var h3 = h3s.item(i)

  // Node.textContentに格納されている文字列を取得・表示する
  console.log(h3.textContent)

  // 表示された文字はブラウザの機能で保存するかコピーする
}

追記

querySelectorを使うと複数クラスのNodeListを取得できた。

NodeListならforEachメソッドもあるのでこっちの方が簡単。

var h3AndLectureList = document.querySelectorAll('.hoge,.foo')

h3AndLectureList.forEach(node => console.log(node.textContent))