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

JavaScriptの勉強メモ。

DOMについて

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

Windowオブジェクト

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

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

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