生JSとjQueryの基本操作比較

jQueryに頼らずJSを書けるようになるために整理しました。
テストに使ったHTMLは以下です。

使ったHTML

    <p>jQueryの練習</p>
    <ul id="main" data-hoge="datahoge">
        <li>0</li>
        <li class="item" data-index="one">1</li>
        <li class="item">2</li>
        <li>
            3
            <ul id="sub" class="hoge" style="padding: 5px; border: solid 10px #0000ff;">
                <li><div>hoge</div></li>
                <li id="sub1">3-1</li>
                <li id="sub2" class="item">3-2</li>
                <li class="item">3-3</li>
                <li>3-4</li>
            </ul>
        </li>
    </ul>

##1. Nodeを取得

###1-1. 複雑なCSSクエリ

javascript

document.querySelector('.item'); // 最初のノードを返す
document.querySelectorAll("#sub li"); // ノードリストを返す

// data属性で取得
document.querySelector(".item[data-index=one]")

jQuery

$('#sub li')

###1-2. id, classで取得
querySelectorAllより、getElementByIdの方が高速

javascript

document.getElementById('main') // idで検索
document.getElementsByClassName('item') // class名で取得

jQuery

$('#main')

###1-3. タグ名検索

javascript

var div2 = document.getElementById("sub");

div2.getElementsByTagName("li") // タグ名検索

jQuery

$('#sub li')

###1-4. 親

javascript

var sub = document.getElementById('sub')

sub.parentNode    // ほぼ一緒
sub.parentElement // ほぼ一緒

jQuery

$('#sub').parent()

###1-5. 子

javascript

var children = document.getElementById('sub').children // 子
children.item(1)  // 1番目
children[1]       // 1番目

// TextNode含めたい場合childNodes。普通はchildren使えばok
document.getElementById('sub').childNodes

jQuery

var $children = $('#sub').children() // 子
$children[1] // 1番目

$('#sub').children('#sub1') // セレクタ指定（直下のみ）
$('#sub').find('#sub1')     // セレクタ指定（配下の要素全て）
$('#sub #sub1')             // findと同じ

###1-6. 兄弟（前）

javascript

var children = document.getElementById('sub').children

children[4].previousElementSibling //兄弟（前）

jQuery

var $children = $('#sub').children()

$($children[4]).prev() //　兄弟(前)

###1-7. 兄弟（次）

javascript

var children = document.getElementById('sub').children

children[4].nextElementSibling // 兄弟（次）

jQuery

var $children = $('#sub').children()

$($children[4]).next() //　兄弟(次)

###1-8. 最初の子

javascript

var node = document.getElementById('sub')

node.firstElementChild // 最初の子

jQuery

$('#sub > :first') // 最初の子

###1-9. 最後の子

javascript

var node = document.getElementById('sub')

node.lastElementChild // 最後の子

jQuery

$('#sub > :last') // 最後の子

##2. Nodeの情報

Nodeのテキスト

javascript

var sub = document.getElementById("sub");

sub.children[0].innerHTML   // 戻り値 => <div>hoge</div>
sub.children[0].textContent // 戻り値 => hoge

jQuery

$('#sub > :first').html() // innerHTMLと同じ結果
$('#sub > :first').text() // textContentと同じ結果

Nodeの高さ

javascript

var sub = document.getElementById("sub");
console.log(sub.clientHeight) // => 100
console.log(sub.scrollHeight) // => 100（スクロールを含んだ高さ）
console.log(sub.offsetHeight) // => 120

Nodeのid

javascript

document.getElementById("sample").id

jQuery

$('#sample').attr('id')

Nodeの存在確認

javascript

if ( document.getElementById("sample") != null ) { }

jQuery

if($('#sample').length){ }

Nodeのタイプ

javascript

var sub = document.getElementById("sub");

sub.nodeType // Nodeのタイプを数字で取得

##3. Nodeの作成/追加/削除/置き換え
###3-1. Nodeの削除

javascript

var sub = document.getElementById("sub");

sub.removeChild(sub.children[0])  // 子要素を指定して削除

jQuery

$('#sub > :first').remove(); // 自分自信を削除

###3-2. Nodeの作成

javascript

// innerHTML利用パターン
var newDiv = document.createElement("div");
newDiv.innerHTML = "<h1>Hi there and greetings!</h1>";

