DOM操作とは？【JavaScript】初心者の疑問 #JavaScript

どうも、三町哲平です！

以前作成した【JavaScript】分からない部分まとめてみたら最強だった件 - Qiitaの記事は、現在(2020/11/14 時点)なんと25,000PVを超えました！

本当に読んでくれた皆様には、感謝、感謝なのですが、実際私は、確かにJavaScriptの分からない部分はまとめたのですが、JavaScriptに関しては依然素人も素人...

もう超ド素人な訳なんです。

そんな私のJavaScriptの謎の中にDOM操作というものがあります。

JavaScriptの特徴の一つにDOM操作がありますよ！なんて言われても超ド素人からすれば、そのDOMが分からんよ...てな話

では、そのDOMについてのお話。

まずは、ググってみる

Google先生に頼ってみますか。

「ドム　とは」

え〜っと...

ドム (DOM) は、「ガンダムシリーズ」に登場する架空の兵器。有人操縦式の人型ロボット兵器「モビルスーツ」 (MS) の一種。初出は、1979年放送のテレビアニメ『機動戦士ガンダム』。
引用元:ドム - Wikipedia

なるほど...DOMは、ガンダムに関係あるんですね...。

ドムとは、テレビアニメ『機動戦士ガンダム』に登場するモビルスーツである。
引用元:ドム (どむ)とは【ピクシブ百科事典】

ピクシブ百科事典に答えが載っていましたね。

DOM操作っていうのは、モビルスーツの操作の事だったんですね。

いや〜勉強になりましたね。

では、また！

............

......

...て、おいおい

おふざけは、ここまで

本題です。

ここで終わってたら、流石に怒られますからね...（汗）

「DOM　とは」

求めていた記事が沢山出てきましたね。

DOMとは？

Document　文書、資料
Object　物体、対象
Model　模型、原型

Google 翻訳では、上記のような日本語訳になります。

文書オブジェクトモデル(DOM)とは、HTML文書およびXML文書のためのアプリケーション=プログラミング=インターフェイス(API)である。これは、文書の論理的構造や、文書へのアクセスや操作の方法を定義するものである。
引用元:DOMとは何か

なるほど...分からん

そんなあなたに↓

オブジェクトのような感じで、HTMLのタグなどにアクセスして、CSSを追加したり、あるいはタグを追加したり・削除したりすることが出来る形のこと
引用元:JavaScriptでDOMを操作する方法【初心者向け】 | TechAcademyマガジン

初心者なりに噛み砕いてみた

JavaScriptの特徴からDOM操作

ここでDOM操作を考えていく上で必要になるのが、JavaScriptって何ができるのかという事です。
JavaScriptと言えば、Node.jsによるバックエンド開発も有名ですが、やっぱりメインはフロントエンドに動きをつけてUI/UXの向上であり、
その時のJavaScriptを使って、HTML表示を変える処理こそが、DOM操作！

では、実践で確認していきましょう！

HTMLを書いてみる

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1 id="title">アムロ・レイ</h1>
</body>

</html>

このHTMLのアムロ・レイ表示をJavaScriptを用いて変更してみましょう！

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1 id="title">アムロ・レイ</h1>
</body>

<!-- 追加 -->
<script>
    const h1 = document.getElementById("title");
    console.log(h1);
    h1.textContent = "シャア・アズナブル";
</script>

</html>

h1は、アムロ・レイのままですが、JavaScriptの追加によりシャア・アズナブルになりました。
これが、DOM操作です。

何となくイメージは摑んでいただけましたでしょうか？

参考記事:JavaScriptでDOMを操作する方法【初心者向け】 | TechAcademyマガジン

さいごに

この記事は、上記でも書いてある通りDOM操作の何となくのイメージしか掴めないと思います。
詳しい方からすると何でDOM操作を解説する記事なのにツリー構造の説明がないの？ノードのノの字もないぞ！などといった意見はあると思いますが、対象は、そこでは無いことをご了承下さい。

さらにDOMについて気になった方は、個々人で調べてみることをお勧めします。
例えばこの記事とか↓が分かりやすいかと
JavaScript初心者でもすぐわかる！DOMとは何か？