JavaScriptを基本からまとめてみた【1】【DOM】【随時更新】

はじめに

学習するに至った経緯

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

DOMとは

Document Object Model」の略。直訳すると、「ドキュメントを物として扱うモデル」。
JavaScriptでhtmlの要素を操作するための仕組みのこと。htmlなどを解釈し、木構造で表現したもの。
JavaScriptからHTMLドキュメントを操作するためのAPI（インターフェイス）。

DOMの特徴

① ツリー構造とも呼ばれる階層構造を取る。
② それぞれノードという言葉で説明される。
③ WEBページとJavaScriptなどのプログラミング言語とを繋ぐ。

基本的にDOMを追加していく場合は、

・document.elementById: (id要素を指定)
・createElement: (要素を作成)
・textContent: (要素の中身を定義)
・appendChild: (親要素に追加する)
の四点セットの流れが必要です。

参考サイト

JavaScript初心者でもすぐわかる！DOMとは何か？
【JavaScript: ToDoリスト】table要素を理解してToDoを表示させる方法