【javascript】見出しタグの階層構造を確認する方法

webサイトの見出しタグの階層構造を開発者ツールの「Console」でちゃちゃっと確認する用のコードを作ったときの備忘録

見出しタグの階層構造をconsole.logで出力

とりあえず、console.log()で階層構造を出力

var elems = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
elems.forEach(elm => {
	console.log(elm.nodeName.toLowerCase()+':'+elm.textContent.replace(/\s+/g, '') + '\n');
  // 出力結果：「h1:テキスト…」
});

開発者ツールの「Console」にぶち込めば動く

見出しタグの階層構造を少し見やすくしてconsole.logで出力

ちょっと見づらかったので調整
上のコードだと一行づつ出力されて見づらかったので、一行にわかりやすく階層構造が出力されるように直してみた

同じく開発者ツールの「Console」にぶち込めば動く

var construction = '';
var elems = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
elems.forEach(elm => {
  var space = '';
  var num = elm.nodeName.replace(/[^0-9]/g, '');// 見出しタグの番号取得
  for (var i = 0; i < num; i++){space+=' '};// 読みやすいよう字下げ
  construction += space + elm.nodeName.toLowerCase()+':'+elm.textContent.replace(/\s+/g, '') + '\n';
});
console.log(construction);

↓ 出力結果

 h1:これはh1テスト
  h2:これはh2テスト
   h3:これはh3テスト
    h4:これはh4テスト
   h3:これはh3テスト
    h4:これはh4テスト
  h2:これはh2テスト
    h4:これはh4テスト

見やすい