DOMで遊んでみる

プログラミング JavaScript

DOMについて

  • DOM（Document Object Model）
    • プラットフォームに中立的なイベント・ノードツリーのモデル

DOMの仕様

DOMとHTML

HTMLはツリー構造でありDOMで表現できる。例えば以下のHTMLは以下のような構成（図）になる。

<html>
    <head></head>
    <body>
        <h1>HelloWorld</h1>
    </body>
</html>

f:id:hkou:20170702074735p:plain

ChromeでDOMを確認する

空のHTMLファイル

空のHTMLファイルを作成する。（empty.html）
Chromeで開き、デベロッパーツール（Ctrl+Shft+I）で確認してみる。

f:id:hkou:20170702075511p:plain

ファイルの中身は空のはずなのにElementが作成されている。HTMLの最小構成ということだろうか。

閉じたツリー

以下のような閉じたツリーは作れるだろうか

f:id:hkou:20170702080153p:plain

bodyの下にbodyを付けてみたがDOMExceptionがthrowされてしまった。 f:id:hkou:20170702080353p:plain

DOMを操作するAPI

ルートノード取得

document.getRootNode()

IDを指定してノード取得

var elm = document.createElement("div");
elm.id = 'elm_id';
document.body.append(elm);

document.getElementById('elm_id');

クラスを指定してノード取得

var div = document.createElement("div");
div.classList.add("test_class");

document.body.appendChild(div);
document.getElementsByClassName("test_class");

CSSセレクタを指定してノード取得

// 1件取得
document.querySelector(".test_class");

// 全件取得
document.querySelectorAll(".test_class")

ノードの作成

var elm = document.createElement("div");

子ノードに追加

var elm = document.createElement("div");
document.body.appendChild(elm);

ノードの削除

var div = document.createElement("div");
document.body.appendChild(div);

// 子要素の削除
document.body.removeChild(div);

DOMとイベント

  • TODO

  • キャプチャフェーズ

  • ターゲットフェーズ
  • バブリングフェーズ

DOMとCSS

HTMLElement.styleプロパティにCSSStyleDeclarationオブジェクトとして格納されている。
ただしstyleプロパティはインラインstyle属性で設定されたCSS宣言のみしか取得できない。

document.body.style.cssText = "color: red";

document.body.style.color = "red"

外部のCSSファイルから適用されたCSSプロパティも含めた値を取得する場合は以下

window.getComputedStyle(document.body, null);