生JSとjQueryの基本操作比較

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

```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クエリ
```js:javascript
document.querySelector('.item'); // 最初のノードを返す
document.querySelectorAll("#sub li"); // ノードリストを返す

// data属性で取得
document.querySelector(".item[data-index=one]")
```
```js:jQuery
$('#sub li')
```

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

```js:javascript
document.getElementById('main') // idで検索
document.getElementsByClassName('item') // class名で取得
```
```js:jQuery
$('#main')
```


###1-3. タグ名検索
```js:javascript
var div2 = document.getElementById("sub");

div2.getElementsByTagName("li") // タグ名検索
```
```js:jQuery
$('#sub li')
```



###1-4. 親
```js:javascript
var sub = document.getElementById('sub')

sub.parentNode    // ほぼ一緒
sub.parentElement // ほぼ一緒
```
```js:jQuery
$('#sub').parent()
```

###1-5. 子
```js:javascript
var children = document.getElementById('sub').children // 子
children.item(1)  // 1番目
children[1]       // 1番目

// TextNode含めたい場合childNodes。普通はchildren使えばok
document.getElementById('sub').childNodes
```
```js:jQuery
var $children = $('#sub').children() // 子
$children[1] // 1番目

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

###1-6. 兄弟（前）
```js:javascript
var children = document.getElementById('sub').children

children[4].previousElementSibling //兄弟（前）
```
```js:jQuery
var $children = $('#sub').children()

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

###1-7. 兄弟（次）
```js:javascript
var children = document.getElementById('sub').children

children[4].nextElementSibling // 兄弟（次）
```
```js:jQuery
var $children = $('#sub').children()

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

###1-8. 最初の子
```js:javascript
var node = document.getElementById('sub')

node.firstElementChild // 最初の子
```
```js:jQuery
$('#sub > :first') // 最初の子
```

###1-9. 最後の子
```js:javascript
var node = document.getElementById('sub')

node.lastElementChild // 最後の子
```
```js:jQuery
$('#sub > :last') // 最後の子
```

##2. Nodeの情報
### Nodeのテキスト
```js:javascript
var sub = document.getElementById("sub");

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

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

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

### Nodeのid
```js:javascript
document.getElementById("sample").id
```
```js:jQuery
$('#sample').attr('id')
```

### Nodeの存在確認
```js:javascript
if ( document.getElementById("sample") != null ) { }
```
```js:jQuery
if($('#sample').length){ }
```

### Nodeのタイプ
```js:javascript
var sub = document.getElementById("sub");

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

##3. Nodeの作成/追加/削除/置き換え
###3-1. Nodeの削除
```js:javascript
var sub = document.getElementById("sub");

sub.removeChild(sub.children[0])  // 子要素を指定して削除
```
```js:jQuery
$('#sub > :first').remove(); // 自分自信を削除
```

###3-2. Nodeの作成
```js: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);
```
```js:jQuery
var li = $('<li>').text('just added');
```

###3-3. Nodeの追加（末尾）
```js:javascript
var newDiv = document.createElement("div");
var sub = document.getElementById("sub");

sub.appendChild(newDiv) // Nodeの追加（末尾）
```
```js:jQuery
var li = $('<li>').text('just added');

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

###3-4. Nodeの追加（要素の前）
```js:javascript
var newDiv = document.createElement("div");
var sub = document.getElementById("sub");

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

###3-5. Nodeの置き換え
```js:javascript
// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換
parentDiv.replaceChild(sp1, sp2); // Nodeの置き換え
```
```js:jQuery
var $li = $('<li>').text('just added');

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

##4. classの操作
###4-1. class取得
```js:javascript
var sub = document.getElementById('sub')

sub.className // 文字列で取得
sub.classList // 要素の class 属性のトークンリスト
```
```js:jQuery
$node.attr('class'); // 文字列で取得
```

###4-2. class追加/削除/toggle
```js:javascript
var sub = document.getElementById('sub')

sub.classList.add('red')    // class追加
sub.classList.remove('red') // class削除
sub.classList.toggle('red') // classのtoggle
```
```js:jQuery
$('#sub').addClass('red')    // class追加
$('#sub').removeClass('red') // class削除
$('#sub').toggleClass('red') // classのtoggle
```

###4-3. 持っているか確認
```js:javascript
var ele = document.getElementById('sub');
ele.classList.contains('red') // => true
ele.classList.contains('blue') // => false
```
```js:jQuery
var ele = $('#sub')
ele.hasClass('red') // => true
ele.hasClass('blue') // => false
```

##5. 属性の取得/設定
```js:javascript
sub.getAttribute('class')           // 属性の取得
sub.setAttribute('class', 'blue')   // 属性の設定
```
```js:jQuery
$('#sub').attr('class')        // 属性の取得
$('#sub').attr('class', 'red') // 属性の設定
```

##6. 正規表現
```js:javascript
/#tab2/.test('#tab2') // => true

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



##7. イベント
###7-1. イベントの作成/リスナー/発火
```js: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); // イベント発火
```
```js:jQuery
$('#sub').on('colorChange', function(e){  // イベントリスナー
  $(e.target).removeClass('red');
  $(e.target).addClass('blue');
})
$('#sub').trigger('colorChange')  // イベント発火
```

##8.CSS操作
###8-1.CSS設定
```js:javascript
var sub1 = document.getElementById('sub1');
sub1.style.color = 'blue';
```
```js:jQuery
$('#sub1').css('color', 'blue');
```

##9. dataset
```js:javascript
var main = document.getElementById('main');
console.log(main.dataset.hoge)
```

```js:jQuery
$('#main').data('hoge')
```

## 10.form関連
### checkedの確認
```html: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>
```
```js:javascript
var check_element = document.querySelector("input[value='1']");
console.log(check_element.checked)

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

```js:jQuery
$("input[value='1']").prop("checked")
```
### select
```js:jQuery
$select = $('select')
$('option:selected', $select).val()
```

## 11. 型を確認する
```js:javascript
console.log(typeof(new String('hoge')));  // object
```

```js:jquery
console.log($.type(new String('hoge')));  // string
```