【JavaScript】コードレシピ集を全ページやって新発見したこと集（前半）

console.log("現在の日時は", new Date(), "です");

> 現在の日時は Wed Feb 23 2022 19:53:11 GMT+0900 (Japan Standard Time) です

console.log(3 ** 3);

> 27

const num1 = 1;
const num2 = "1";
console.log(num1 == num2);
> true

console.log(num1 === num2);
> false

function myFunction(a, b) {
  if (a >= 100) {
    return a;
  }
  return b
}

function calcSum(...prices) {
  console.log(prices);
  let result = 0;
  for (const value of prices) {
    result += value;
  }
  return result;
}

const result2 = calcSum(5, 10, 15);
console.log(result2);

> [5, 10, 15]
> 30

const myFruit = "りんご";

switch (myFruit) {
  case "りんご":
  case "みかん":
    console.log("りんごかみかんです。");
    break;
  default:
    console.log("その他です。");
}

> りんごかみかんです。

for (let index = 0; index < 5; index++) {
  if (index % 2 === 0) {
    console.log(`偶数${index}`);
  }
  console.log(`奇数${index}`);
}
console.log("ループ終了");

>
偶数0
奇数0
奇数1
偶数2
奇数2
奇数3
偶数4
奇数4
ループ終了

for (let index = 0; index < 5; index++) {
  if (index % 2 === 0) {
    console.log(`偶数${index}`);
    continue;
  }
  console.log(`奇数${index}`);
}
console.log("ループ終了");

>
偶数0
奇数1
偶数2
奇数3
偶数4
ループ終了

function myFunction(flagA) {
  for (let index = 0; index < 5; index++) {
    if (flagA === true) {
      if (index % 2 !== 0) {
        console.log(index);
      }
    }
  }
}
myFunction(true);

>
1
2

function myFunction(flagA) {
  for (let index = 0; index < 5; index++) {
    if (flagA === false) {
      continue;
    }
    if (index % 2 === 0) {
      continue;
    }
    console.log(index);
  }
}
myFunction(true);

>
1
2

console.log(!true);

Math.round(3.51); // 4
Math.floor(3.51); //3
Math.ceil(3.51); //4
Math.trunc(3.51); //3

Math.random()

Math.random();
> 0.4854626544518239
Math.random();
> 0.815232779793388
Math.random();
> 0.1752862335043157
Math.random();
> 0.34156366210002886
Math.random();
> 0.22048083127887041

文字列.trim()

検索文字列が最初に現れるインデックス（位置）を返す
文字列.indexOf(検索文字列)

検索文字列が最後に現れるインデックス（位置）を返す
文字列.lastIndesOf(検索文字列)

正規表現にマッチする文字列のインデックス（位置）を返す
文字列.search(正規表現)

const myString = "JavaScriptのプロになろう";

const a1 = myString.indexOf("a");
console.log(a1)
> 1

const a1 = myString.lastIndexOf("a");
console.log(a1)
> 3

const a1 = myString.indexOf("s");
console.log(a1)
> -1

const myString = "JavaScriptのプロになろう";

const a1 = myString.indexOf("a", 2);
console.log(a1)
> 3

const myString = "JavaScriptのプロになろう";

指定した文字列が含まれてれいるかを調べる
const a1 = myString.includes("Script");
console.log(a1);
> true

指定した文字列で始まるかを調べる
const a2 = myString.startsWith("プロ");
console.log(a2);
> false

指定した文字列で終わるかを調べる
const a3 = myString.endsWith("なろう");
console.log(a3);
> true

const myString = "JavaScriptのプロになろう";
myString.charAt(10);

> の

"JavaScript".substr(4, 6);
> 'Script'

let phoneNumber = "0123-456-789";
phoneNumber.replace("-", "");
> '0123456-789'

let phoneNumber = "0123-456-789";
phoneNumber.replace(/-/g, "");
> '0123456789'

