☰

表示可能なDOMに要素が存在するかどうかを確認するにはどうすればよいですか? 質問する

tag-icon • tag-icon javascript dom variables element exists
表示可能なDOMに要素が存在するかどうかを確認するにはどうすればよいですか? 質問する

メソッドを使用せずに要素の存在をテストするにはどうすればよいですか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関数は変数から要素の存在を確認する試みであり、機能しますが、同じ結果を達成するより簡単な方法があるかどうかを知りたいです。

PS: このテーマに関連する良い記事をご存知の方がいらっしゃいましたら、JavaScript 変数がなぜこのように動作するのかについても興味があります。

ベストアンサー1

ここにアクセスしている人たちの中には、単に要素が存在するかどうかを知りたいだけの人もいるようです(元の質問とは少し異なります)。

それは、ブラウザの選択方法のいずれかを使用して、それが真実の値であるかどうかを確認するのと同じくらい簡単です (通常は)。

たとえば、要素に があった場合id、"find-me"単純に次のように使用できます...

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

これは、要素への参照または を返すように指定されますnull。ブール値が必要な場合は、!!メソッド呼び出しの前に を単に投げるだけです。

さらに、要素を見つけるために存在する他の多くの方法のいくつかを使用することもできます (すべて に基づいていますdocument)。

  • querySelector()/querySelectorAll()
  • getElementsByClassName()
  • getElementsByName()

これらのメソッドの中には を返すものがあり、はオブジェクトなので、そのプロパティNodeListを必ず確認してください。したがって、 はtruthy です。lengthNodeList

要素が可視DOMの一部として存在するかどうかを実際に判断するには（最初に尋ねた質問のように）、Csuwldcatは自分で作るよりも良い解決策を提供します（この回答には以前含まれていたように）つまり、のcontains()DOM 要素のメソッド。

次のように使用できます...

document.body.contains(someReferenceToADomElement);

おすすめ記事