JavaScriptでよく使うコードをメモ
要素を取得
要素を1つだけ取得
// 要素名で取得
document.querySelector('div');
// classを取得
document.querySelector('.example');
// idを取得
document.querySelector('#example');
// 属性で取得
document.querySelector('input[name="address"]');
// カンマ区切りで複数指定も可能
document.querySelector('#section01, #section03, #section04');
// 親要素を取得
document.querySelector('#exampke').parentElement;該当要素を全て取得
// 要素名で取得
document.querySelectorAll('main');
// classを取得
document.querySelectorAll('.example');
//属性で取得
document.querySelectorAll('input[type="number"]');
// 子要素を取得（擬似要素も指定可能）
document.querySelector('ul > li:last-child');
//チェックされた要素を取得
document.querySelectorAll('input[name="sample01"]:checked');リターンはNodeListのため、For eachで取り出す。
const btns = document.querySelectorAll('.btn');
btns.forEach((btn) => {
btn.addEventListener('click', () => {
console.log(index);
});
});以前は、getElementById() や getElemetnsByClassName() を使用していたけれど、今やquerySelectorが主流
ただ、id検索はgetElementById()の処理速度が最速になる
取得・設定できるプロパティ
| value | 値 |
innerHTML
| テキスト |
style.background
| スタイル |
| classList.add('example') | クラス追加 |
| classList.remove('example') | クラス削除 |
| classList.toggle('example') | クラス切替 |
onclick
=
| クリックした時 |
配列
// 配列の宣言
const fruits = ['apple', 'banana', 'orange'];
// 要素の追加
fruits.push('lemmon');
fruits.push('grape');
// 最初の要素の取り出し
let firstElement = fruits.shift();
// 最後の要素の取り出し
let lastElement = fruits.pop();
// 配列数の取得
console.log(fruits.length) // 出力結果：3
// 要素の取り出し(0番目から2つ取り出される）
let myFruits = fruits.splice(0, 2);
console.log(myFruits); // 結果：['banana', 'orange']
console.log(fruits); // 結果：['lemon']
// 配列の結合
const allFruits = fruits.concat(myFruits);
console.log(allFruits);
// 結果：['banana', 'orange', 'lemon']
// 要素の存在チェック
if (fruits.indexOf('apple') !== -1) {
console.log('fruitsにappleは存在する');
} else {
console.log('fruitsにappleは存在しない');
}配列の要素を取り出す （Array.forEach()）
const fruits = ['apple', 'orange', 'banana'];
fruits.forEach((data, index, array) => {
console.log(data, index, array);
});カンマで桁区切り
// ブラウザーの設定地域通貨での桁区切り
console.log(money.toLocaleString());
// 千円単位
const moneyThousand = Math.floor(money / 1000);
console.log(moneyThousand.toLocaleString());
// 百万円単位
const moneyBillion = Math.floor(money / 1000000);
console.log(moneyBillion.toLocaleString());