"JavaScript".split("");
> ['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't']

"JavaScript".split("a");
> ['J', 'v', 'Script']

/^iP/.test("iPhone");
> true

(1234.5678).toFixed(2)
> '1234.57'

(1234.5678).toPrecision(6);
> '1234.57'

(3).toPrecision(4);
> '3.000'

"9".padStart(2, "0");
> '09'

"fff".padEnd(6, "0");
> 'fff000'

encodeURI('http://example/マイページ')
> 'http://example/%E3%83%9E%E3%82%A4%E3%83%9A%E3%83%BC%E3%82%B8'

encodeURIComponent('http://example/マイページ')
> 'http%3A%2F%2Fexample%2F%E3%83%9E%E3%82%A4%E3%83%9A%E3%83%BC%E3%82%B8'

decodeURI("http://example/%E3%83%9E%E3%82%A4%E3%83%9A%E3%83%BC%E3%82%B8");

decodeURIComponent(
  "http%3A%2F%2Fexample%2F%E3%83%9E%E3%82%A4%E3%83%9A%E3%83%BC%E3%82%B8"
);

どちらも
> 'http://example/マイページ'

const alcohol = ["ワイン", "ビール"];
alcohol.unshift("ハイボール");
console.log(alcohol);

> ['ハイボール', 'ワイン', 'ビール']

const nuts = ["アーモンド", "くるみ", "カシューナッツ"];
const shiftedValue = nuts.shift();
console.log(shiftedValue);
console.log(nuts);

> アーモンド
> ['くるみ', 'カシューナッツ']

const nuts = ["アーモンド", "くるみ", "カシューナッツ"];
const poppedValue = nuts.pop();
console.log(poppedValue);
console.log(nuts);

> カシューナッツ
> ['アーモンド', 'くるみ']

const nuts = ["アーモンド", "くるみ", "カシューナッツ"];
nuts.splice(1, 1, 'マカダミアナッツ', 'ピーナッツ')
console.log(nuts)

> ['アーモンド', 'マカダミアナッツ', 'ピーナッツ', 'カシューナッツ']

取り出す数を2個とすると
const nuts = ["アーモンド", "くるみ", "カシューナッツ"];
nuts.splice(1, 2, 'マカダミアナッツ', 'ピーナッツ')
console.log(nuts)

> ['アーモンド', 'マカダミアナッツ', 'ピーナッツ']

const array1 = ["赤", "青", "緑"];
const array2 = array1.concat(["黄"]);
console.log(array2);

> ['赤', '青', '緑', '黄']

const array1 = ["赤", "青"];
const array2 = ["緑", "白"];
const array3 = [...array1, ...array2];
console.log(array3);

> ['赤', '青', '緑', '白']

myString = "こんにちは";

0console.log([...myString]);

> ['こ', 'ん', 'に', 'ち', 'は']

const array = [1, 2, 3];
console.log(array.join(""));
> 123

const array = [1, 2, 3];
console.log(array.join());
> 1,2,3

const array = ["赤", "青", "緑"];
const targetColor = array.find((element) => {
  console.log(element);
  return element === "青";
});

> 赤
> 青

const array = ["赤", "青", "緑"];
const targetColor = array.find((element) => {
  return element === "青";
});
console.log(targetColor);

> 青

const array = [1, 2, 3];
array.reverse();
console.log(array);

> [3, 2, 1]

const array = [1, 2, 2, 3];
array.sort((a, b) => {
  console.log(`a${a}`);
  console.log(`b${b}`);
  if (a < b) {
    return 1; //この場合、a, bの順にソート
  }
  if (a === b) {
    return 0; //この場合、そのまま
  }
  if (a > b) {
    return -1; //この場合、b, aの順にソート
  }
});

> [3, 2, 2, 1]

// a, bには以下のように値が入っています。
> a2
> b1
> a2
> b2
> a2
> b1
> a2
> b2
> a3
> b2
> a3
> b2

const array1 = ["Green", "blue", "Orange"];
array1.sort();
console.log(array1);

> ['Green', 'Orange', 'blue']

const array = ["Green", "blue", "Orange"];
array.sort((a, b) => a.localeCompare(b));
console.log(array);

> ['blue', 'Green', 'Orange']

const priceList = [100, 500, 900];

let sum = 0;

for (const price of priceList) {
  sum += price;
}

> 1500

const priceList = [100, 500, 900];

const sum = priceList.reduce((previous, current) => {
  console.log(`previous${previous}`);
  console.log(`current${current}`);
  return previous + current;
});

console.log(sum);

> previous100
> current500
> previous600
> current900
> 1500

const object1 = {
  id: 1,
  name: "taro",
};

const copiedObject1 = Object.assign({}, object1);

console.log(copiedObject1);

> {id: 1, name: 'taro'}

const object1 = {
  id: 1,
  name: "taro",
};

const copiedObject2 = { ...object1 };

console.log(copiedObject2);

> {id: 1, name: 'taro'}

const object3 = {
  id: 1,
  name: ["りんご", "バナナ", "みかん"],
};
const copiedObject2 = { ...object3 };

object3.name[2] = "オレンジ";

console.log(copiedObject2);

> 
const object3 = {
  id: 1,
  name: ["りんご", "バナナ", "オレンジ"],
};

const userData = {
  id: 1,
  name: "Tom",
  age: 30,
};

idに値があるか
console.log(userData.hasOwnProperty("id"));
> true

emailに値があるか
console.log(userData.hasOwnProperty("email"));
> false

console.log("id" in userData);
> true

const userData = {
  id: 1,
  name: "Tom",
  age: 30,
};

キー　id, name, age
バリュー　1, "Tom", 30
プロパティ　キーとバリューの括り

const userData = {
  id: 1,
  name: "Tom",
  age: 30,
};

console.log(Object.keys(userData));
> ["id", "name", "age"][

console.log(Object.values(userData));
> [(1, "Tom", 30)]

console.log(Object.entries(userData));
> [["id", 1], [("name", "Tom")], [("age", 30)]]

const object2 = { id: 10, name: "Tom" };
Object.freeze(object2);

console.log(Object.isFrozen(object2));
> true

console.log(typeof true);
> boolean

console.log(typeof 100);
> number

console.log(typeof "アーモンド");
> string

console.log(typeof null);
> object

console.log(undefined);
> undefined

console.log(typeof [1, 2, 3]);
> object

const today = new Date();

console.log(today instanceof Date);

> true

let a = 100;
let b = a;
a = 200;

console.log(a);
console.log(b);

> 200
> 100

let a = [1, 2, 3];
let b = a;
a[0] = 100;

console.log(a);
console.log(b);

> [100, 2, 3]
> [100, 2, 3]

const sum = 100 + Number("200");

console.log(sum);

> 300

// 文字列に変換
console.log(String(100));
> '100'

// 文字列を数値型（整数）に変換
console.log(parseInt("100"));
> 100

// 文字列を数値型（浮動小数点）に変換
console.log(parseFloat("314e-2"));
> 3.14

let a;
console.log(a);

const object = {};
console.log(object.b);

function myfunction(c) {
  console.log(c);
}
myfunction();

const date = new Date();
const year = date.getFullYear();
console.log(year);

> 2022

const date = new Date();
const day = date.getDay();
const dayList = ["日", "月", "火", "水", "木", "金", "土"];
console.log(date);
console.log(dayList[day]);

> Sat Mar 05 2022 20:21:12 GMT+0900 (Japan Standard Time)
> 土

const date = new Date();

const local = date.toLocaleString();
console.log(local);
> 3/5/2022, 8:37:48 PM

const localeDate = date.toLocaleDateString();
console.log(localeDate);
> 3/5/2022

const localeTime = date.toLocaleTimeString();
console.log(localeTime);
> 8:37:48 PM

const date = new Date();

const local = date.toLocaleString();
console.log(local);
> 2022/3/5 20:43:58

const localeDate = date.toLocaleDateString();
console.log(localeDate);
> 2022/3/5

const localeTime = date.toLocaleTimeString();
console.log(localeTime);
> 20:43:58

// 0付きで直接入力
const num1 = Date.parse("03/05/2022");
console.log(num1);
> 1646406000000

// 0無しで直接入力
const num2 = Date.parse("3/5/2022");
console.log(num2);
> 1646406000000

// toLocaleDateStringを使って値を持ってくる
const date = new Date();
const localeDate = date.toLocaleDateString();
const num3 = Date.parse(localeDate);
console.log(num3);
> 1646406000000

const num = Date.now()
console.log(num)
> 1646482295784

const date = new Date();
const getTime = date.getTime();
console.log(getTime);
> 1646486449241

// 文字列で日時を指定
const date1 = new Date("2022/01/01 10:00:00");
console.log(date1);
> Sat Jan 01 2022 10:00:00 GMT+0900 (Japan Standard Time)

const date2 = new Date("Sat Jan 01 2022 10:00:00");
console.log(date2);
> Sat Jan 01 2022 10:00:00 GMT+0900 (Japan Standard Time)

// 数値で指定
const date3 = new Date(2022, 0, 1, 10, 0, 0);
console.log(date3);
> Sat Jan 01 2022 10:00:00 GMT+0900 (Japan Standard Time)

// タイムスタンプで指定
const date4 = new Date(1640998800000);
console.log(date4);
> Sat Jan 01 2022 10:00:00 GMT+0900 (Japan Standard Time)

const date = new Date();
date.setFullYear(2022);
date.setMonth(0);
date.setDate(1);
date.setHours(10);
date.setMinutes(0);
date.setSeconds(0);
console.log(date);
> Sat Jan 01 2022 10:00:00 GMT+0900 (Japan Standard Time)

const date = new Date();
console.log(date);
> Sat Mar 05 2022 22:03:08 GMT+0900 (Japan Standard Time)

// 3月5日から10日減算します。
date.setDate(date.getDate() - 10);
console.log(date);
> Wed Feb 23 2022 22:03:08 GMT+0900 (Japan Standard Time)

const dateA = new Date("1994/01/06 10:00:00");
const dateB = new Date("2022/03/05 22:00:00");
const diffMSec = dateB.getTime() - dateA.getTime();
const diffHour = diffMSec / (60 * 60 * 1000);
console.log(diffHour);
> 246852

const alert = setInterval(() => {
  console.log("3秒経過");
}, 3000);

console.log(alert("入力内容は正しいですか？"));

console.log(confirm("入力内容は正しいですか？"));

console.log(prompt("血液型を入力してください", "◯型"));

console.log(window.innerWidth);
> 1440

console.log(window.innerHeight);
> 821

// Macbook Air 13インチのサイズです。

console.log(window.devicePixelRatio);

// MacBook Air (M1, 2020)での出力結果
> 2

// DellのS2319HSモニターでの出力結果
> 1

// iOSかAndroid端末であることを確認するには、ontouchstartが存在するかを調べる
"ontouchstart" in window;

// タッチ操作可能なWindowsかを調べる
navigator.pointerEnabled && navigator.maxTouchPoints > 0;
// pointerEnabledで、pointerの有効可否を判定
// maxTouchPointsで、タッチ可能なポイントの数が0より大きいことを判定

location.href = "https://almonta2021blog.com/";

console.log(location.href);

> chrome://new-tab-page/

location.reload();

// 戻る
history.back()

// 進む
history.forward()

// 指定した数だけ進む
history.go(-1)
// これは1個前に戻るを意味します

const win = window.open("https://ja.reactjs.org/");
win.focus();

window.scrollTo(0, 200);

document.title = 'リアクト'

// フォーカスがあたっているかを調べる場合
window.addEventListener("focus", () => {
  console.log("フォーカスがあたっている");
});

// フォーカスが外れているかを調べる場合
window.addEventListener("blur", () => {
  console.log("フォーカスが外れている");
});

const isOnline = navigator.onLine;
if (isOnline === true) {
  console.log("オンラインです");
} else {
  console.log("ネットワークに接続されていません");
}

window.addEventListener("online", () => {
  console.log("オンラインです");
});
window.addEventListener("offline", () => {
  console.log("ネットワークに接続されていません");
});

const button = document.querySelector(".button");
button.addEventListener("click", onClickButton);

function onClickButton() {
  console.log("クリックされました");
}

// アロー関数で記述すると
button.addEventListener("click", () => {
  console.log("クリックされました");
});

const option = {
  once: true,
};

const button = document.querySelector(".button");
button.addEventListener("click", onClickButton, option);

function onClickButton() {
  console.log("クリックされました");
}

const box = document.querySelector(".box");
box.addEventListener("click", onClickButton);

setTimeout(() => {
  box.removeEventListener("click", onClickButton);
}, 3000);

function onClickButton() {
  alert("boxがクリックされました");
}

window.addEventListener("DOMContentLoaded", () => {
  const boxNum = document.querySelectorAll(".box").length;
  console.log(`box要素の数は${boxNum}です`);
});

<script src="main.js" defer></script>;

const character = document.querySelector("#logo");

document.addEventListener("mousedown", () => {
  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", () => {
    document.removeEventListener("mousemove", onMouseMove);
  });
});

