onload呼び出し
ページ表示するときにjavascriptを実行したい時に
document.addEventListener("DOMContentLoaded", function () {
console.log("hello, world!");
});
const func = () => {
console.log("hello, world!");
};
func();
DOMの作成
<body> 内に <div class="container">container</div> を作りたい時に
const divContainer = document.createElement("div");
divContainer.classList.add("container");
divContainer.textContent = "container";
document.body.appendChild(divContainer);
DOMの取得
html の class="container" 要素を取得したい時に
const container = document.querySelector(".container");
const containers = document.querySelectorAll(".container");
イベントの追加
html の class="button" にクリックイベントを付けたい時に
const button = document.querySelector(".button");
button.addEventListener("click", function() {
console.log("click!");
});
const buttons = document.querySelectorAll(".button");
buttons.forEach(button => {
button.addEventListener("click", function() {
console.log("click!");
});
});