JavaScriptのfirstChildについて - ひよっこPGのブログ

JavaScriptでHTMLの子ノード取得する時に使用する firstChildについて書きたいと思います。

さっそくなんですが一つ問題です。
下記のソースで、２カ所 console.logで値を出力していますがどんな値が出力されるでしょうか？

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title></title>
</head>

<body>
	<div id="test1">
		<span id="span1"></span>
	</div>
	<div id="test2"><span id="span2"></span></div>

	<script type="text/javascript">
		// 下記の二つで出力される値は何だと思いますか？？？
		
		var test1 = document.getElementById("test1");
		console.log(test1.firstChild.id); // ①

		var test2 = document.getElementById("test2");
		console.log(test2.firstChild.id); // ②
	</script>
</body>
</html>

var test1 = document.getElementById("test1");
console.log(test1.firstChild.id); // ①
//=> undefind

var test2 = document.getElementById("test2");
console.log(test2.firstChild.id); // ②
//=> span2

予想は、当たっていたでしょうか？

①の答えは : undefind
②の答えは : span2

理由を説明してみますね。

①と②どちらも、firstChild(子ノード)を取得しています。
ですが、①と②の子ノードは違います。

①の子ノードは改行
②の子ノードは ↓↓↓

<span id="span2"></span>

なので改行からidを取得しようする = undefind
からidを取得しようとする = span2
となります。

firstChildは、改行も一つの子ノードとして扱われる。
他にも空白(スペース)やタブなども子ノードとして扱われます。

つまり、プログラムを見やすくするためのスペースや改行がfirstChildの値を変えるということです。

下記のfirstChildのドキュメントでも説明されています。
Node.firstChild - Web API インターフェイス | MDN

自分は、本に載っているサンプルソースを少しインデント加えたり、スペース入れたりしたりしているのですが
その影響で、一部の機能が動かなくなってしまったんです。
理由を調べるために、比較エディターでサンプルソースと自分が変更したソースを比較していたのですが
とくに思い当たる点はない・・・。　

なぜだ・・・。

そこでいくつかの変数の値を出力してみると.....

cosole.log(....)
//=>undefind

ここだ！このundefindは、firstChildの部分だったということが分かり　メモしておこう・・・。

と思って書いたのがこの記事です。

頭の片隅にでも覚えておいてくれれば、幸いです＾ー＾
最後まで読んでくれてありがとうございました。