function onMouseMove(event) {
  character.style.left = `${event.clientX - 100}px`;
  character.style.top = `${event.clientY - 100}px`;
}

const sample = document.querySample('.sample')

sample.addEventListener('イベント名', 関数)

// 表示
document.visibilityState === "visible"

// 非表示
ocument.visibilityState === "hidden"

window.addEventListener("resize", () => {
  console.log("ブラウザーがリサイズされました");
});

const mediaQueryList = matchMedia('(min-width: 500px)')
console.log(mediaQueryList)

>
{
  matches: true
  media: "(min-width: 500px)"
  onchange: null
}

matchMedia('(min-width: 500px)').matches;
> true

const boxElement = document.querySelector(".logo");

boxElement.addEventListener("click", () => {
  boxElement.innerHTML = "クリックされました";
});

setTimeout(() => {
  boxElement.dispatchEvent(new Event("click"));
}, 1000);

document.querySelector(".foo").addEventListener("wheel", (event) => {
  event.preventDefault();
});

const logo = document.querySelector(".logo");

logo.addEventListener("dragstart", () => {
  console.log("ドラッグ開始");
});
logo.addEventListener("drag", () => {
  console.log("ドラッグ中");
});
logo.addEventListener("dragend", () => {
  console.log("ドラッグ終了");
});

