◀︎ ▶︎

<html lang="ja">
<meta charset="utf-8">
<title>getElementsByTagName のサンプル - 3</title>
<style>
p{display:none;}
</style>

<h1>getElementsByTagName</h1>
<h2>サンプル - 3</h2>
<h3 style="color:red;">質問:</h3>
<h4 style="color:tomato;">getElementsByTagName で main を取得しているのに, なぜ &lt;p&gt; 部分が表示されないのか？</h4>

<main>
<p>ここは p です.</p>
<div>ここは div です.</div>
<span>ここは span です.</span>
</main>
<hr>

<script>
let 書き込み=document.getElementsByTagName("main");
for(let 愛=0;愛<書き込み.length;愛++) 
{document.write(書き込み[愛].innerText);}
</script>
<br>
<h3 style="color:darkgreen;">説明:</h3>
<h5 style="color:green;">CSS で p{display:none;} と記述したことで &lt;p&gt; のテキストが非表示になりますが, その後の記述で JavaScript → getElementsByTagName("main") を使用して &lt;main&gt; タグ内のテキストを取得したときに &lt;p&gt; のテキストが表示されない理由は getElementsByTagName("main") が「JavaScript の DOM 操作に影響を与える」からです.<br>もしも CSS が JavaScript よりも後に記述されていたら, このような現象は起こらない.</h5>
<h6 style="color:blue;">DOM(ドキュメント・オブジェクト・モデル) → 入れ子構造のこと.<br>
&lt;main&gt; タグは「親」で, その内部の &lt;p&gt; &lt;div&gt; &lt;span&gt; はすべて「子」として扱われます.<br>
入れ子になった &lt;p&gt; タグの内容は getElementsByTagName(" ") で取得しても, その後 CSS がページ内全体に影響するから表示されない,,, と考えておきましょう.</h6>

</html>