はじめに
こんにちは！@70days_jsです。
再帰的関数の書き方を勉強しました。
タグ名を入力すると、ページ内にあるそのタグの数を自動で調べてくれます。
今日は50日目。(2019/12/7)
よろしくお願いします。
サイトURL
やったこと
動作としてはこんな感じです。↓
ページを開くとプロンプトが出るので、そこでタグ名を入力します。
入力したタグ名を持つタグの個数をDOMから自動で調べてくれます。
まず、htmlに適当にタグを書いていきます。↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="day50.js" defer></script>
<title>day50</title>
</head>
<body>
<h1>タグ数検索システム</h1>
<div>
<p></p>
<div>
<p></p>
<div><p></p></div>
<div></div>
</div>
</div>
</body>
</html>
今回はhtmlはなんでもいいです。
強いて言うならば、以下の部分を気をつけましょう。
<script src="day50.js" defer></script>
JavaScriptを読み込んでいるscriptタグですが、deferをつけています。
これをつけることで、htmlの読み込みが完了した後にJavaScriptを実行するようにしています。
今回はDOMを読み込んでタグを数えていくので、deferがあるのとないのとでは大きな違いになります。
JavaScript全文↓
let element = prompt("調べたいタグを入力してください ex: div");
element = element.toUpperCase();
console.log(element);
let wantToCheckNode = [];
//第一引数にdocument（DOM調査の開始場所）、第二引数に数を調べたいタグ名
function checkNodeTree(node, element) {
for (var i = 0; i < node.childNodes.length; i++) {
if (node.childNodes[i].nodeType === 1) {
if (node.childNodes[i].tagName === element) {
wantToCheckNode.push(node.childNodes[i]);
}
checkNodeTree(node.childNodes[i], element);
}
}
}
checkNodeTree(document, element);
console.log(wantToCheckNode);
document.body.innerHTML +=
element + "タグの数は" + wantToCheckNode.length + "個です。";
promptで調べたいタグ名をユーザーから取得します。
toUpperCase()を使い、タグ名を大文字にします。
これは要素のタグ名をtagNameで調べた時に、返ってくる値が大文字の状態だからです。
そして今回の主題である再帰はここです。↓
function checkNodeTree(node, element) {
for(var i=0;...){
if(){if(){}
checkNodeTree(node.childNodes[i], element);
}}}
関数checkNodeTree()の中で、自分自身であるcheckNodeTree()を呼び出しています。
内側にある関数は引数にiを使っていますね。
こうすることで微妙に値が変わっていくので、DOMツリーの全てを調べられます。
他ポイントとしては、
for文とchildNodesの組み合わせで子要素を全て調べられるとか、
nodetypeで要素のタイプが判別できたりとか（ちなみにELEMENTノードは1）です。
感想
再帰はうまく使えばかなり便利なものなんじゃないかと思いました。
今回は自分で作ったページ内のタグを調べるだけでしたが、これをベースに改良していけば、他サイトの分析を自分のやりたいようにできるなーとか思いました。
とにかく再帰、すごい。
最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。
参考
1.Node.nodeType - ノードの種類を表す整数 | DOM
参考にさせていただきました！ありがとうございます！