// セレクトで取得
var element = document.querySelector('h1');

// id属性で取得
var element = document.querySelector('#target');
var element = document.getElementById('target');

// クラス名で取得
var element = document.getElementsByClassName('text');

// 複数取得
var element = document.querySelectorAll('p');
element.forEach((p, index) => {
  p.textContent = `${index}番目のpです！`;
});

// クラスの書き換え
element.className = 'new-class';

// クラスの追加
element.classList.add('add-class');

// クラスの削除
element.classList.remove('add-class');

// クラスの付け外し
element.classList.toggle('add-class');

// クラスの有無を確認
element.classList.contains('add-class');

// クリック
element.addEventListener('click', () => { 処理の内容 });

// ダブルクリック
element.addEventListener('dblclick', () => { 処理の内容 });

// マウス移動
element.addEventListener('mousemove', () => { 処理の内容 });

// フォーム系のイベントでinputやchangeなどもある

<button>Run</button>
<h1 id="target" data-translation="Zenn">ゼン</h1>

document.querySelector('button').addEventListener('click', () => {
  const targetNode = document.getElementById('target');
  targetNode.textContent = targetNode.dataset.translation;
});

<button>Add</button>
<ul>
  <li>1番目のアイテム</li>
  <li>2番目のアイテム</li>
</ul>

document.querySelector('button').addEventListener('click', () => {
  const item2 = document.createElement('li'); // 要素を作る
  item2.textContent = '3番目のアイテム'; // 中身を作る
  const ul = document.querySelector('ul'); // 要素を追加する場所を設定
  ul.appendChild(item2); // DOMに追加する
});

<ul>
  <li>1番目のアイテム</li>
  <li>2番目のアイテム</li>
  <li>3番目のアイテム</li>
</ul>

document.querySelector('button').addEventListener('click', () => {
  const item0 = document.querySelectorAll('li')[0]; // 1番目のliを取得
  const copy = item0.cloneNode(true); // 複製する
  const ul = document.querySelector('ul');
  const item2 = document.querySelectorAll('li')[2];
  ul.insertBefore(copy, item2); // ulの中のitem2の前にcopyを追加する
});

const item1 = document.querySelectorAll('li')[1];
document.querySelector('ul').removeChild(item1);

Math.floor() // 小数点以下を切り捨て
Math.ceil() // 小数点以下を切り上げ
Math.round() // 四捨五入
element.toFixed() // 指定した桁数で表示

// 0以上1未満の乱数を生成
Math.random()
// 0~nの計算式
Math.floor(Math.random() * (n + 1))
// minからmaxでの計算式
Math.floor(Math.random() * (max + 1 - min)) + min

// 0~2の整数をランダムで生成
Math.floor(Math.random() * 3)
// 1~6の整数をランダムで生成
Math.floor(Math.random() * 6) + 1;

// 関数宣言は基本的に名前をつけて実行しないといけない
function a() {
  console.log('called');
}
a();
=> called

// 1度しか使わない関数はわざわざ名前をつけて実行する必要もないので`()`をつけて実行する。宣言された時に実行してますよって意味。
(function() {
  console.log('called');
})();
=> called

let b = function() {
  console.log('called');
}();
=> called

let c = (function () {
  console.log('called');

  let privateVal = 0;
  let publicVal = 10;

  function privateFn() {
    console.log('privateFn is called');
  }
  function publicFn() {
    console.log('publicFn is called: ' + privateVal++);
  }

  return {
    publicVal,
    publicFn
  };
})();

c.publicFn();
c.publicFn();
c.publicFn();
c.publicFn();

console.log(c.publicVal);