はじめに
React実践の教科書3章を再読したので備忘録としてまとめました。
3-1DOMへのアクセス
3-1で使用するソースコードを掲載します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="src/styles.css">
</head>
<body>
<h1 id="title">Hello World!</h1>
<div class="container">
<p>エリア1です。</p>
</div>
<div class="container">
<p>エリア2です。</p>
</div>
<script src="src/index.js"></script>
</body>
</html>
.container{
border: solid 1px #ccc;
padding: 16px;
margin: 8px;
}
javaScriptからDOMに対してアクセスする方法は複数ありますが、HTMLのような記述方法とCSSのような記述方法の2つに二分することができます。
例えば
<h1 id="title">Hello World!</h1>
を取得したいとき、
HTMLの記法でアクセスする方法
const title1=document.getElementById("title");
CSSの記法でアクセスする方法
const title2=document.querySelector("#title");
のようにそれぞれ記述することができます。
どちらの変数にも
<h1 id="title">Hello World!</h1>
が値として入ります。
では、HTMLやCSSの記法でクラス名が一致するすべての要素を取得したいとき、どのように記述すればよいでしょうか？
HTMLの記法
- 一致する最初のidを取得したいとき(idはHTML内で一意であるべき)
document.getElementById(id名)
- 一致するクラス名をすべて取得したいとき
document.getElementsByClassName(クラス名)
CSSの記法
- 一致する最初のidやクラス名を取得したいとき
document.querySelector(id名)
- 一致するクラス名をすべて取得したいとき
document.querySelectorAll(クラス名)
3-2 DOMの作成、追加、削除
3-1ではDOMの要素をHTMLから取得していましたが、JSから新しくDOMを作成してHTMLに追加を行ったり、HTMLからDOMの要素を削除することもできます。
DOMの作成と追加
例として先ほどのエリア1のdivの中にボタンを追加してみます。
const buttonEl=document.createElement("button");
buttonEl.textContent="ボタン";
これでボタンのDOMを作成できました。
続いて、エリア1のdivのDOMを取得します。
const divEl=document.querySelector(".container");
取得したDOMの子要素としてボタンを追加します。
divEl.appendChild(buttonEl);
これでエリア1のdiv内にボタンを追加できました。
まとめ
DOMは入れ子の構造になっていて、JSから操作を行うことで変化を加えることができる。
Reactなどのフレームワークを使っているとDOMをあまり意識することはないが、フロントエンドの本質はDOMである。