投稿日: 投稿者: きわさ

JavascriptでHTMLの要素を取得する

こんばんは。きわさです。

今更ですが、javascriptでHTMLの要素を取得する方法について書きます。
javascriptを使うにあたってほぼ必須かと思います。

以下のようなHTMLを使って説明します。

<body>
    <div class="test">
        <input type="text" id="textbox" />
        <input type="button" value="button" />
    </div>
    <div class="test">
        <p>入力したテキスト: <span></span></p>
    </div>
</body>

idで要素を取得 – getElementById

まずはidを使って要素を取得する方法です。
個人的にはこれが一番よく使います。
テキストボックスの文字列を取得してみます。

function func1() {
    var obj = document.getElementById("textbox");
    var text = obj.value;
    alert(text);
    return;
}

テキストボックスの内容が表示されます。

タグ名で要素を取得 – getElementsByTagName

次はタグ名から取得する方法です。

function func2() {
    var objs = document.getElementsByTagName("input");
    for(var i = 0; i < objs.length; i++) {
        alert(objs[i].value);
    }
    return;
}

先ほどの getElementById と違い、 getElementsByTagName というように Elements が複数形になっています。
よって、取得するオブジェクトも配列で返ってきます。

function func3() {
    var objs = document.getElementsByTagName("span");
    if(objs.length > 0) {
        var textObj = document.getElementById("textbox");
        objs[0].innerHTML = textObj.value;
    }
    return;
}

なので、span タグのように、該当する要素が1つの場合も配列で返却されます。
これは、テキストボックスの内容をspan タグ内に出力しています。

クラス名で要素を取得 – getElementsByClassName

続いて、クラス名で要素を取得する方法です。
先ほどのタグ名の場合に近いです。

function func4() {
    var objs = document.getElementsByClassName("test");
    for(var i = 0; i < objs.length; i++) {
        for(var j = 0; j < objs[i].children.length; j++) {
            alert(objs[i].children[j].tagName);
        }
    }
    return;
}

objs にはクラス名 test の要素が入ります。
objs[i].children には、その要素の子要素が入っています。

cssセレクタで要素を取得 – querySelector, querySelectorAll

そして次は、cssセレクタで要素を取得する方法です。
該当する要素を1つを返す querySelector と、該当する要素すべてを配列で返す querySelectorAll があります。
cssセレクタについては以前の記事にも少し書いたのでこちらを見てみてください。
CSSセレクタにも色々あった

function func5() {
    var obj = document.querySelector("input[type='button']");
    alert(obj.value);
    return;
}

これは input タグのうち、type属性が button である要素を取得しています。

function func6() {
    var objs = document.querySelectorAll(".test");
    for(var i = 0; i < objs.length; i++) {
        alert(objs[i].className);
    }
    return;
}

これは、クラス名 test の要素を取得してそのクラス名を表示しています。
他にも、

function func7() {
    var objs = document.querySelectorAll("div > input");
    for(var i = 0; i < objs.length; i++) {
        alert(objs[i].tagName);
    }
    return;
}

div タグ直下の input タグの要素を取得したりすることもできます。

このように、要素を取得して値を参照したり変更したりといった操作は良く使うので、覚えておくと良いです。

スポンサーリンク