const searchWindow = document.querySelector(".SDkEP");

searchWindow.addEventListener("dragenter", () => {
  console.log("ドラッグ中にマウスポインターが要素上に乗った");
});
searchWindow.addEventListener("dragover", () => {
  console.log("ドラッグ中にマウスポインターが要素に存在する");
});
searchWindow.addEventListener("dragleave", () => {
  console.log("ドラッグ中にマウスポインターが要素上から離れた");
});

const searchWindow = document.querySelector(".SDkEP");

searchWindow.addEventListener("dragenter", () => {
  console.log("ドラッグ中にマウスポインターが要素上に乗った");
});
searchWindow.addEventListener("dragover", () => {
  console.log("ドラッグ中にマウスポインターが要素に存在する");
});
searchWindow.addEventListener("dragleave", () => {
  console.log("ドラッグ中にマウスポインターが要素上から離れた");
});

// ドラッグアンドドロップするとページ遷移されるため、dragoverイベントのevent.preventDefault()でその挙動をキャンセルする。
searchWindow.addEventListener("dragover", (event) => {
  event.preventDefault("dropイベント");
});

searchWindow.addEventListener("drop", () => {
  console.log("dropした");
});

<div id="foo">SELECTOR</div>

const element = document.querySelector("#foo");
console.log(element);

