JavaScript

JavaScriptをついばむ:DOM操作ードキュメント制御

JavaScriptの勉強メモ。

DOMについて

DOM(Document Object Model)はJavaScriptなどからHTMLの要素を操作するためのインターフェースのこと。DOMはレンダリングツリーの構成の一部。レンダリングツリーはDOMとCSSOM(CSS Object Model)を組み合わせたもの。
DOMの重要なオブジェクトは次の3つ

Windowオブジェクト

Webブラウザの1つのウィンドウもしくはタブのこと

Documentノード

HTML文書全体のこと。文書から要素オブジェクトを取得としり要素を作成したりとHTML文章全体にかかわる機能を提供する

要素ノード

HTML文書内の要素を表すオブジェクト

テキストノード

テキストを表すオブジェクト

DOM操作

ノード取得

メソッドを使えばidやタグを指定することによりノードオブジェクトを取得し内容を書き換えることもできる。下記はid名でノードを取得したパターン。

<body>
    <div id='hoge'>おはよう</div>
    <script>
        let element = document.getElementById("hoge");
        element.innerHTML = 'おやすみ';
    </script>
</body>
指定方法 メソッド
id名 getElementById('hoge')
タグ名 getElementsByTagName('p')
class属性 getElementsByClassName('fuga')
name属性 getElementsByName('foo')
CSSセレクタ(単一) querySelector('table > tbody > tr')
CSSセレクタ(複数) querySelectorAll('body')

要素の属性値

要素の属性値を取得したり設定、削除することもできる。

操作 メソッド
取得 getAttribute
設定 setAttribute
削除 removeAttribute

他にもノードの作成や挿入、削除もできる。
ブラウザのバージョンにより使用できないメソッドもあるので注意が必要。