##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ツリーで表現すると、 ![スクリーンショット 2021-11-03 15.43.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/cc70e359-e931-b4a2-fb19-4846d3957045.png) このような構造となる。

###ノード

ノードとは、

文章を構成する要素、属性、テキストといったオブジェクトのこと。

・要素ノード
・属性ノード
・テキストノード
言い換えると、

DOMツリーの個々のオブジェクトがノード

ということになる。

###ブラウザオブジェクト ブラウザベンダ個々で独自に実装されたローカルなオブジェクト群のことを指す。 ![ブラウザオブジェクト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/1bdbaf2b-3001-f663-4b7c-0742d163ec92.png) 上図の解説を行っていく。(以下は一部の例、かつ簡易的な解説) ####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)に続く。