> <div id="foo">SELECTOR</div>

<div id="foo">ID</div>

const element = document.getElementById("foo");
console.log(element);

> <div id="foo">ID</div>

    <div class="box">ボックス1</div>
    <div class="box">ボックス2</div>
    <div class="box">ボックス3</div>

const boxList = document.querySelectorAll(".box");
boxList.forEach((targetBox) => {
  console.log(targetBox);
});

>
<div class="box">ボックス1</div>
<div class="box">ボックス2</div>
<div class="box">ボックス3</div>

    <div class="box">ボックス1</div>
    <div class="box">ボックス2</div>
    <div class="box">ボックス3</div>

const className = document.getElementsByClassName("box");
console.log(className);

> HTMLCollection(3) [div.box, div.box, div.box]

    <div id="parent">
      <div id="child1">子要素1</div>
      <div id="child2">子要素2</div>
      <div id="child3">子要素3</div>
    </div>

const parentElement = document.querySelector("#parent");

console.log(parentElement.children);
>
[
  0: div#child1
  1: div#child2
  2: div#child3
  child1: div#child1
  child2: div#child2
  child3: div#child3
]
console.log(parentElement.firstElementChild);
> <div id="child1">子要素1</div>

console.log(parentElement.lastElementChild);
> <div id="child3">子要素3</div>

console.log(parentElement.firstElementChild.nextElementSibling);
> <div id="child2">子要素2</div>

console.log(parentElement.lastElementChild.previousElementSibling);
> <div id="child2">子要素2</div>

console.log(parentElement.firstElementChild.parentNode);
> 
<div id="parent">
  <div id="child1">子要素1</div>
  <div id="child2">子要素2</div>
  <div id="child3">子要素3</div>
</div>

    <div id="parent">
      <div id="child1">子要素1</div>
      <div id="child2">子要素2</div>
      <div id="child3">子要素3</div>
    </div>

    <div id="child4">子要素4</div>

const parent = document.getElementById("parent");
const child = document.getElementById("child4");

parent.appendChild(child);

const parent = document.getElementById("parent");
const child = document.getElementById("child4");
parent.insertBefore(child, parent.lastElementChild);

const child2 = document.getElementById("child2");
const child4 = document.getElementById("child4");

child2.before(child4);

>
子要素1
子要素4
子要素2
子要素3

const child2 = document.getElementById("child2");
const child4 = document.getElementById("child4");

