jsメモ02

基本的にコードを書く時は、変更に強いように作る
コメントを先に書いてコードを書いていくと流れが掴める
コードを見直して関数とかに直すのも重要

dom

ドムツリー
その中にノード（html要素の最初と最後以外の改行や空白もノード）
htmlの要素を表すノードは、elementノード
テキスト、空白、改行は、textノード
parentノード
childノード
siblingノード

複数の要素の取得
document.querySelectorAll('p')  //[0]みたいに指定できる
とやると配列みたいに扱えるからforEachもOK
document.querySelectorAll('p').forEach((p ,index) => {
  p.textContent = `${index}番目のpです！`;
});
getElementByTagName('要素名');
getElementByClassName('クラス名');　　の二つも使える

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

の時、ul.childNodes　だと、改行も入る
ul.children　にすると要素のliだけ取得できる
ul.firstchild  ul.lastchild　も最初と最後の要素を取得できるけどこれも改行が入るから
ul.firstElementchild  ul.lastElementchild  で要素だけを取得
previousSibling やnextSiblingも同じ要領

if(targetNode.classList.contains('my-color')){ 　//true false で返す
  targetNode.classList.remove('my-color');
} else {
  targetNode.classList.add('my-color');
}
//targetNode.classList.toggle('my-color'); と同じ

html要素で作ったカスタムデータ属性のdata-属性を指定するには。。。
.dataset.独自の属性名で取得

要素の作成
document.createElement('li');
親要素のノード.appendChild(追加したい子要素のノード);

const item0 = document.querySelectorAll('li')[0];
const item2 = document.querySelectorAll('li')[2];
const copy = item0.cloneNode(true); //falseにすると空のli要素が作られる
const ul = document.querySelector('ul');
ul.insertBefore(copy, item2); //item2をコピーの前に追加

const item1 = document.querySelectorAll('li')[1];
item1.remove();
//古いプラウザなら　親Node.removeChild(削除するNode)

document.querySelector('input').value; 
で入力された値を取得

ラジオボタン
const colors = document.querySelectorAll('input');
let selectedColor;
colors.forEach(color => {
  if(color.checked === true){
  selectedColor = color.value;
  }
});

配列に要素を入れる時
const selectedColors = [];
selectedColors.push(color.value);

aタグをクリックしたときの動作をキャンセルする方法として
event.preventDefault();

文字列の配列の場合、表現される時勝手にカンマ区切りになるから、join()はなくてもいい

document.addEventListener('mousemove', (e) => { //eventのe(イベントオブジェクト)
  console.log(e.clientX, e.clientY) //マウスカーソルの座標
});
document.addEventListener('keydown', e => {  //keyを押した時
  console.log(e.key); //押したキーの値
});

のように、
focus, blur (マウスで押されてフォーカスされた時、その逆)
input, change (input は内容が更新されたとき(文字が打たれた時的な)、 change は更新が確定したときのイベント)
inputの時のtext(入力欄).value.length //文字数の取得

イベントの伝播
イベントは伝播されるので、li一つ一つにイベントを付け加えるより、
ul要素にaddEventListenerをつけたら、その中のliをclickしたら、、、というふうにも出来る
その時、ulはe.currentTarget  liはe.targetで取得できる（引数にe）

console.table(columns);    //配列の中の配列の表示

Date.now()  今の時間
.getMinutes()　の分数
.getSeconds()　の秒数
.getMilliSeconds()　のミリ秒数
.padStart(表示する桁数,  ’もしそれに満たない時の頭につける文字’)　//文字列にしか使えない

clearTimeout() …… setTimeout()でセットしたタイマーを解除する

buttonタグの.disabled = true;　でボタンを無効化でき、falseで有効にする

部分文字列の取得
.substring(引数)　引数の値以降の文字列を取得できる

if(this.img.src !== p1.img.src && this.img.src !== p2.img.src) {
　return true;
} else {
　return false;
}
と
return this.img.src !== p1.img.src && this.img.src !== p2.img.src;
は同じ　//三項演算子

オブジェクト指向のカプセル化
クラスの中のメソッドから他のクラスの値にアクセスする時、その元のクラスに値を返すメソッドを作り、そのメソッドを呼び出すことで取得