##1. はじめに
本記事では、JavaScript DOM操作の
「DOM操作の基本概要」
について記載する。
##2. DOM操作って何？
:::note
Webサイトを動的に書き換える技術のこと。
:::
:::note
Document Object Model(DOM)の略称。
:::
:::note
JavaScriptで記述されたプログラムからHTMLページにアクセスして、HTMLページを操作する方法を提供するもの。
:::
##3. DOM操作の種類
###DOMツリー
:::note
HTMLドキュメントやXMLドキュメントをツリー構造として表現したもの。
:::
####DOMツリーの例
#####コードで表現
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>DOMツリー</title>
</head>
<body>
<h1>JavaScript</h1>
<h2>DOMツリー</h2>
<p>
HTMLドキュメントやXMLドキュメントを<strong>ツリー構造</strong>として表現したもの。
</p>
</body>
</html>
上記はHTMLでマークアップしたもの。
#####ツリーでの可視化 これをDOMツリーで表現すると、  このような構造となる。
###ノード
ノードとは、
文章を構成する要素、属性、テキストといったオブジェクトのこと。
・要素ノード
・属性ノード
・テキストノード
言い換えると、
DOMツリーの個々のオブジェクトがノード
ということになる。
###ブラウザオブジェクト ブラウザベンダ個々で独自に実装されたローカルなオブジェクト群のことを指す。  上図の解説を行っていく。(以下は一部の例、かつ簡易的な解説) ####Windowオブジェクト :::note ブラウザを操作するための機能を集めたオブジェクト。 ::: :::note ブラウザオブジェクトの階層構造の最上位に位置する。 ::: ###Documentオブジェクト :::note Windowオブジェクト内に表示された、HTMLで表現されているコンテンツを保持しているオブジェクト。 ::: :::note Window内に表示されたドキュメントを操作するのは、Documentオブジェクトの役割。 ::: ※Documentオブジェクトが、いわゆるDOMである。 ####Locationオブジェクト :::note 現在表示されているページのロケーションに関する情報を提供する。 ::: :::note 現在表示のURLやアドレスに関する情報を取得できる。 ::: ####Historyオブジェクト :::note ブラウザの履歴の操作。 ::: :::note 画面上に表示しているページの移動などの操作。 ::: ####Navigatorオブジェクト :::note ブラウザのバージョンなど、ブラウザ固有の情報を提供する。 ::: ####Screenオブジェクト :::note ディスプレイに関する情報を提供する。 ::: ####Formオブジェクト :::note Formに関する情報を提供する。 ::: :::note Formの操作。 ::: ####Anchorオブジェクト :::note ページ上のアンカーリンク(<a>)に関する情報を扱う。 ::: ####Imagesオブジェクト :::note 画像に関する情報の提供。 ::: :::note 画像を操作する機能の提供。 ::: ####Elementオブジェクト :::note HTMLドキュメントにおける、要素(タグ)のこと。 ::: ##4. おわりに 次項:[JavaScript DOM操作② 「IDをキーに要素を取得」](https://qiita.com/Stack_up_Rising/items/238661a082eb3ce8979c)に続く。