■ はじめに
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