Help us understand the problem. What is going on with this article?

生JSとjQueryの基本操作比較

More than 1 year has passed since last update.

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の追加(末尾) 書き方1
li.appendTo($('ul'));  // Nodeの追加(末尾) 書き方2

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
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away