ハッシュ値の取得とイベント、カスタムデータ属性をもっているデータの取得,closestメソッドを使用して、指定したパラメータを持っている一番近い物を取得

ハッシュ値の取得
const id = window.location.hash.replace('#','');

ハッシュ変更時のイベント
window.addEventListener('hashchange', 実行したい関数);




カスタムデータ属性をもっているデータの取得
例:btn.dataset.goto;(要素.dataset.カスタムデータ属性名)で指定したカスタムデータ属性が持っているデータを取得
※カスタムデータに数値を指定している場合はStringとして取得されるのでparseIntで文字列に変換する必要がある。
parseIntの第二引数は何進数の文字を取得するどうかを指定する。


closestメソッドを使用して、指定したパラメータを持っている一番近い物を取得
例:クリックしたターゲットまわりで.btn-inlineを持っている一番近い物を取得する
要素名.addEventListener('click', e => {
const btn = e.target.closest('.btn-inline')
});


matchesメソッドを使用すると、イベントが発生する箇所を複数指定できる

elements.recipe.addEventListener('click', e => {
if(e.target.matches('.btn-decrease, .btn-decrease *')) {
// Decrease button is clicked
if(state.recipe.servings > 1) {
state.recipe.updateServings('dec');
recipeView.updateServingsIngredients(state.recipe);
}

} else if(e.target.matches('.btn-increase, .btn-increase *')) {
// Increase button is clicked
state.recipe.updateServings('inc');
recipeView.updateServingsIngredients(state.recipe);
}

console.log(state.recipe);
});


Array.fromを使用すると下記のように同じクラスを持った物を配列として取得できる
Array.from(document.querySelectorAll('.recipe__count'));