DOM(HTML)

DOM…documentオブジェクトのこと

これを操作することで

HTMLの変更や追加がJavaScriptで行える。

HTMLでidを指定したときはgetElementById()メソッド、class属性・セレクタで指定した要素はquerySelector()メソッドで要素取得する。

※class属性はclass名の前に「.(ドット)」をつける。

DOMのツリー構造を考えると取得したい要素を指定できる。

<h1>JavaScript</h1>
<dl>
    <dt>今日の天気</dt>
    <dd class="weather">晴れ</dd>
</dl>

var element = document.querySelector("dl dt");   //dlすべてではなくdtのみ取得
console.log(element);

実行した結果　<dt>今日のてんき</dt>　となる。

これを使うと変更したい箇所のみいじることができる。