// createTextNode利用パターン
var sp1 = document.createElement("span");
var sp1_content = document.createTextNode("新しい span 要素");
sp1.appendChild(sp1_content);

jQuery

var li = $('<li>').text('just added');

###3-3. Nodeの追加（末尾）

javascript

var newDiv = document.createElement("div");
var sub = document.getElementById("sub");

sub.appendChild(newDiv) // Nodeの追加（末尾）

jQuery

var li = $('<li>').text('just added');

$('ul').append(li);    // Nodeの追加（末尾） 書き方１
li.appendTo($('ul'));  // Nodeの追加（末尾） 書き方２

###3-4. Nodeの追加（要素の前）

javascript

var newDiv = document.createElement("div");
var sub = document.getElementById("sub");

sub.insertBefore(newDiv, sub.children[1]) //Nodeの追加（要素の前）

jQuery

var li = $('<li>').text('just added');
$('#sub').children()[2].before(li)        // Nodeの追加（要素の前） 書き方1
li.insertBefore($('#sub').children()[2])  // Nodeの追加（要素の前） 書き方2

###3-5. Nodeの置き換え

javascript

// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換
parentDiv.replaceChild(sp1, sp2); // Nodeの置き換え

jQuery

var $li = $('<li>').text('just added');

$('#flute').replaceWith($li); // Nodeの置き換え

##4. classの操作
###4-1. class取得

javascript

var sub = document.getElementById('sub')

sub.className // 文字列で取得
sub.classList // 要素の class 属性のトークンリスト

jQuery

$node.attr('class'); // 文字列で取得

###4-2. class追加/削除/toggle

javascript

var sub = document.getElementById('sub')

sub.classList.add('red')    // class追加
sub.classList.remove('red') // class削除
sub.classList.toggle('red') // classのtoggle

jQuery

$('#sub').addClass('red')    // class追加
$('#sub').removeClass('red') // class削除
$('#sub').toggleClass('red') // classのtoggle

###4-3. 持っているか確認

javascript

var ele = document.getElementById('sub');
ele.classList.contains('red') // => true
ele.classList.contains('blue') // => false

jQuery

var ele = $('#sub')
ele.hasClass('red') // => true
ele.hasClass('blue') // => false

##5. 属性の取得/設定

javascript

sub.getAttribute('class')           // 属性の取得
sub.setAttribute('class', 'blue')   // 属性の設定

jQuery

$('#sub').attr('class')        // 属性の取得
$('#sub').attr('class', 'red') // 属性の設定

##6. 正規表現

javascript

/#tab2/.test('#tab2') // => true

// 文字列が含まれれば配列、文字列が含まれなければnullが返る
'#tab2'.match(/#tab2/) // => ["#tab2"]

##7. イベント
###7-1. イベントの作成/リスナー/発火

javascript

var event = new Event('colorChange');      // イベント作成
var sub = document.getElementById('sub');  // イベントのターゲット
sub.addEventListener('colorChange', function(e){  // イベントリスナー
  e.target.classList.remove('red');
  e.target.classList.add('blue');
});
sub.dispatchEvent(event); // イベント発火

jQuery

$('#sub').on('colorChange', function(e){  // イベントリスナー
  $(e.target).removeClass('red');
  $(e.target).addClass('blue');
})
$('#sub').trigger('colorChange')  // イベント発火

##8.CSS操作
###8-1.CSS設定

javascript

var sub1 = document.getElementById('sub1');
sub1.style.color = 'blue';

jQuery

$('#sub1').css('color', 'blue');

##9. dataset

javascript

var main = document.getElementById('main');
console.log(main.dataset.hoge)

jQuery

$('#main').data('hoge')

10.form関連

checkedの確認

HTML

<form action="cgi-bin/abc.cgi" method="post">
  <p>
    <input type="checkbox" name="riyu" value="1" checked="checked">面白い
    <input type="checkbox" name="riyu" value="2">役に立つ
    <input type="checkbox" name="riyu" value="3">いまいち
  </p>
  <p><input type="submit" value="送信する"></p>
</form>

javascript

var check_element = document.querySelector("input[value='1']");
console.log(check_element.checked)

// :checkedを使った書き方
querySelectorAll('input:checked')

jQuery

$("input[value='1']").prop("checked")

select

jQuery

$select = $('select')
$('option:selected', $select).val()

11. 型を確認する

javascript

console.log(typeof(new String('hoge')));  // object

jquery

console.log($.type(new String('hoge')));  // string