Skip to content

Commit 031c220

Browse files
chelprocchelproc
committed
add dom
1 parent 5d73686 commit 031c220

File tree

3 files changed

+70
-2
lines changed

3 files changed

+70
-2
lines changed

‎docs/day01/13.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ VSCodeで別のディレクトリを開き、Gitリポジトリを初期化し
1010
<head>
1111
<meta charset="utf-8">
1212
<title>課題</title>
13-
<link rel="stylesheed" href="style.css">
13+
<link rel="stylesheet" href="style.css">
1414
</head>
1515
<body>
1616
<div id="container">

‎docs/day02/12.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ for (const myFriend of myFriends) {
4040

4141
## ネストされた配列
4242

43-
配列の要素には、任意の値を格納できます。当然のことながら、配列自体を配列の中に格納することもできます。
43+
配列の要素には、任意の値を格納できます。当然のことながら、配列自体を配列の中に格納することもできます。このような配列を、**多次元配列**と呼びます。
4444

4545
```js
4646
const multidimensionalArray = [

‎docs/day02/13.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
title: DOM
3+
---
4+
5+
**DOM**（Document Object Model）は、HTML構造をJavaScriptのオブジェクトとして扱うための枠組みです。HTMLとCSSのすべての機能は、JavaScript側から操作することが可能になっています。
6+
7+
## DOM要素を取得する
8+
9+
HTML要素をDOMオブジェクトとして取得するもっとも単純な方法は、`document.getElementById`を使用する方法です。
10+
11+
```html title="HTML"
12+
<div id="element">Hello World</div>
13+
```
14+
15+
```js title="JavaScript"
16+
const element = document.getElementById('element');
17+
element.textContent = 'Hello DOM';
18+
```
19+
20+
`document.getElementById`を使用すると、HTML中に存在する特定のIDを持つ要素を取得することができます。このオブジェクトは`textContent`プロパティを持ち、HTMLタグの内部のテキストに対応します。
21+
22+
## DOM要素のスタイルシートを変更する
23+
24+
DOMオブジェクトの`style`プロパティは、すべてのCSSの値を含むオブジェクトです。オブジェクトのキーが、CSSのプロパティ名をキャメルケースに変換したものに対応します。
25+
26+
```js
27+
element.style.backgroundColor = 'red';
28+
```
29+
30+
CSSのプロパティ名である`background-color`は、内部にハイフンが含まれているため、`element.style.background-color`のように指定してしまうと、ハイフンが減算演算子として解釈されてしまいます。このため、DOMでは、CSSのプロパティ名はキャメルケースで扱うルールとなっています。
31+
32+
## CSSセレクタを使用して要素を取得する
33+
34+
`document.querySelector`を使用すると、CSSセレクタを使用して要素を取得することができます。
35+
36+
```js
37+
const element = document.querySelector('#container div:hover');
38+
```
39+
40+
また、`document.querySelectorAll`を用いると、CSSセレクタにマッチするすべての要素を、配列と同じような形式で取得することができます。
41+
42+
```js
43+
const elements = document.querySelectorAll('#container div');
44+
for (const element of elements) {
45+
element.style.color = 'red';
46+
}
47+
```
48+
49+
以上の例では、CSSセレクタ`#container div`にマッチするすべての要素の文字色が赤色に変更されます。
50+
51+
## 課題
52+
53+
```html
54+
<table>
55+
<tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th></tr>
56+
<tr><th>1</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
57+
<tr><th>2</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
58+
<tr><th>3</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
59+
<tr><th>4</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
60+
<tr><th>5</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
61+
<tr><th>6</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
62+
<tr><th>7</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
63+
<tr><th>8</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
64+
<tr><th>9</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
65+
</table>
66+
```
67+
68+
JavaScriptですべての`td`要素を取得し、九九の表を完成させましょう。なお、`document.querySelectorAll`の戻り値は、HTMLで出現した順番に並べられています。この事実を利用して構いません。

0 commit comments

Comments
 (0)