https://let.blog.jp/tag/DOM

以下の内容はhttps://let.blog.jp/tag/DOMより取得しました。

あとで見る

2023年11月04日 00:33

getClientRects と getBoundingClientRect の違い

たまに使おうとするとどっちだっけってなるやつです
どちらも Element のメソッドで要素の場所やサイズを取得するものです

よく読めば違いは名前でわかるようになってます
getClientRects は複数形なので複数の DOMRect を取得します
それに対して getBoundingClientRect は単数なのでひとつです
Bounding という言葉からわかるように全部の DOMRect を覆うひとつの DOMRect になります

基本は 1 つなのですが折り返すケースでは複数の DOMRect に分かれます
例えばこういう HTML があって

<div>
	<span>AAA AAA AAA AAA AAA</span>
	<span>BBB BBB BBB BBB BBB</span>
</div>

見た目がこうなったとします

AAA AAA AAA AAA AAA BBB BBB BBB
BBB BBB

このとき A の span では

[getClientRects]

DOMRectList {
	"0": DOMRect {
		"x": 8,
		"y": 8,
		"width": 184.40625,
		"height": 24,
		"top": 8,
		"right": 192.40625,
		"bottom": 32,
		"left": 8
	}
}

[getBoundingClientRect]

DOMRect {
	"x": 8,
	"y": 8,
	"width": 184.40625,
	"height": 24,
	"top": 8,
	"right": 192.40625,
	"bottom": 32,
	"left": 8
}

となり getClientRects の結果は 1 つだけです
getBoundingClientRect で得られるものと同じです

それに対して B の span では

[getClientRects]

DOMRectList {
	"0": DOMRect {
		"x": 197.84375,
		"y": 8,
		"width": 107.765625,
		"height": 24,
		"top": 8,
		"right": 305.609375,
		"bottom": 32,
		"left": 197.84375
	},
	"1": DOMRect {
		"x": 8,
		"y": 32,
		"width": 70.03125,
		"height": 24,
		"top": 32,
		"right": 78.03125,
		"bottom": 56,
		"left": 8
	}
}

[getBoundingClientRect]

DOMRect {
	"x": 8,
	"y": 8,
	"width": 297.609375,
	"height": 48,
	"top": 8,
	"right": 305.609375,
	"bottom": 56,
	"left": 8
}

右上と左下の 2 つに分かれます
getBoundingClientRect ではこの 2 つを含む領域なので大きめの矩形です
ほぼ親の div と一致します
横の僅かな隙間などがあるので完全には一致しません

基本は getBoundingClientRect で良いと思います

Present

2022年05月01日 10:17

jsdom の高速版ライブラリ happy-dom というのを見つけた

jsdom は内部で勝手に使われてる事が多くて直接インストールして使うことはあまりないので代替ライブラリを気にしてなかったのですがたまたま happy-dom というライブラリを見かけました
https://github.com/capricorn86/happy-dom

パフォーマンス比較を見るとかなり高速みたいです
2, 3 倍程度のもあれば 10 倍近いものまで

速いだけではなく WebComponents 機能など新しい機能もサポートしてるようです

軽く触れてみましたがどちらもブラウザの DOM 操作をエミュレートするものなのでどっちも同じ感じで使えました
ただ最初の window を取得するまでの手順は違いがありました

jsdom は JSDOM クラスのインスタンスを作成してそのプロパティとして window オブジェクトが入っています
JSDOM クラスのコンストラクタに HTML 文字列を渡せば DOM の初期状態にセットできます

const { JSDOM } = require("jsdom")

const jsdom = new JSDOM()

jsdom.window.document.documentElement.outerHTML
// '<html><head></head><body></body></html>'

const jsdom2 = new JSDOM(`<h1>a</h1>`)
jsdom2.window.document.querySelector("h1").innerHTML
// 'a'

happy-dom では Window クラスのインスタンスを作成します
それがそのまま window オブジェクトです
作成時に初期状態をセットする機能はなさそうなので初期値を設定するには window を経由した DOM の API を使います

const { Window } = require("happy-dom")

const window = new Window()

window.document.documentElement.outerHTML
// '<html><head></head><body></body></html>'

window.document.body.innerHTML = `<h1>a</h1>`
window.document.querySelector("h1").innerHTML
// 'a'

以上の内容はhttps://let.blog.jp/tag/DOMより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14