0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめに

現在、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についてもまだ全然学習できていないので、程よく深堀りながら勉強を進めていきます!

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?