まずonload、ジャバスクリプトをどのようなタイミング動かすか・HTMLの＜head＞内か＜/body＞のすぐ上かで 機能が異なる 解らないことが多い？
(A) HTMLでbody要素に「onload」属性を指定することで、読み込み完了時に処理をする方法
「ウェブページの読み込みタイミング」と「スクリプトを実行するタイミング」の関係としては、例えば以下のような場合があるでしょう。
１、前：ウェブページが読み込まれる前に何らかの処理をする。
２、直後：ウェブページのHTMLが読み込み完了できた時点で何らかの処理をする。
３、完了後：ウェブページ上に掲載されたあらゆるオブジェクト(画像など)の読み込みがすべて完了した後で何らかの処理をする。
「onload」というイベントが指し示すのは上記3の「ページ上のあらゆる物体の読み込みが完了した後」という時点です。
最も需要が多いのは上記2のケースのような気がします。これは「DOMContentLoaded 」というイベント名で表されます。
onLoad属性はブラウザからページを読み込むときに実行する処理を呼び出す仕組みです。<body onload="loadFunc()">について
onloadイベントの記述方法 <body onload="func()">と window.onload=function func(){ }について
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
onloadイベントをbodyタグで扱うには、ここでは関数を使用します。
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScript</title>
</head>
<body onload="func()">
<script>
function func(){
alert("onloadが実行されました。");
}
</script>
</body>
</html>
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
window.onloadを使うと以下のようになります。
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
window.onload=function func(){
alert("onloadが実行されました。");
}
</script>
</body>
</html>
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
headに書いたとき「head要素内」から「pタグ」のDOMを取得しようとしエラー
HTMLは上から下へ順番に読み込まれて解析されるからです。
つまり、JavaScriptを読み込んだ時点では、まだ「pタグ」が存在していないのに文字列を代入しようとしているため、「pタグなんてないよ！」というエラーになるわけです。
「onloadイベント」を利用するのがベストな選択となります その他注意点
JavaScriptを実行するトリガーとなるイベントに関するTIPS（コツ）です。
*trigger（トリガー）:引き金・きっかけになる出来事が起こったら自動的に特定の処理を起動するソフトウェアの仕組み
このコードでは上のジャバスクリプトでノード 狙い撃ちで赤色に変える！
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
document.getElementById('section-2').style.color = 'red';
------------------------------------------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<title>DOMとは「WEBページとプログラミング言語を繋ぐ役割を持つ」</title>
<style>
#section-1 {
background-color: #C8E6C9;
}
#section-2 {
background-color: #FFF9C4;
}
</style>
</head>
<body>
<section id="section-1">
<h2>セクション1</h2>
<p>子ノード1</p>
<p>子ノード2</p>
<p>子ノード3</p>
</section>
<section id="section-2">
<h2>セクション2</h2>
<p>子ノード1</p>
<p>子ノード2</p>
<p>子ノード3</p>
</section>
</body>
<script>
// ここにJavaScriptコードを書いていく
// ...
</script>
</html>
子ノードを指定するメソッドは以下のように定義されている。
var nodeList = elementNodeReference.childNodes;
var baseElement = document.getElementById('section-2');
var section2node2 = baseElement.childNodes[5];
section2node2.innerHTML = '子ノード2は変更されました';