jQueryに依存してたプラグインをネイティブに書き換えたときに参考にした記事などまとめ。
// 要素を取得
document.getElementById('idName') // IDで取得
document.getElementByClassName('className') // クラス名で取得
document.getElementByTagName('h1') // タグ名で取得
document.querySelector('.container') // CSSセレクタで取得（最初のひとつだけ）
document.querySelectorAll('.container') //CSSセレクタで取得（全部）
// 親子兄弟要素を取得
const element = document.querySelectorAll('.container')
element.parentNode // 親要素を取得
element.firstElementChild // 最初の子要素
element.lastElementChild // 最後の子要素
element.children // すべての子要素
element.previousElementSibling // ひとつ前の兄弟要素
element.nextElementSibling // ひとつ後の兄弟要素
// 要素HTMLタグやテキストを取得
const element = document.querySelectorAll('.container')
element.outerHTML // 要素そのものを含むHTMLタグ
element.innerHTML // 子要素のHTMLタグ
element.innerText // 要素内の、画面に表示されるテキスト
element.textContent // 要素内の、HTMLタグを排除したテキスト（titleタグの中身なども返す）
// 要素の属性値を取得、変更
element.getAttribute('lang') // 引数の属性の属性値を取得
element.getAttribute.lang // こんな感じで直接参照もできる
element.setAttribute('lang', 'ja')
element.removeAttribute('lang')
// クラス名
要素のプロパティ メモ
element.tagName // タグ名を取得
文字列
jQueryからの逆引きメモ
// hasClass() の代替
if(element.classList.contains('classname') === true ) {}
// attr() の代替
setAttribute(), getAttribute(), removeAttribute()
// .on() の代替
addEventListener()
// .val() の代替
// addClass()
classList.add()
