はじめに
現在、RecursionでDOMを使って、プロフィールカードを作成するプロジェクトを進めています。DOMについてアウトプットしていきたいと思います。
DOMとは
DOM(Document Object Model)とは、簡単に言うとHTMLをJavascriptで操作できるようにしたものです。JavascriptでHTMLの<div>やclassを追加できるようになります。
DOM操作の基本(Javascriptのコード)
学習した内容のみのコードになります。
要素の取得
getElementById
const ele1 = document.getElementById(id);
// id : 取得したい要素のid値
要素内容の書き換え
element.innerHTML
let element = document.createElement("p");
element.innerHTML = "Hello World";
// HTMLでいうpタグの中に"Hello World"と入力するのと同じ意味
クラスの追加・削除
// 追加
let div1 = document.createElement("div");
div1.classList.add("bg-black")
// 削除
div1.classList.remove("bg-black");
要素の追加・削除
// 追加
div1.append(element);
// 削除
div1.remove(element);
さいごに
RecursionでCS基礎のコーディングをJavascriptで進めていたので、割とすんなり頭に入りました!CSSについてもまだ全然学習できていないので、程よく深堀りながら勉強を進めていきます!