okinawa

IT勉強メモ

JavaScriptでよく使いそうなメソッド

JavaScript

参考

確かな力が身につくJavaScript「超」入門 第2版 | SBクリエイティブ

JavaScript Primer - 迷わないための入門書 #jsprimer

www.naka-style-blog.com

イベントでよく使う関数

要素の取得

document.querySlector('要素名');
document.querySlectorAll('要素名'); //要素を全て取得します。配列で返ってきます
document.getElemntById('id名');
document.getElementsByClassName('クラス名');

ちなみに、要素を作る場合
document.createElement('要素名');
要素.cloneNode(true); //複製する場合はtrue

ノードの取得

親要素.childNodes //親要素の子ノードを取得
親要素.children //親要素の子要素を取得
親要素.firstChild //親要素の最初の子ノードを取得
親要素.lastChild //親要素の最後の子ノードを取得
親要素.firstElementChild //親要素の最初の子要素を取得
親要素.firstElementChild //親要素の最初の子要素を取得
小要素.parentNode //小要素の親ノードを取得
要素.previousSibling //要素の1つ前の兄弟ノードを取得
要素.nextSibling //要素の1つ後の兄弟ノードを取得
要素.previousElementSibling //要素の1つ前の兄弟要素を取得
要素.nextElementSibling //要素の1つ後の兄弟要素を取

要素の追加と削除

要素.appendChild(子要素);　//要素に小要素を追加します
要素.insertBefore(子要素, 指定要素); //要素の指定要素の前に子要素をいれます
要素.removeChild(子要素); //要素の子要素を削除します
要素.innerHTML = ''; //要素にHTMLを追加する

属性の変更

要素.textContent = 'text'; //要素の中身がtextになります
要素.style.color = 'red'; //要素の色がredになります
要素.classList.add('クラス名'); //要素にクラス名をつけます
要素.classList.remove('クラス名'); //要素のクラス名を除きます
要素.classList.contain('クラス名'); //要素にクラス名が付いているか判定します
要素.classList.toggle('クラス名'); //クラス名が付いていれば外し、付いてなければつけます
要素.setAttribute('属性名' '属性値') // class/id/name/styleなど色々なhtml属性に値を追加できて便利

要素の挿入に便利なメソッド 　insertAdjacentHTML

insertAdjacentHTML(‘挿入する場所’, ‘挿入する要素’);
document.getElementById('list').insertAdjacentHTML('beforeend', hoge)

'beforebegin' 取得した要素 の直前に挿入

'afterbegin' 取得した要素の子要素として挿入。すでに子要素がある場合はその前に挿入。

'beforeend' element 取得した要素の子要素として挿入。すでに子要素がある場合はその後に挿入。

'afterend' 取得した要素の直後に挿入

基本動作のキャンセル　preventDefault

function(event) { event.preventDefault(); }

form要素の読み取り

取得したform要素.読み取りたいフォーム部品のname属性.value

document.getElementById('form').word.value;

イベントオブジェクト　引数で渡すと関数で受け取れる

引数のeventにイベントオブジェクトが入る。

function(event) { }

ページ遷移

location.href = ‘https://google.com’

要素取得

querySelector(‘CSSのセレクタ’);

querySelector(‘div’);

要素全取得

querySelectorAll(‘CSSのセレクタ’);

querySelectorAll(‘div’); //全div要素を取得する

データ属性

htmlにdata-hogeと書いてJavaScriptからdataset.hogeでアクセスする仕組み。

参考

データ属性の使用 - ウェブ開発を学ぶ | MDN

<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
</article>
const article = document.getElementById('electric-cars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

HTMLタグの値読み取り・変更の基本

要素.属性

getElementById('electric-cars').src // 読み取り
getElementById('electric-cars').value //読み取り
getElementById('electric-cars').class = ‘new’; // 変更
getElementById('electric-cars').textContent = ‘abc’; // 変更

reduceメソッド

【JavaScript入門】初心者でも分かるreduce()の使い方とサンプル例まとめ | 侍エンジニアブログ

reduce() メソッドは、配列の各要素に対して (引数で与えられた) 関数を実行して、単一の出力値を生成します。

配列.reduce(function(累積値, 要素, インデックス番号, 配列) { })