今年はJSの使い手になりたくて基礎的で意外とわかってないことをまずは100個やってみる！！！
NO1 Array.at
配列を後ろから数えることができる
以下は参考ソース
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>要素１</li>
<li>要素２</li>
<li>要素３</li>
<li>要素４</li>
<li>要素５</li>
</ul>
<script>
const lis = [...document.querySelectorAll('li')];
console.log(lis);
const li = lis.at(-2);
li.style.background = 'red';
</script>
</body>
</html>
NO2 textContent VS innerText
以下の違いを理解していないとバグの原因になりかねない
- textContent:テキストを取得
- innerText:画面に表示されているテキストを取得
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span id="test">
textContent VS <span style="display: none;">Innner Text</span>
</span>
<div id="result">
結果：
</div>
<script>
const test = document.getElementById('test');
const result = document.querySelector('#result');
let text;
text = test.innerText;
result.append(text);
</script>
</body>
</html>
NO3 スプレッド構文(...)で簡単に配列を複製
参考コード以下
const arr1 = [10,20,30];
const arr2 = [40,50,60];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // 10,20,30,40,50,60
NO4 querySelectorAllは配列にすると便利
JSは配列のメソッドが豊富なので一度配列にすると扱いやすいのかもしれない。
// 配列にする
const lis = [...document.querySelectorAll('li')];
lis.filter(li => li.textContent == 'あたり')
.forEach(li => li.style.color='#ff0000');