DOMツリー


HTML/XMLドキュメントは、ブラウザでドキュメントオブジェクトモデル(DOM)ツリーとして表示されます.DOMはHTMLをタグツリー構造として表す.ツリー内のすべてのオブジェクトはオブジェクトです.タグの中の文字(タグを含む)もオブジェクトであり、HTMLの中のすべての文字(コメントを含む)がDOMを構成する.
タグは要素(要素ノード)であり、ツリー構造を構成します.
<!DOCTYPE HTML>
<html>
<head>
  <title>DOM 트리</title>
</head>
<body>
  문서 객체 모델 트리
</body>
</html>
上記のコードでは、<html>はルートノードであり、<head>および<body>はルートノードのサブノードである.
エレメント内のテキストがテキストノードになります.テキストノードには文字列のみが含まれ、ツリー内のリーフノードであり、サブノードは使用できません.

DOM構造の表示方法

  • http://software.hixie.ch/utilities/js/live-dom-viewer/
  • 開発者ツールを開き、Elementsパネルに移動して
  • を表示します.
  • Elementsパネルから要素を選択し、Escを押してElementsパネルの下にコンソールを配置し、コンソールウィンドウに$0.style.background = 'red'と入力します.