JavaScript 【Cheat sheet】【随時更新】

はじめに

学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。
入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、
卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

【機能 ・ 基本操作 ・ 用語一覧】

【DOM】　getElementById()とは

『getElementById』とは、指定したid値を持つ要素をElementオブジェクトとして返すメソッド。
HTMLタグの中から指定したidを取得して何らかの処理をしたい場合などに使用される。

getElementByIdで要素を取得するには以下のように記述。
idにはHTMLに記述した取得したいid要素を記述し、
同一idはHTML内において複数使用することは出来ないので、一意なid値である必要がある。

document.getElementById(id)

【DOM】 appendChild()とは

JavaScriptでプログラミングを行う際、動的にWebサイトに要素を追加したい場合に、
便利なのが『appendChild メソッド』。 ※要素の集合体をノードという。
『appendChildメソッド』を使うと、特定の親ノードの子ノードの最後にノードを追加することができる。
なお、追加しようとしたノードが既に存在していたら、既存のノードが新しいノードで置き換わる。
appendChild メソッドの書き方は以下のように記述。

var child = element.appendChild(child);

【DOM】createElement()とは

JavaScript で HTML 要素を動的に生成するには『createElement() メソッド』を使用する。
createElement() メソッドの書き方は以下のように記述し、タグ名には div や a などの HTML 要素名を指定する。

const element = document.createElement(タグ名)

crreateElement() メソッドで生成した要素を実際のHTML要素に追加することで
HTMLを動的に生成することができ、HTML 要素への追加には appendChild() メソッドなどを使用する。

HTML要素.appendChild(生成した要素)

DOMContentLoadedとは

DOMContentLoadedイベントは、HTMLページの読み込みが完了し、HTML のパース(解析)が完了して、
DOMツリーの構築が完了した時点で発生するイベントの事。
このイベントは、document オブジェクトで発生し、addEventListenerメソッドの引数として、
DOMContentLoadedを指定してイベントリスナーを登録してのみ利用できる。
DOMContentLoaded イベントは以下のように記述する。

document.addEventListener('DOMContentLoaded',
  function(){
    console.log('DOMツリーの解析が終わりました。');
  }
);

createElement()メソッドとは

JavaScriptで、HTML 要素を動的に生成するには createElement()メソッドを使用する。
タグ名には、divや　a　などの HTML 要素名を指定する。
createElement() メソッドの書き方は以下のように記述する。

const element = document.createElement(タグ名)

createElement() メソッドでHTMLを動的に生成する方法

crreateElement() メソッドで生成した要素を、実際の HTML 要素に追加することで HTML を動的に生成することができる。
HTML 要素への追加には appendChild() メソッドなどを使用する。

HTML要素.appendChild(生成した要素)

innerHTMLとは

html要素の中身を変更。Element オブジェクトの innerHTML プロパティ、
HTML または XML のマークアップを取得や設定する。
innerHTMLの書き方は以下のように記述する。

let changeHTML = document.getElementById("changeHTML");
changeHTML.innerHTML = '変えました。';

Node.textContentとは

Node のプロパティで、ノードおよびその子孫のテキストの内容を表す。

let text = someNode.textContent
someOtherNode.textContent = string