目次
はじめに
クライアントサイド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を使うシーンも多いですが、覚えておくことに越したことはないですかね〜