JavaScriptのよく使うメソッドをまとめていきます。
基本文法
alert()
Window.alert()は、任意のメッセージを含むダイアログを表示し、そのダイアログを閉じるまで待機します。
console.log()
console.log()メソッドは、メッセージをウェブコンソールに出力します。 このメッセージは単一の文字列（オプションの置換値を含む）であることを示し、1つ以上の JavaScript オブジェクトであることを意味します。
prompt()
window.prompt()は、ユーザーにテキストを入力するように促すダイアログをオプションのメッセージと共に表示し、ユーザーがテキストを送信するかダイアログをキャンセルするまで待機するようにブラウザーに指示します。
Number()
Number（数値）の値37や-9.25のような浮動小数点数を指定します。
Numberコンストラクターは、数値を扱うための定数とメソッドを含んでいます。他の型の変数関数Number()を用いてnumを変換することができます。
データ構造
push()
配列の末尾に要素を追加します。
また返値として配列の新しい長さを返します。
pop()
配列から最後の要素を取り除き、その要素を返します。
unshift()
配列の先頭の要素を追加します。
また返値として配列の新しい長さを返します。
shift()
配列の先頭の要素を取り除き、その要素を返します。
forEach()
forEach()メソッドは、与えられた関数を、配列の各要素に対して一度ずつ実行します。
【使用例】
document.querySelectorAll('input').forEach((radio) => {
if (radio.checked === true) {
alert(radio.value);
}
});
filter()
filter()はTypedArray インスタンスのメソッドで、指定された関数で実装されているテストに合格した要素だけにフィルタリングされた、指定された型付き配列の一部のコピーを作成します。
【使用例】
{
const prices = [100, 150, 200];
const pricesOver150 = prices.filter((price) => {
return price >= 150;
});
console.log(pricesOver150);
}
join()
join()インスタンスのメソッドArrayでは、配列の全要素を順に連結した新しい文字列を指定します。区切り文字はカンマ、または文字列です。配列にアイテムが一つでもある場合は、区切り文字を使用せずにアイテムが返されます。
splice()
spliceメソッドとは、配列を表すArrayのメソッドで配列の要素を操作するメソッドです。
以下のような操作が可能です。
- 要素を取り除く
- 置き換える
- 追加する
第1引数は必ず必要です。
操作を開始する配列のインデックスを指定してください。
第1引数の指定のみの場合は、指定したインデックス以降を取り除く動作になります。
第2引数はオプションです。
指定した場合は、指定した数を第1引数で指定した要素以降から取り除きます。
第3引数以降はオプションです。
指定した場合は、その値が配列に追加され、追加する値の数だけ引数を増やすことができます。
DOM (Document Object Model)
querySelector()
Documentのセレクターまたはセレクター群に一致する、文書内の最初のメッセージElementが表示されます。
querySelectorAll()
DocumentのquerySelectorAll()メソッドは、指定された CSS セレクターに一致する文書中の要素のリストを示す静的なNodeList を返します。
結果にforEach()を使うことができます。
addEventListener()
EventTargetインターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびにエクスポートする関数を設定します。
【使用例】
{
document.querySelector('button').addEventListener('click', () => {
console.log('Clicked');
});
}
createElement()
HTML文書において、document.createElement()メソッドはtagNameでHTML要素を生成します。
【使用例】
const liElement = document.createElement('li');
liElement.textContent = 'Hanako';
classList.add()
addメソッドを使用した場合、HTMLにはclass属性が追加されます。
classNameで指定されたclassが追加されます。
【使用例】
elements.classList.add('className')
classList.toggle()
element（クラス名をチェックする対象）にクラス名があれば、クラス名を除去し、クラス名がなければ追加します。
getElementById()
getElementById() は Document インターフェイスのメソッドで、 id プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返します。
【使用例】
getElementById(id)
appendChild()
appendChild()はNodeインターフェイスのメソッドで、指定された親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していた場合は、 appendChild() はその子ノードを現在の位置から新しい位置へ移動します。
insertBefore()
insertBefore()はNodeインターフェイスのメソッドで、参照先ノードの前にこの親ノードの子としてノードを挿入します。
指定されたノードが既に文書中に存在した場合、 insertBefore()はこれを現在の位置から新しい位置に移動します。