開発辞書

この投稿は開発者辞書と呼ばれるリソースの一部です.なぜ私がこのhereを書いているかについてもっと
木を想像しなさい.枝と葉の木を切って葉を想像してください.今、あなたはこのテキストを読むために使用しているもののようなブラウザ内のWebページを想像してください.ページのすべてのものを見てください.見出し、段落、画像、リンク.それらは、葉や枝の枝のように、互いに関係があります.木の根はHTMLと呼ばれるHTML要素であり、根の下には以下の要素があります.読んでいるテキストは、おそらくいくつかのdiv要素内のp要素です.(このページのどこかをクリックすることができます.深い階層にネストした多くの要素があります.要点は以下のように見えます.

各々の色は、この論理木の階層の異なるレベルの要素を表示する.いくつかの一般的な用語は、要素がどのようにお互いに関連する話をするために使用されます.頭部と体は兄弟である.HTMLの子です.メインはヘッダーとセクションなどの親です.
あなたの頭の中に具体的なイメージを持っている今、我々はこのような木の要素を表現するの利点は何かを尋ねることができますか?

何？これはどうですか。

すべての要素はいくつかの方法で整理され、それらを参照し、選択的に1つまたはそれらのいくつかを行うことができます.
DOMの概念は木へのプログラムアクセスを許します.これは、階層を横断することができます簡単に特定の要素を選択するメソッドがあります.プログラマは、次に、選択された要素で物事を行うことができます-コンテンツを変更、外観を変更し、HTML、CSS、およびJavaScriptといくつかの対話を追加します.

CSSの例

CSSはDOMとセレクタの概念を使用してスタイルに特定のHTML要素を対象とします.

p:first-child {
  font-size: 15px;
}

div > p {
  color: green;
}

最初のものは「親要素の最初の子であるすべての段落を見つけて、フォントサイズを15に変えます」と言います.
番目の人は“div要素の子であるすべての段落を見つけて、緑に色を変える”と言います.

JavaScriptの例

JavaScriptを使用すると、DOMとセレクタの概念は、特定の要素(例えば、ボタンをクリックするユーザー)のイベントに'聞く'に使用されます.

document.getElementById("myButton").addEventListener("click", doSomethingWithButtonClick);

この関数は、「id」という要素を「myButton」として選択し、指定された関数' dosomeingwithButtonClick 'を呼び出したときにクリックされたプランを示します.

HTMLの例

HTML DOMは、DOMツリーに要素を挿入または削除できるメソッドを持ち、一部の要素の内容を更新します.たとえばドキュメント.createElement(name)、ParentNode.AppendChild (ノード)、要素.innerhtml.彼らは、名前が言うことをします.

document.getElementById("foo").innerHTML = "Text changed!";

これは「foo」のidを持つ要素を選択し、表示テキストを変更します.
今、あなたはDOMと呼ばれるものの本質を知っています.ああ、その頭字語はドキュメントオブジェクトモデルの略です.しかし、あなたはすでにそれを知っていました.名詞'ドキュメント'、'オブジェクト'と'モデル'だけを知ることは意味がありません.しかし、あなたの心の中で視覚的なイメージを持って、それがどのように使用されるかの具体的な例を見て、あなたが既に知っているかもしれない他のものにこの概念を保持して、接続するのを許すべきです.