DOM操作まとめ〜JavaScript | IT工房

JavaScriptでDOM操作を行うまとめです。

JavaScriptの「Documentインターフェイス」はJavaScriptが記述、または読み込まれたHTMLのノード情報を保有しています。そのため、console.log(document)でDOM情報を見ることができます。

console.log(document)

ドキュメント内の特定の要素にアクセス
DOMをトラバースする
要素の作成・追加
要素の削除
属性の操作
スタイル関連操作
イベント関連の取得

ドキュメント内の特定の要素にアクセス

「Documentインターフェイス」は、多くのプロパティやメソッドを持っており、これを活用して様々なDOM情報を取得したり変更したりすることができます。

id名の指定で要素にアクセス

通常はこれを使って特定の要素にアクセスします。

document.getElementById(‘id’);

class名の指定で要素にアクセス

Elementにsが付いてElementsとなっていることに注意。
返り値が「getElementById」のように一つの要素のオブジェクトではなく、複数の要素が配列形式で返ります。
「getElementById」と違って取り扱いが面倒になります。

document.getElementsByClassName(‘class’);

タグ指定して要素にアクセス

こちらも、Elementにsが付いてElementsとなっていることに注意

document.getElementsByTagName(‘div’);

jQueryのようにセレクタを指定して要素にアクセス

「querySelector()」はセレクターに合致した最初の要素ひとつを返します。
複数の要素が必要な場合は「querySelectorAll() 」を使います。

＊最初の一つを取得
document.querySelector(‘#main h1’);
＊　すべて取得
document.querySelectorAll(‘a’);

DOMをトラバースする

親子兄弟要素へのアクセス
「document.getElementById(‘id’)」で特定の要素にアクセスしておいて、そこを基準に移動する方法です。
記述方法は次の例を参考にしてください。

HTML記述例

<div id="main">
  <p>Hello</p>
  <p>Tahara</p>
</div>

javascriptコード

var element = document.getElementById('main');
element.lastElementChild.style.color = '#ff0000';

親要素へ移動

element.parentNode;

子要素へ移動

「document.getElementById(‘id’)」で特定の要素にアクセスしておいて、子要素に移動するには色々と動き方があります。
最初と最後の子要素に移動するのは以下のとおり直感的にわかりやすいです。

element.firstElementChild; //最初の子要素
element.lastElementChild; //最後の子要素

子要素リストの取得と使い方

けれども2番目とか3番目の子要素に移動する方法は「children」プロパティを使います。これは子要素全てを配列にした値が取れます。従って何番目の子要素に移動するかは配列のindexで指定することになります。

element.children;

次の参考例ではch配列のindexを変更して挙動を確認すると良いでしょう。この例では3番目のli要素が赤文字になります。
参考例

<ul id="main">
 <li>AAAA</li>
 <li>BBBB</li>
 <li>CCCC</li>
 <li>DDDD</li>
 <li>EEEE</li>
</ul>

JavaScriptコード

var ch = document.getElementById('main').children;
ch[2].style.color = '#ff0000';

１つ前の要素へ移動

element.previousElementSibling;

１つ後の要素へ移動

element.nextElementSibling;

要素の作成・追加

要素の作成

.textContentは新しく作成したタグの中にテキストを追加します。書き換える文字列がテキストのみの場合に使用。

var myp = document.createElement(‘p’);
myp.textContent = ‘hoge’;

最後の子要素として追加

appendChild() メソッドは、idなどで特定した親要素の中の子要素の末尾にパラメータに指定したタグを追加します。

element.appendChild(p);

最初の子要素として追加

指定のノードを現在のノードの子ノードとして参照要素の前に挿入します。

element.insertBefore(div, element.firstChild);

要素の直前に追加

指定のノードを現在のノードの子ノードとして参照要素の前に挿入します。

element.parentNode.insertBefore(div, element);

要素の直後に追加

指定のノードを現在のノードの子ノードとして参照要素の前に挿入します。

element.parentNode.insertBefore(div, element.nextSibling);

要素の削除

特定の子要素削除

DOM から子ノードを取り除きます。取り除いたノードを返します。

element.removeChild(child);

自分を削除

element.parentNode.removeChild(element);

子要素を全て削除

while(element.firstChild) element.removeChild(element.firstChild);

参考コード

element.textContent = null;

属性の操作

属性の存在チェック

hasAttribute() は指定の要素が指定の属性を持つか否かを示す真偽値を返します。

element.hasAttribute(‘href’);

属性の取得 (存在しない場合はnullもしくは空文字を返す)

getAttribute() は指定の要素について名前付けされた属性の値を返します。名前付けされた属性が存在しなければ、返される値は null もしくは “” (空文字列) となります。

element.getAttribute(‘href’);

属性を設定

指定の要素に新しい属性を追加します。または指定の要素に存在する属性の値を変更します。

element.setAttribute(name,value);
name は属性の名前を文字列で表現したものです。
value は属性の希望する新しい値です。

element.setAttribute(‘href’, ‘http://localhost:3000’);

属性を削除

removeAttribute は指定された要素から属性を削除します。

element.removeAttribute(‘href’);

スタイル関連操作

class追加

classList は読み取り専用のプロパティで、要素の class 属性における生きた DOMTokenList コレクションを返します。
addは指定されたクラスの値を追加します。クラスがすでに要素の属性に存在した場合は、無視されます。

element.classList.add(‘active’);

class削除

指定されたクラスの値を除去します。
ただし、存在しないクラスを削除してもエラーは発生しません。

element.classList.remove(‘active’);

classをトグル

引数が一つだけの場合は、クラスの値を切り替えます。つまり、クラスが存在すればそれを除去して false を返し、存在しなければ追加して true を返します。
二番目の引数が存在する場合は、二番目の引数が true と評価される場合は、クラスの値を追加し、値が false と評価される場合は、除去します。

element.classList.toggle(‘active’);