G&W Design Life

JSのDOM操作取得方法

JSでDOMの操作を行う、様々な要素の所得方法

DOMとはDocument Object Modelの略語。htmlのタグを操作します。
例えば、サイトの写真ギャラリーやポップアップ画面、パララックスなどのアニメーションも行ったりします。
とにかくJSでDOM操作できると、Webデザインがもっとかっこよくなったり使いやすくなるんです!
DOM操作を行う上で様々な取得方法をまとめました。

IDで取得

document.getElementById(id)
//例
<p id="test">テキストテキスト</p>
document.getElementById('test')

基本的にサイト内にIDは一つですが、重複した場合は最初のIDのみ実行します。

Classで取得

document.getElementsByClassName(class)
//例
<h3 class="test">テキストテキスト</h3>
<p class="test">テキストテキスト</p>
document.getElementsByClassName('test')

目的の要素をまとめて取り出す事ができます。

HTMLタグで取得

document.getElementsByTagName(name)
//例
<p id="test">テキストテキスト</p>
document.getElementsByTagName('p')

name属性で取得

document.getElementByName(name)
//例
<input id="time" name="test" type="text" size="10" />
document.getElementByName('test')

一般的にはinputやsekectなどのフォーム要素でのアクセスで使用します。ただし単一での要素取得であればIDでの取得の方がコードがシンプルになります。
用途はラジオボタン・チェックボタンなど、name属性が等しい要素群を取得する場合に使うのが望ましい。

セレクターに合致した要素を取得する

複雑な条件で要素を取得できる
document.querySelector(selector)
document.querySelectorAll(selector)
セレクター式はCSSで利用されている記法のことで、スタイルを適用する対象を特定するためのしくみです。セレクター式を利用することで『id=”test”のimg要素で”sample”のClassを持っている要素』といったように複雑な条件での指定が可能です。

getメゾッドとqueryメゾッドの使い分け

・特定のidやClassなど要素を検索できる場合(queryより高速)
 →getメゾッド
・より複雑な条件で検索したい場合(getより低速)
 →queryメゾッド

指定した所を基点として取得するノードウォーキングのについて

文章全体から目的の要素を検索するには無駄が多くパフォーマンスが下がってしまう。
そこで指定した部分を基点にして様々な要素へアクセスできる方法があります。

◼️childNodesプロパティ
document.getElementByName(name)

//例
//JS
var s = document.getElementById('food');
//子ノードを所得
var opts = s.childNodes;
for(var i = 0, len = opts.length; i < len; i++){
 var opt = opts.item(i);
 if(opt.nodeType === 1){
  console.log(opt.value);
 }
};

//HTML
<form>
 <label for="food">
  <select id="food">
   <option value="ラーメン">ラーメン</option>
   <option value="餃子">餃子</option>
   <option value="焼肉">焼肉</option>
  </select>
   <input type="送信" value="送信" />
 </label>
</form>

console.logの結果
ラーメン
餃子
焼肉

要素直下の子ノードを取得するのはchildNodesプロパティの役割。
取得したオブジェクトをリストNodeListオブジェクトとして返します。
ただし、リストに含まれるノードには改行や空白までも取り出してしまうため要素ノード・テキストノードを確認する必要があります。

◼️nodeTypeの判定一覧
=================
戻り値     概要
—————–
1 = 要素ノード
2 = 属性ノード
3 = テキストノード
4 = CDATAセクション
5 = 実態参照ノード
6 = 実態宣言ノード
7 = 処理命令ノード
8 = コメントノード
9 = 文章ノード
10 = 文章型宣言ノード
11 = 文章の断片
12 = 記法宣言ノード
=================

ノードウォーキング:子要素を取得する別の方法

◼️firstChild / nextSibling プロパティ

var child = s.firstChild;
//子ノードが存在する間、ループを繰り返す
while(child){
 if(child.nodeType === 1){
  console.log(child.value);
}
 child = child.nextSibling;
}

lastChild / previousSibling プロパティを使ってもほぼ同じ要領で記述できます。

◼️firstElementChild / nextElementShibling プロパティ
firstElementChildは要素の配下の子要素を返し、nextElementShiblingは次の兄弟要素を返します。
firstChild / nextSibling プロパティと違って戻り値が要素オブジェクトに限定されるのでnodeTypeの判定は不要。

 var child = s.firstElementChild;
while(child){
 console.log(child.value);
 child = child.nextElementSibling;
}

Profile

エディトリアルデザイン・グラフィックデザインを経て数年前Webデザイナーに転身した30代デザイナーです。現代アートや地域とデザイン、ヒト・モノ・コト全般に興味があり。
イラストを描くのが好き。プログラミングはまだまだわからない事も多く初心者なんでメモ&学習としてこのブログを開設しました。どうぞよろしくお願い致します!

Recent Entries

Category