ノードがHTML内に存在するかを調べる６つの方法
6235 ワード
はじめに
ノードがHTML内に存在するとは、開発ツール(DevTools)でHTMLを見たときノードが存在するということです。
HTML内に存在しないノードは、削除したノードやcreateElementで作成したばかりのノードです。これらはプログラミング内で変数として存在し得るがHTML内に存在しません。
ReactなどのSPAなページで動的に変化するノードをブックマークレットやユーザースクリプトから操作しようとしたときノードがHTML内に存在しないことが問題になることがあります。
6つの方法
1. getBoundingClientRectを使う方法
function exist_in_html_1(node) {
var bcr = node.getBoundingClientRect();
return bcr.height > 0 || bcr.bottom !== 0;
}
2. closestを使う方法
function exist_in_html_2(node) {
return Boolean(node.closest('html'));
}
3. containsを使う方法
function exist_in_html_3(node) {
return document.contains(node)
}
4. compareDocumentPositionを使う方法
function exist_in_html_4(node) {
return !(document.compareDocumentPosition(node)
& Node.DOCUMENT_POSITION_DISCONNECTED);
}
5. compareBoundaryPointsを使う方法
function exist_in_html_5(node) {
var range = document.createRange();
range.selectNode(document.body);
try {
var sourceRange = document.createRange();
sourceRange.selectNode(node);
range.compareBoundaryPoints(Range.START_TO_START, sourceRange);
} catch (error) {
return false;
}
return true;
}
6. isConnectedを使う方法
function exist_in_html_6(node) {
return node.isConnected;
}
最後に
最適解は最後に紹介した方法です。最適解を知らなかったので5つも自作することになりました。MDN Web Docsの英語のドキュメントに日本語訳がないので最適解をご存じない方も多いのではないでしょうか。最適解と5つの自作方法を紹介しました。
Author And Source
この問題について(ノードがHTML内に存在するかを調べる６つの方法), 我々は、より多くの情報をここで見つけました https://qiita.com/querykuma/items/2f0c76697764ecad2463著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .