ブラウザ、DOM、JavaScript.すべてはあなたが効果的なWebアプリを構築するために知っておく必要があります.パート2 - DOM.

5085 ワード
html dom webdev javascript テキストリンク
ハイ👋
この記事はDOM . これはシリーズの2番目の記事です.

ドムツリー.


DOM(Document Object Model)はHTML、XML、SVG文書のソフトウェアインタフェースです.それは、ノードとグループのグループとしての構造(木)の構造的な見方を提供します.そして、構造と方法がプログラムによってアクセスされることができる方法を定義します.
DOMはスクリプトやプログラミング言語にWebページをバインドする.
HTML文書の基礎はタグです.
DOMによると、HTMLタグはオブジェクトであり、入れ子になったタグはその「子」です.
すべてのオブジェクトはJavaScriptで利用可能です、我々はページを変更するためにそれらを使用することができます.
例えば、document.body が<body> タグ.

REMARK
JavaScript is not part of DOM, even though it(JS) is most commonly used.


DOMの例


これは典型的なHTMLページです.
<!DOCTYPE HTML>
<html>
<head>
  <title>About DOM</title>
</head>
<body>
  DOM...
</body>
</html>
そして、これはタグツリーとしてHTMLドキュメントを見ます.
html
    head
        #text
        title
             #text "About DOM"
        #text
    #text
    body
        #text "DOM..."
タグはノード要素です.木の構造を形成します.<html> がルートノードです.<head> and <body> 子ノードなど.
要素内のテキストは、テキストノード#text . テキストノードには文字列のみが含まれます.それは子孫(常に最も低いレベルである)を持つことができません.
空白と改行も記号です.文字と数字のように、それらはテキストノードを形成し、DOMツリーの一部になります.

REMARK

  1. Spaces and line breaks before the <head> tag are ignored;
  2. There are no characters after </body> tag. Anything written after this tag is moved to the end of the <body> tag according to the DOM specification;
  3. Everything written before <head> tag is moved inside <body>.

HTMLで書かれたすべてもDOMツリー、コメントでもあります.

Remark
Comments is also a DOM tree node.


この例では、空白と改行で作成されたテキストノードはありません.
<!DOCTYPE HTML>
<html><head><title>About DOM</title></head><body>DOM...</body></html>

REMARK
One of the reasons why minimized(single-line) code works faster.


DOMのビルド


DOMを構築するとき、ブラウザは自動的にHTMLを誤って修正します.例えば、ファイルが単語だけを含むならworld , ブラウザは必要なすべてのタグを追加します.DOMは次のようになります.
html
    head
    body
        #text "world"

REMARK
For short, I don't take text nodes from spaces and line breaks into account.

REMARK
Also the browser closes all unclosed tags. But I strongly recommend closing them.


その他のノード


12つのDOMノードがあります.
  • ELEMENT_NODE
  • ATTRIBUTE_NODE
  • TEXT_NODE
  • CDATA_SECTION_NODE
  • ノード名
  • ノードノード
  • PROCESSING_INSTRUCTION_NODE
  • COMMENT_NODE
  • DOCUMENT_NODE
  • DOCUMENT_TYPE_NODE
  • DOCUMENT_FRAGMENT_NODE
  • ノードノード
    • しかし、ほとんどの場合、4つだけが使用されます.document , elements , text nodes , comments .
    Here - DOMモデルをリアルタイムで見ることができます.
    次の記事では、影と仮想DOMについて話します.それをお見逃しなく!

    その後。


    非常に感謝します.それはあなたのために有用だった願っています🙏
    私に従ってください、それは私に新しい記事を書きます😌
    私はあなたのフィードバックを喜んでいる.
    C!😉
    インターネットに来ました.jsにおける「非同期/ブロック」などの概念の概要
    Vue.js日本語サイトを支える仕組み