element、node、textの関係

HTMLタグ<  >で表される要素とテキストをそれぞれnodeと呼ぶ。
※IE以外のブラウザではHTMLタグの前後にある改行、タブ、スペースもテキスト扱いとなる。

elementとはHTMLタグである。

HTMLタグにはさまれたテキストはそのタグの直下にある。

   はNode、  はelement。 はnodeValue

<body>
 <h1>element、node、textの関係</h1>
<p>HTMLタグ<  >で表される要素とテキストをそれぞれnodeと呼ぶ。<br />
※IE以外のブラウザではHTMLタグの前後にある改行、タブ、スペースもテキスト扱いとなる。</p>
<p>elementとはHTMLタグである。</p>
<p>HTMLタグにはさまれたテキストはそのタグの直下にある。</p>
<p><a href="index.html">インデックスに戻る</a></p>
<br />
<br />

<script type="text/javascript">
	window.onload = function(){
		console.log(document.getElementsByTagName('body')[0].childNodes);
		// nodeであるbodyに含まれる子node全部
		 text, h1, text, p, text, p, text, p, text, script, text, p, text, br, text, br, text
		
		console.log(document.getElementsByTagName('body')[0].childNodes[0]);
		// nodeであるbodyに含まれる子node全部のうち1番めのnode
		text  空テキスト
		
		console.log(document.getElementsByTagName('body')[0].childNodes[1]);
		// nodeであるbodyに含まれる子node全部のうち2番めのnode
		h1
		
		console.log(document.getElementsByTagName('body')[0].childNodes[3]);
		// nodeであるbodyに含まれる子node全部のうち4番めのnode
		p
		
		console.log(document.getElementsByTagName('body')[0].childNodes[1].firstChild);
		// nodeであるbodyに含まれる子node全部のうち2番めのnodeのうち最初のnode
		テキスト
		
		console.log(document.getElementsByTagName('body')[0].childNodes[1].firstChild.nodeValue);
		// nodeであるbodyに含まれる子node全部のうち2番めのnode(=h1)のうち最初のnodeの中身
		element、node、textの関係
}
</script>

</body>

インデックスに戻る