JavaScript便利帳

変数・定数

var

再代入可能／再宣言可能

let

再代入可能／ブロックスコープ

const

再代入不可／ブロックスコープ

element取得

ID

getElementById()

class

getElementsByClassName()

Web Storage

• localStorage：消さないとずっと
• sessionStorage：ページセッション内

取得

localStorage.getItem('hoge');

設定

localStorage.setItem('hoge','hogeの内容');

削除

localStorage.removeItem('hoge');

高さでトグル（+CSS）

1つの要素

#test{transition:max-height 0.5s;overflow:hidden;max-height:0px;}
#test.height{max-height:var(--open);}

let test = document.getElementById("test");
test.style.setProperty("--open",test.scrollHeight + "px");
function anime(){
	test.classList.toggle('height');
}

複数の要素

#test ul{transition:max-height 0.3s;overflow:hidden;max-height:0px;}
#test li.open ul{max-height:var(--height);}

let openul = document.querySelectorAll("#test ul");
let openli = document.querySelectorAll("#test > li");
openul.forEach(function(element){element.style.setProperty("--height",element.scrollHeight + "px")});
openli.forEach(function(element){element.addEventListener("click",function(){
	this.classList.toggle('open');
})});

テキストエリアとかに差し込み

let content = txt.value.substring(txt.selectionStart,txt.selectionEnd);
txt.setRangeText(btext + content + atext);
txt.focus();

色々

コンソールに出力

console.log();

IE11じゃ使えないやつ

replaceAll()

全部置き換えるやつ

for...of

HTMLCollectionもこれでサクッと処理できるやつ