2014年9月12日金曜日

window.onloadの使いどころ

セレクタAPI{document.querySelector("#id名")}でHTML側のフォームタグをオブジェクトとして引っ張ってくる時、<scirpt>の位置によってはセレクタAPIが使えないことがあります。

<html>
<head>
<script>

var form = document.querySelector("#id名");

</script>
</head>
<body>

<input type="text" id="{id名}">

</body>
</html>

このように書くと<body>より前だとformタグは取得できないため、
(HTMLの記述の末尾に同様の記述を行ったら読み込めます。理由は最後で)

<script>
window.onload = init;

function init(){
    //ここでvar 変数をすると、この変数はこの関数の中だけでしか使えない
    var form = document.querySelector("#id名");
}
</script>

このように関数の中でdocument.querySelector("#id名")の記述を書いて、window.onloadでフォームのオブジェクトを取得する関数を実行します。しかし、この書き方ではinit関数の中でしかフォームのオブジェクトを使えません。ここでスコープを利用して、

<script>
//ここで変数を定義すれば、すべての箇所で使用可能となる
var form;

window.onload = init;

function init(){
    form = document.querySelector("#id名");
}

function exec(){
    //他の関数の中でも取得したフォームのオブジェクトを使うことができます。
    form.value = "文字列の挿入";
}
</script>

initでフォームのオブジェクトを取得して、他の関数で使用することが可能となります。

追記
<html>
<head>
<script>
var form = document.querySelector("#id名");
</script>
</head>
<body>
<input type="text" id="{id名}">
</body>
</html>

<body>より前に<script>を設置し、そこでdocument.querySelector("#id名")でフォームが取得できない理由は、<script>タグ内でdocument.querySelector()を実行しても、取得したいフォームが下に記述されており、まだ読み込まれていないので、指定したIDのフォームは存在していないことになります。

<html>
<head>
</head>
<body>
<input type="text" id="{id名}">
</body>
<script>
var form = document.querySelector("#id名");
</script>
</html>

このように取得したいフォームより後でdocument.querySelector()を読み込むと指定のフォームが取得できるようになります。
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)