JavaScriptの要素を取得する方法一覧

スポンサーリンク

はじめに

クライアントサイドJavaScriptの要素を取得する方法についてまとめてみました。

クライアントサイドJavaScriptとは

ブラウザ環境で使うことを前提としているJavaScriptをクライアントサイドJavaScriptと呼ぶことが多いです。
クライアントサイドJavaScriptでは、外からなんらかの入力(刺激)を受け取って処理した結果をブラウザ上に反映させます。
つまり、HTMLをJacaScriptで操作します。

DOMとは

マークアップ言語(HTMLやXML)をJavaScriptを操作する仕組みを頭が良い人が作ってくれました。
それがDOM(Document Object Model)と呼びます!
まぁJavaScriptだけではなく、現在利用されている言語のほとんどが使っているみたいですが笑

DOMという名前の通り、文書に含まれる要素などを全てオブジェクトとみなします。
「オブジェクトの集合体(階層関係)が文書そのもの」と捉えます。

ノードって何?

1個1個のオブジェクトをノードを呼びます。
具体的には以下です。

要素ノード属性ノードテキストノード
bodyタグ@charsetテキスト
pタグ@id改行

一番上存在をルートノード
親子の関係を親ノード、子ノード
同じ階層にある関係を兄弟のノード
って呼びます。

要素ノードを取得する

まずは取ってくるためにHTMLを書いておきます

<html>
    <head>
        <title></title>
        <meta></meta>
    </head>
    <body>
        <header>
            <ul id="list">
                <li><a href="#" class="sample">スーパー</a></li>
                <li><a href="#" class="sample">エンジニア</a></li>
                <li><a href="#" class="extra_sample">に</a></li>
                <li><a href="#" class="extra_sample">に僕はなる</a></li>
            </ul>
        </header>
        <main>
            <div class="top-wrapper">
                <p>現在の時刻<span id="result"></span></p>
            </div>
            <div class="middle-wrapper">
                <form>
                    <label for="time">時刻:</label>
                    <input id="time" name="time" type="text" size="10">
                </form>
            </div>
            <div class="bottom-wrapper">

            </div>
        </main>
        <footer></footer>
    </body>
</html>

①idを指定

getElementByidメソッド

document.getElementByid(id)

具体的扱い方

var current = new Date();
var result = document.getElementByid(id);
//返り値は<span id="result"></span>
result.textContent = current.toLocaleString();

②タグを指定

getElementsByTagNameメソッド

document.getElementsByTagName(name)

具体的扱い方

var list = document.getElemenstByTagName("a");

for (var i = 0, len = list.length; i < len; i++){
    console.log(list.item(i).href)
}

③name属性を指定

getElementsByNameメソッド

document.getElementsByName(name)

具体的扱い方

var current = new Date();
var nam = document.getElementsByName("time");
nam[0].value = current.toLocaleTimeString();

④class属性を指定

getElementsByClassNameメソッド

document.getElementsByClassName(name)

具体的扱い方

var list = document.getElementsByClassName("sample");

for (var i = 0, len = list.length; i < len; i++){
    console.log(list.item(i).href)
}

⑤セレクターを指定

querySelectorメソッド/querySelectorAllメソッド

document.querySelector(selector)

具体的扱い方

var list = document.querySelectorAll("#list .extra_sample");

for (var i = 0, len = list.length; i < len; i++){
    console.log(list.item(i).href)
}

getXxxxxメソッドとquerySelectorメソッドはどちらがいいのか

querySelectorメソッド/querySelectorAllメソッドは書き方一つであらゆる要素を取得できる超便利なメソッドですが、getXxxxxメソッドに比べると低速になります。
そのため、使い分けが必要です!

getXxxxxメソッドquerySelectorメソッド
特定のid値、class属性などで要素を検索できるより複雑な検索条件が必要

終わりに

要素を取得するメソッド一覧です!
これがあれば大体の要素を取得できるようになっているでしょう!
JavaScriptは長いのでJQueryを使うシーンも多いですが、覚えておくことに越したことはないですかね〜

タイトルとURLをコピーしました