2014年9月12日金曜日

セレクタAPI document.querySelector()

document.querySelectorはHTMLからタグごと取得する関数(オブジェクトの中にある関数はメンバ関数もしくはメソッドと呼ぶ)です。querySelector()の引数(カッコの中にいれる値)は取得したいタグのidの前に#を付けて取得します。

<input type="text" id="form1" value="">だった場合、

var form1 = document.querySelector("#form1");で取得します。

form1を変数の中身が見れるconsole.logで調べてみると、
(console.log()はエラーの確認の際に開くコンソールで値の確認ができます)

<html>
<head>
<script>

window.onload = function(){
    var form1 = document.querySelector("#form1");
    console.log(form1);
}

</script>
</head>
<body>

<input type="text" id="form1" value="">

</body>
</html>

form1変数に入っている値は <input type="text" id="form1" value="">で、これはelementオブジェクトで、

form1 = {
    type: "text",
    id: "form1",
    value: ""
};

というように考えることができます。このように書き換えられることで、form1.valueのようにオブジェクトの特定のプロパティを指定して値を取得することができるようになります。

document.querySelector()は<input>タグだけではなく、他のタグも取得できます。たとえば、区切りを意味する<div>や<section>も取得できます。

<html>
<head>
<script>

window.onload = function(){
    var area = document.querySelector("#area");
    //ここにテキストを入れてますと表示されます
    console.log(area.innerHTML);
}

</script>
</head>
<body>

<div id="area">ここにテキストを入れてます</div>

</body>
</html>

この時、var area = document.querySelector("#area");で上の<div>から</div>までの値をすべて取得できます。<div>で囲まれたテキストは、innerHTMLプロパティに格納されており、area.innerHTMLで取得できます。areaをオブジェクト形式で書き直すと

area = {
    id: "area",
    innerHTML: "ここにテキストを入れています"
};


となります。

<div>で囲まれた箇所の文字列を書き換えたい時はarea.innerHTML = “変更したい文字列”;で行います。
投稿者 時刻:

0 件のコメント:

コメントを投稿

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