【JS】DOM ~ 入門編 ~

■ はじめに

DOM について扱う

目次

【1】DOM
【2】代表的なメソッド一覧
 1)オブジェクト取得系
 2)オブジェクト作成系
 3)オブジェクト操作系
 4)その他

【1】DOM

* DOM = Document Object Model(ドキュメントオブジェクトモデル)

【2】代表的なメソッド一覧

まずは、★★★を覚えた方がいい

1)オブジェクト取得系

[1-1] getElementById() ★★★
[1-2] getElementsByTagName()
[1-3] querySelectorAll()
[1-4] querySelector()

 => 詳細は以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2022/11/21/000000

[1-1] getElementById()

* 指定したIDの要素のオブジェクト取得
 => 詳細は以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2011/12/29/200502

[1-2] getElementsByTagName()

* 指定したタグのエレメント取得。
* タグ版・getElementById()みたいな感じ。

[1-3] querySelectorAll()

* 指定したセレクタと一致した全要素を返す

[1-4] querySelector()

* 指定したセレクタと一致した初めの要素を返す

2)オブジェクト作成系

[2-1] createElement() ★★★
[2-2] createTextNode()

 => 詳細は、以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2022/11/19/000000

[2-1] createElement()

* 指定タグでの要素のオブジェクト作成

[2-2] createTextNode()

* 文字列を追加

3)オブジェクト操作系

[3-1] appendChild() ★★★
[3-2] removeChild()
[3-3] replaceChild()
[3-4] cloneNode()
[3-5] insertBefore()

 => 詳細は、以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2011/01/09/155824

[3-1] appendChild()

* 要素を追加する

[3-2] removeChild()

* 要素の削除

[3-3] replaceChild()

 * 要素を置き換える

[3-4] cloneNode()

* 要素を複製する

[3-5] insertBefore()

* 要素を指定したい要素の子要素として挿入

4)その他

[4-1] eveluate()

[4-1] eveluate()

* 要素ノードを簡単に高速にアクセスできる

関連記事

DOM ~ 基本編 / getElementById() ~
https://dk521123.hatenablog.com/entry/2011/12/29/200502
DOM ~ 基本編 / オブジェクト取得 ~
https://dk521123.hatenablog.com/entry/2022/11/21/000000
DOM ~ 基本編 / オブジェクト作成 ~
https://dk521123.hatenablog.com/entry/2022/11/19/000000
DOM ~ 基本編 / オブジェクト操作 ~
https://dk521123.hatenablog.com/entry/2011/01/09/155824
JavaScript覚書
https://dk521123.hatenablog.com/entry/2010/01/15/191626
イベント ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2022/11/20/000000
動的に生成したinputタグを考える
https://dk521123.hatenablog.com/entry/2022/11/24/230044