解 説

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

JavaScriptの「Documentインターフェイス」はJavaScriptが記述、または読み込まれたHTMLのノード情報を保有しています。そのため、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記述例

javascriptコード

親要素へ移動

element.parentNode;

子要素へ移動

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

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

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

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

element.children;

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

JavaScriptコード

1つ前の要素へ移動

element.previousElementSibling;

1つ後の要素へ移動

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);

参考コード

属性の操作

属性の存在チェック

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’);

スタイルを直接指定

element.style.backgroundColor = ‘#ff0000’;

イベント関連の取得

イベントタイプの取得

イベントタイプを含んだ文字列を返します。

var eventType = event.type;

クリック位置の取得

イベントが発生した座標を示します。

*x座標の取得
var eventX = event.x;
*y座標の取得
var eventY = event.y;

DOM要素の取得

event.target プロパティは、イベントデリゲーションを実装するために使用できます。

var eventDOM = event.target;

子要素の取得

要素の子ノードのコレクションを返します。

var eventChild = event.target.childNodes;

親要素の取得

指定したノードのDOMツリー上での親を返します。

var eventParent = event.target.parentNodes;

ID名の取得

クリックしたDOM要素のID名の取得をします。
が、これはこのまま使うよりも、後述する、ID・class名の取得と一緒に使う事の方が多そうですね。

var eventID = event.target.id;

クラス名の取得

クリックしたDOM要素のclass名の取得をします。

var eventClass = event.target.className;

HTML要素の取得

var eventHTML = event.target.innerHTML;

最初の子要素の取得

ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ null を返します。

var eventFirstChild = event.target.firstChild;

最後の子要素の取得

ノードの子要素の内、最後のものを返します。

var eventLastChild = event.target.lastChild;

次の要素の取得

指定した要素の親の子(兄弟)のリスト内で、すぐ次に続く要素を返します。もし、指定した要素がリスト内で最後の要素であればnullを返します。

var eventNext = event.target.nextElementSibling;

要素の高さ取得

「element」に指定した要素の高さを返すプロパティ。

var eventHeight = event.target.offsetHeight;

要素の幅取得

「element」に指定した要素の幅を返すプロパティ。

var eventWidth = event.target.offsetWidth;

要素のスタイルの取得

var eventStyle = event.target.style;