【Vanillajs】普段jQuery書いてる人がバニラjs使う時のためのメモ

// 要素全体の1番目の#idを選択
document.querySelectorAll('#id')[0];

// 要素全体の4番目の.classを選択
document.querySelectorAll('.class')[3];

// 要素全体の1番目のpタグを選択
document.querySelectorAll('p')[0];

// 1番目の#idから.classを選択する
let getDom = document.querySelectorAll('#id')[0];
getDom.querySelectorAll('.class');

// #idを取得
document.getElementById('id');

// .classを取得 (配列で入る)
document.getElementsByClassName('class');

// pタグを取得 (配列で入る)
document.getElementsByTagName('p');

// 全てのspanタグを選んでfor文で回す
let getSpan = document.querySelectorAll('span');
for(let i = 0; i < getSpan.length; i++){
 // ここに何か好きな処理
  console.log(getSpan[i]);
}

// 最初の.classを選んで display: none; へ
let getClass = document.querySelectorAll('.class')[0];
getClass.style.display = 'none';

// 最初のspanを選んで color: #000; へ
let getSpan = document.querySelectorAll('span')[0];
getSpan.style.color = '#000';

// 最初のspanを選んでcssのcolorの値を取得
let getSpan = document.querySelectorAll('span')[0];
getSpan.style.color

let getDom = document.querySelectorAll('div')[0];

// .classを追加
getDom.classList.add('class');

// .classを削除
getDom.classList.remove('class');

// .classをトグル（なかったら追加、あったら削除）
getDom.classList. toggle('class');

// 1番目のdivのクラス名を取得
let getDom = document.querySelectorAll('div')[0];
getDom.className;

// 1番目のdivタグのdata-nameを取得
document.querySelectorAll('div')[0].getAttribute('data-name');

// 1番目のimgタグのaltを取得
document.querySelectorAll('img')[0].getAttribute('alt');

// 1番目のaタグのhrefを取得
document.querySelectorAll('a')[0].getAttribute('href');

// 1番目のinputタグのvalueを取得
document.querySelectorAll('input')[0].value

// 1番目のinputタグに「バリュー」というvalueを代入
document.querySelectorAll('input')[0].value = 'バリュー';

// name='nameData'なinputタグを取得する
document.getElementsByName('nameData')[0]

// name='nameData'なinputタグのchecked状態を取得する（checked：true、なければ：false）
document.getElementsByName('nameData')[0].checked

// formタグのname='formName'なformを送信する
document.formName.submit();

// class="js-dom"のhtmlを取得
document.querySelectorAll('js-dom')[0].innerHTML

// class="js-dom"の中にhtmlを挿入する
document.querySelectorAll('js-dom')[0].innerHTML == '<p>DOMを挿入するぜ</p>';

// 1番目のspanタグをクリックした時に、function testFunction() を実行します。
let getSpan = document.querySelectorAll('span')[0];
getSpan.addEventListener('click', testFunction, false);

function testClickFunction(e){
  console.log( e.target);
}

// 1番目のspanタグをクリックした時に、functio()の中身を実行
let getSpan = document.querySelectorAll('span')[0];
getSpan.onclick = function(e) {
 console.log(e.target);
});