どうも、三町哲平です！
以前作成した【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を書いてみる
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><h1id="title">アムロ・レイ</h1></body></html>
このHTMLのアムロ・レイ表示をJavaScriptを用いて変更してみましょう！
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><h1id="title">アムロ・レイ</h1></body><!-- 追加 --><script>consth1=document.getElementById("title");console.log(h1);h1.textContent="シャア・アズナブル";</script></html>
h1は、アムロ・レイのままですが、JavaScriptの追加によりシャア・アズナブルになりました。
これが、DOM操作です。
何となくイメージは摑んでいただけましたでしょうか？
参考記事:JavaScriptでDOMを操作する方法【初心者向け】 | TechAcademyマガジン
さいごに
この記事は、上記でも書いてある通りDOM操作の何となくのイメージしか掴めないと思います。
詳しい方からすると何でDOM操作を解説する記事なのにツリー構造の説明がないの？ノードのノの字もないぞ！などといった意見はあると思いますが、対象は、そこでは無いことをご了承下さい。
さらにDOMについて気になった方は、個々人で調べてみることをお勧めします。
例えばこの記事とか↓が分かりやすいかと
JavaScript初心者でもすぐわかる！DOMとは何か？