JavaScript でDOMの高さを取得するメモ

JavaScript でDOMの高さを取得するメモ



JavaScript でDOMの高さを取得する際に、いろいろ調べたことをまとめておきます。
// 要素のオブジェクトを取得（id or クラス名）
const element = document.getElementById('id')
const el = document.getElementsByClassName('id')

// 要素のスクロールビューの高さ（読み取りのみ）
const height = element.scrollHeight

// 上にスクロールされたピクセル数（更新も可）
const top = element.scrollTop
element.scrollTop = 0

// 親要素の最上位からのピクセル数
const offtop = element.offsetTop

// elementに指定された要素の高さ
const offHeight = element.offsetHeight

// 全体の高さ
const allHeight = document.documentElement.scrollHeight

＊DOMインターフェイス

DOM とはドキュメントオブジェクトモデルのことで、HTMLとスクリプト言語を接続するために使われます。
DOMのメソッドで要素にアクセスすることができ、スタイルやコンテンツを変更することができます。

＊Element

全ての要素が継承するもっとも一般的な基底クラスです。
全ての要素に共通するメソッドとプロパティを提供しています。

＊Document

ブラウザーに読み込まれたWebページを表していて、bodyやtableなどページ全体に関わる要素を持っています。

＊HTMLElement

Webページ内のHTML要素を表していて、offsetHeightなどのプロパティを持っています。

＊参考


＊所感

DOMの高さを取得したり更新することで、徐々にスクロールしていくようにしたり、画面最上位に移動するボタンを実装することができるようになります。
DOMインターフェースにどのようなものがあるのか知っておくと、機能の実装に役立ちそうです。