Result
Download
Reset
◀︎
▶︎
<html lang="ja"> <meta charset="utf-8"> <title>getElementsByTagName のサンプル - 5</title> <style> p{display:none;} div{display:none;} </style> <h1>getElementsByTagName</h1> <h2>サンプル - 5</h2> <main> <p>ここは p です.</p> <div>ここは div です.</div> <span>ここは span です.</span> </main> <hr> <script> let 書き込み_p=document.getElementsByTagName("main"); for(let 愛=0;愛<書き込み_p.length;愛++) {document.write(書き込み_p[愛].innerText);} let 書き込み_div=document.getElementsByTagName("div"); for(let 合=0;合<書き込み_div.length;合++) {document.write('<span style="color:red;">'+書き込み_div[合].innerText+"</span>");} </script> <h5 style="color:green;">1回目の JavaScript で "main" 内の内容を取得して表示させようとしますが, CSS の p{display:none;} と div{display:none;} が有効なので, この部分は表示されません. 一度 JavaScript の document.write( ) を使用すると DOM構造を取得したことがリセットされていますから, 2回目の JavaScript で "div" のテキストを取得して表示させる記述は有効になります.</h5> </html>
