deve.K

Hello, Welcome

English

JavaScriptを扱う前のDOMの基礎 DOMとは?

f:id:dev04K:20211204184137j:plain

本日はJavaScriptを扱うには絶対条件で理解しておかなければいけないDOMに関して、私なりに初学者様用に説明致します。

独学で学び始めのうちは重要なポイントだけを抑えて勉強時間の短縮をしましょう。

DOM操作や取得方法は別としてまた記事にします。

DOMとは?

DOMとは『DocumentObjectModel(ドキュメント・オブジェクト・モデル)』の略称となります。

f:id:dev04K:20211204144522j:plain

JavaScriptを学ばれると言うことは既にご存知かも知れませんが。

Webの世界では、すべての『HTML』、『SVG』、『XML』などのWebページはドキュメントと呼ばれ

ドキュメントオブジェクトモデルは、これらの各Webページをツリーのような構造で表現し、

要素へのアクセスと管理を容易にします。

ここではHTMLを例として上げていきます。

『DOMノードツリー』を理解してもらうには『DOM』や『機能』を説明する際に言葉や専門用語だけではなく

『どのように見えているか』を示す、視覚的表現が一般的な説明方法となります。

『親』、『子』、および『兄弟』と呼ばれる要素間の関係を示し『Node(ノード)』と呼ばれる単位で表現します。

f:id:dev04K:20211204170331j:plain

このDOMツリーを形成した際の1つ1つのオブジェクト(ブロックで囲われてる)を『Node』と言います。

上記の画像で仮に親が『body』とするなら子ノードは『h1』や『p』などの下にある要素となります。

ドキュメントの子孫ノードと言ったりもします。

これはHTMLの基礎の時に聞きますね!

祖先要素と子孫要素の関係です、それと似ています。

DOMの『Node』には種類があります。

12の異なるノードタイプがありますが、少なめによく扱うノード要素に絞っていきます。

種類 概要
ドキュメントノード ドキュメント(HTML)全体を示す、ドキュメントオブジェクト
要素ノード 要素を表すオブジェクト、HTMLタグ
テキストノード テキストを表すオブジェクト、タグではなく文字になります
コメントノード コメントを表すオブジェクト
属性ノード 属性を表すオブジェクト、タグにある属性を表す、href・src属性など

コメントもあるのか!と思われるかもしれませんが

HTMLに関わる全てのものはDOMの一部となり扱われます。

ということは、もちろん『<!DOCTYPE...> 』も含まれます。

空白で何もない場合はどうなるのか

空白もテキストノードとして扱われ、改行も同じになります。

そして『Element』というのがあります。

ドキュメントの中にある全ての要素(オブジェクト)はこのElementを継承している、DOM要素のベースクラスです。

HTMLドキュメントの要素を操作をする際のオブジェクトで要素を検索する際の 『getElementsByTagName』

『querySelector』(以下略)などの『メソッド』を提供します。

Chrome』では、ブラウザの右上隅にある3つの縦のドットをクリックし、『その他のツール』> 『開発者ツール』に移動すると開発者ツールにアクセスできます。

ブラウザ画面の任意の場所を右クリックして、[検査]をクリックすることもできます。

この開発者ツールでDOMツリーの表現を確認できます。

JavaScriptを使用すれば、ページがブラウザにロードされるたびに、『ドキュメント』という名前のドキュメントオブジェクトが形成されます。

このオブジェクトに組み込み『メソッド』を適用して、HTML要素にアクセスし変更(操作)することができます。



ブラウザを操作する?

一般的に広く受け入れられ、かつ人気があるプログラミング言語の1つであるJavaScriptでは

Chrome』『Firefox』『Internet Explorer』『Edge』『Safari』(以下IE)などで実行されたプログラムのブラウザはその命令通りに処理をしてくれます。

JSはインタプリタ言語です、つまり実行前にプリコンパイルされていない言語となります。

普段何気なく貴方が使用している『Twitter』や『Instagram』で『いいね』ボタンを押すと1カウントが入ります。

その1つの機能もドキュメントから要素を取得し命令通りにプログラムが実行されていきます。

最近のCSSではプログラミング言語を使用しなくても 高機能なサイトが増えていますが

『HTML』、『CSS』のみで一度ブラウザに読み込まれると変化はなく、同じものをブラウザに表示し続けます。

これらは静止されたデータという事です。

つまりJavaScriptを使用すれば、元々ブラウザに読み込みれた後でも、タグに囲まれているテキストなどを上書き(書き換える)事が可能で

書き換えるだけではなく、特定の要素を追加したり削除、

タグの属性の値を変更したり、『Ajax』を使用したデータの取得など

さまざまな操作が可能になります。

簡単に言ってしまえば『HTML』、『CSS』だけでは できない事をするのがDOM操作となります。

『HTML』、『CSS』をある程度理解している方であればプロ並みのスキルや知識は必要なく

簡単に操作が可能となっています。

注意点

おさえておかなければいけない注意点は

コードがCSS疑似要素を使用している場合、DOMは要素に適用されたスタイルではなく、

ソースHTMLドキュメントから自身を構築するためDOMはツリーにそれを含める事はしません。

なのでJavaScriptは疑似要素がDOMの一部ではないため、それらをターゲットにすることはできません。

ですが開発ツールの[スタイル]タブでCSSを操作することは可能です。

つまりJavaScriptはDOMの中に存在する要素のみに影響があるという事です。

そしてDOMはソースコードではないという事も理解しておいて下さい

動的な処理が適用された時に

DOMはブラウザからの最終的な結果(出力)となります。

 

私が独学でお世話になったベストセラーでもある参考書の第2版です。

JSの基礎はこの本でほとんど入ってて、初心者がつまずきやすいポイントを徹底的にカバーしてくれます。

ECMA Scriptの最新の文法や機能を学ぶなら、間違いないと思います。