脱jQuery!DOM要素取得コードの素のJavaScriptへの書き換え

WEB制作
脱jQuery!DOM要素取得コードの素のJavaScriptへの書き換え

脱jQueryのためのDOM要素の取得コードをjQueryから素のJavaScriptへの書き換え例をまとめてみました。

目次

要素の検索

// jQuery
$('#id > div.class')

// id指定
document.getElementById('id');

// class指定
document.getElementsByClassName('class');

// タグ指定
document.getElementsByTagName('div');

// cssセレクタで指定
document.querySelector('#id > div.class'); //最初の一つだけ
document.querySelectorAll('#id > div.class'); //すべて取得

親要素の取得

// jQuery
$el.parent()

// Native
element.parentNode;

子要素の取得

// jQuery
$el.children()

// Native
element.firstElementChild; //最初の子要素
element.lastElementChild;  //最後の子要素
element.children; //子要素リスト

直前の兄弟要素の取得

// jQuery
$el.prev();

// Native
el.previousElementSibling;

直後の兄弟要素の取得

// jQuery
$el.next();

// Native
el.nextElementSibling;

祖先要素の検索

// jQuery
$el.closest("#id");

// Native
el.closest("#id");

子孫要素の検索

// jQuery
$el.find("#id");

// Native
el.querySelectorAll("#id");

iframe

// jQuery
$iframe.contents();

// Native
iframe.contentDocument;