---
layout: "@/layouts/MarkdownLayout.astro"
---

import RenderFile from "@/components/RenderFile";
import RenderHtml from "@/components/RenderHtml";

export const title = "JavaScriptでHTMLを操作する";

# {title}

## TOC

HTML要素を取得して、イベントを設定するところまで学習しました。  
しかし、これだけでは「ボタンを押したらアラートが出る」くらいのことしかできません。

もっとWebページらしく、動的に画面の表示が変わるようにしてみましょう！

<br />

## HTMLの中身を書き換える

まずは、画面に表示されている文字を書き換えてみましょう。

```html file=public/sample/js/edit-content.html
public/sample/js/edit-content.html
内容を取得できませんでした
```

<RenderFile path="public/sample/js/edit-content.html" />

<br />

ボタンを押すと、`こんにちは！`が`こんばんは！`に変わりましたね。

コードを見てみましょう。

```html file=public/sample/js/edit-content.html {9}
public/sample/js/edit-content.html
内容を取得できませんでした
```

重要なのは `text.textContent = "こんばんは！"` の部分です。  
取得した要素の `textContent` というプロパティに、新しい文字列を代入することで、表示されている文字を書き換えることができます。

### innerHTML

文字だけでなく、HTMLタグも含めて書き換えたい場合は `innerHTML` を使います。

```js
// 太文字になる
element.innerHTML = "<b>こんばんは！</b>";
```

ただし、`innerHTML` はセキュリティ上のリスク（XSSなど）があるため、単に文字を書き換えるだけであれば `textContent` を使うのが基本です。

<br />

## スタイルを変更する

次は、JavaScriptからCSSを操作して、色や大きさを変えてみましょう。

```html file=public/sample/js/change-style.html
public/sample/js/change-style.html
内容を取得できませんでした
```

<RenderFile path="public/sample/js/change-style.html" />

<br />

ボタンを押すと文字が赤くなり、太字になりました。

```html file=public/sample/js/change-style.html {9-10}
public/sample/js/change-style.html
内容を取得できませんでした
```

`text.style.color = "red"` のように、要素の `style` プロパティを通じてCSSを操作できます。

注意点として、CSSのプロパティ名が少し変化します。  
CSSでは `font-weight` のようにハイフン区切り（ケバブケース）ですが、JavaScriptでは `fontWeight` のようにcamelCase（キャメルケース）になります。

- `background-color` → `backgroundColor`
- `font-size` → `fontSize`
- `margin-top` → `marginTop`

<br />

## クラスを操作する

スタイルを直接 `style` で書き換えるのも良いですが、変化させたいスタイルが多いと大変です。  
あらかじめCSSでクラスを用意しておき、JavaScriptでそのクラスをつけ外しする方が一般的です。

```html file=public/sample/js/toggle-class.html
public/sample/js/toggle-class.html
内容を取得できませんでした
```

<RenderFile path="public/sample/js/toggle-class.html" />

<br />

`classList` という機能を使うと、クラスの追加や削除が簡単にできます。

```html file=public/sample/js/toggle-class.html {17}
public/sample/js/toggle-class.html
内容を取得できませんでした
```

`classList` には以下のようなメソッドがあります。

- `add("クラス名")`: クラスを追加する
- `remove("クラス名")`: クラスを削除する
- `toggle("クラス名")`: クラスがあれば削除し、なければ追加する

今回の例では `toggle` を使っているので、ボタンを押すたびに背景色がついたり消えたりしています。

<br />

## まとめ

JavaScriptを使ってHTMLを操作する基本的な方法を見てきました。

1. `textContent` で文字を書き換える
2. `style` で見た目を直接変える
3. `classList` でクラスを付け外しして見た目を変える

これらを組み合わせることで、ユーザーの操作に合わせて動的に変化するWebページを作ることができます。