child2.after(child4);

>
子要素1
子要素2
子要素4
子要素3

const parent = document.getElementById("parent");
const child3 = document.getElementById("child3");

const hasChildCheck = parent.hasChildNodes(child3);
console.log(hasChildCheck);

> true

    <div id="parent">
      <div id="child1">子要素1</div>
      <div id="child2">子要素2</div>
      <div id="child3">子要素3</div>
    </div>

const myParent = document.getElementById("parent");
const newChild = `<div class='new-child'>新しい子要素</div>`;

myParent.insertAdjacentHTML("beforebegin", newChild);
>
新しい子要素
子要素1
子要素2
子要素3

myParent.insertAdjacentHTML("afterbegin", newChild);
>
新しい子要素
子要素1
子要素2
子要素3

myParent.insertAdjacentHTML("beforeend", newChild);
>
子要素1
子要素2
子要素3
新しい子要素

myParent.insertAdjacentHTML("afterend", newChild);
>
子要素1
子要素2
子要素3
新しい子要素

const parent = document.getElementById("parent");
const child2 = document.getElementById("child2");

parent.removeChild(child2);

>
子要素1
子要素3

const child2 = document.getElementById("child2");

child2.remove();

>
子要素1
子要素3

const divElement = document.createElement("div");
console.log(divElement);

> <div></div>

    <div id="parent">
      <div id="child1">子要素1</div>
      <div id="child2">子要素2</div>
      <div id="child3">子要素3</div>
    </div>

const parent = document.getElementById("parent");
console.log(parent.cloneNode());

> <div id="parent"></div>

console.log(parent.cloneNode(true));

>
<div id="parent">
  <div id="child1">子要素1</div>
  <div id="child2">子要素2</div>
  <div id="child3">子要素3</div>
</div>

const parent = document.getElementById("parent");
const child2 = document.getElementById("child2");

const newChild = document.createElement("div");
newChild.textContent = "新しい子要素";

parent.replaceChild(newChild, child2);

>
子要素1
新しい子要素
子要素3

const child2 = document.getElementById("child2");

const newChild = document.createElement("div");
newChild.textContent = "新しい子要素";

child2.replaceWith(newChild);

>
子要素1
新しい子要素
子要素3

<div id='test-text'>このテキストを取得</div>

const getText = document.querySelector("#test-text");
console.log(getText.textContent);

<div id='test-text'>div要素のテキスト</div>

const getText = document.querySelector("#test-text");
console.log(getText.innerHTML);
> div要素のテキスト

getText.innerHTML = "<p>pタグに変更</p>";

> pタグに変更

<div id="test-text">
  <p>pタグに変更</p>
</div>

<div id='test-text'>div要素のテキスト</div>

const getText = document.querySelector("#test-text");
console.log(getText.outerHTML);
> <div id="test-text">div要素のテキスト</div>

getText.outerHTML = "<p>pタグに変更</p>";

> pタグに変更

<p>pタグに変更</p>

<img id="image" src="foo.png">

const imageElement = document.querySelector("#image");
imageElement.setAttribute("src", "bar.png");

<a id="test" href="example.com">リンク</a>

const testElement = document.querySelector("#test");
console.log(testElement.getAttribute("href"));

> example.com

<a href="example.com" target="_blank">リンク</a>

const aElement = document.querySelector("a");

aElement.setAttribute("rel", "noopener");

<a href="example.com" target="_blank" rel="noopener">リンク</a>

<div id="box">クラス属性</div>

const box = document.querySelector("#box");

box.classList.add("sample");

> <div id="box" class="sample">クラス属性</div>

box.classList.remove("sample");

> <div id="box" class="">クラス属性</div>

console.log(box.classList.contains("sample"));

> false

<div id="box">クラス有無切替</div>

const box = document.querySelector("#box");
box.classList.toggle("box");

> <div id="box" class="box">クラス有無切替</div>

<div id="box" class="box">クラス有無切替</div>

const box = document.querySelector("#box");

box.classList.toggle("box");

> <div id="box" class="">クラス有無切替</div>

<div id="box" class="box">スタイルの変更</div>

const box = document.querySelector("#box");
box.style.backgroundColor = "blue";

> <div id="box" class="box" style="background-color: blue;">スタイルの変更</div>

<div id="box" class="box" style="background-color: blue">スタイルの値を取得</div>

console.log(getComputedStyle(box).backgroundColor);

> rgb(0, 0, 255)