ノードがHTML内に存在するかを調べる６つの方法

はじめに

ノードが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つの自作方法を紹介しました。