BinaryDevelop
  1. ホーム
  2. javascript

[解決済み】ある要素が可視DOMに存在するかどうかを確認するにはどうすればいいですか？

2022-01-25 02:47:50

質問

を使わずに要素の存在をテストするにはどうしたらよいでしょうか？ getElementById メソッドを使うことができますか？

を設定しました。 ライブデモ を参考にしてください。また、ここにもコードを印刷しておきます。 

<!DOCTYPE html>
<html>
<head>
    <script>
    var getRandomID = function (size) {
            var str = "",
                i = 0,
                chars = "0123456789abcdefghijklmnopqurstuvwxyzABCDEFGHIJKLMNOPQURSTUVWXYZ";
            while (i < size) {
                str += chars.substr(Math.floor(Math.random() * 62), 1);
                i++;
            }
            return str;
        },
        isNull = function (element) {
            var randomID = getRandomID(12),
                savedID = (element.id)? element.id : null;
            element.id = randomID;
            var foundElm = document.getElementById(randomID);
            element.removeAttribute('id');
            if (savedID !== null) {
                element.id = savedID;
            }
            return (foundElm) ? false : true;
        };
    window.onload = function () {
        var image = document.getElementById("demo");
        console.log('undefined', (typeof image === 'undefined') ? true : false); // false
        console.log('null', (image === null) ? true : false); // false
        console.log('find-by-id', isNull(image)); // false
        image.parentNode.removeChild(image);
        console.log('undefined', (typeof image === 'undefined') ? true : false); // false ~ should be true?
        console.log('null', (image === null) ? true : false); // false ~ should be true?
        console.log('find-by-id', isNull(image)); // true ~ correct but there must be a better way than this?
    };
    </script>
</head>
<body>
    <div id="demo"></div>
</body>
</html>

基本的に上記のコードは、ある要素が変数に格納され、その後DOMから削除される様子を示しています。要素が DOM から削除されても、変数には最初に宣言されたときの要素が保持されています。言い換えれば、それは要素自体へのライブリファレンスではなく、レプリカなのです。その結果、この変数の値（要素）が存在するかどうかをチェックすると、予期しない結果が得られることになります。

は、その isNull 関数は、変数から要素の存在をチェックする試みで、それはうまくいくのですが、同じ結果を達成する簡単な方法があれば知りたいのです。

追記：JavaScriptの変数がなぜこのような挙動をするのかにも興味があるのですが、もしこのテーマに関する良い記事をご存知の方がいらっしゃいましたら教えてください。

どのように解決するのですか？

このページには、ある要素が「(1)」と「(2)」に分かれるかどうかを知りたい人がいるようです。 存在する (元の質問と少し違いますが)。

それは、ブラウザの選択メソッドのどれかを使って、そのメソッドに 真実味のある の値を設定します（一般的に）。

例えば、私の要素に id の "find-me"

var elementExists = document.getElementById("find-me");

null

!!

  • document
    • {を使用します。 {{コード
  • {{コード

これらのメソッドの中には querySelector()を使用するので、必ずその querySelectorAll() プロパティがあります。 getElementsByClassName() はオブジェクトであり、したがって 真実性 .

ある要素が可視DOMの一部として存在するかどうかを実際に判断する場合（最初に質問されたような場合）。 Csuwldcatは、独自に開発するよりも良い解決策を提供しています。 (この回答が含んでいたように）。つまり は getElementsByName() メソッドを DOM 要素に適用します。

こんな風に使えるんだ...。 

NodeList

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します