┌───────────────┬──────────────────────┐
│            jQuery            │                 VanillaJS                  │
├───────────────┼──────────────────────┤
│$('#ID属性')                  │document.getElementById('ID属性')           │
│                              ├──────────────────────┤
│                              │document.querySelector('#ID属性')           │
├───────────────┼──────────────────────┤
│$('.クラス')                  │document.getElementsByClassName('クラス')   │
│                              ├──────────────────────┤
│                              │document.querySelectorAll('.クラス')        │
├───────────────┼──────────────────────┤
│$('タグ')                     │document.getElementsByTagName('タグ')       │
│                              ├──────────────────────┤
│                              │document.querySelectorAll('タグ')           │
├───────────────┼──────────────────────┤
│.parent()                     │.parentNode                                 │
├───────────────┼──────────────────────┤
│.closest(条件)                │.closest(条件)                              │
├───────────────┼──────────────────────┤
│.find(条件)                   │.querySelectorAll(条件)                     │
├───────────────┼──────────────────────┤
│.html()                       │.innerHTML                                  │
├───────────────┼──────────────────────┤
│.html(値)                     │.innerHTML = 値                             │
├───────────────┼──────────────────────┤
│.text()                       │.innerText                                  │
│                              ├──────────────────────┤
│                              │.textContent                                │
├───────────────┼──────────────────────┤
│.text(値)                     │.innerText = 値                             │
│                              ├──────────────────────┤
│                              │.textContent = 値                           │
├───────────────┼──────────────────────┤
│.val()                        │.value                                      │
├───────────────┼──────────────────────┤
│.val(値)                      │.value = 値                                 │
├───────────────┼──────────────────────┤
│.css('スタイル')              │.style.スタイル     ※スタイルはキャメル文字│
├───────────────┼──────────────────────┤
│.css('スタイル','値')         │.style.スタイル = '値'                      │
├───────────────┤                                            │
│.css({'スタイル','値'})       │                    ※スタイルはキャメル文字│
├───────────────┼──────────────────────┤
│.addClass('クラス')           │.classList.add('クラス')                    │
├───────────────┼──────────────────────┤
│.removeClass('クラス')        │.classList.remove('クラス')                 │
├───────────────┼──────────────────────┤
│.toggleClass('クラス')        │.classList.toggle('クラス')                 │
├───────────────┼──────────────────────┤
│.attr('属性')                 │.attr('属性')                               │
├───────────────┼──────────────────────┤
│.attr('属性', '値')           │.attr('属性', '値')                         │
├───────────────┼──────────────────────┤
│.each(function(index, value) {│.forEach(function(value, index) {           │
│});                           │});                                         │
├───────────────┼──────────────────────┤
│.on('click', function(event) {│.addEventListener('click', function(event) {│
│});                           │});                                         │
├─────────┬─────┴──────────────────────┤
│$(function() {    │window.addEventListener('DOMContentLoaded', (event) => {│
│});               │});                                                     │
└─────────┴────────────────────────────┘