Как проверить, существует ли элемент в видимом DOM? - PullRequest
Новая
       103

Как проверить, существует ли элемент в видимом DOM?

349 голосов
/ 12 апреля 2011

Как вы проверяете элемент на существование без использования метода getElementById? Я установил live демо для справки. Я также напечатаю код здесь: 

<!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 ведут себя так, если кто-то знает о некоторых хороших статьях, связанных с этой темой.

Ответы [ 19 ]

2 голосов
/ 11 октября 2018

Другой вариант element.closest : 

element.closest('body') === null
1 голос
/ 10 июня 2018

вместо итерации родителей вы можете просто получить ограничивающий прямоугольник, который равен всем нулям, когда элемент отделен от dom 

function isInDOM(element) {
    if (!element) return false;
    var rect=element.getBoundingClientRect();
    return (rect.top || rect.left || rect.height || rect.width)?true:false;
}

, если вы хотите обработать крайний край нулевого элемента ширины и высоты вс нуля сверху и с нуля слева вы можете дважды проверить, перебирая родителей до document.body 

function isInDOM(element) {
    if (!element) return false;
    var rect=element.getBoundingClientRect();
    if (element.top || element.left || element.height || element.width) return true;
    while(element) {
        if (element==document.body) return true;
        element=element.parentNode;
    }
    return false;
}
1 голос
/ 09 августа 2017

Вы также можете использовать jQuery.contains, который проверяет, является ли элемент потомком другого элемента. Я передал document в качестве родительского элемента для поиска, потому что любые элементы, которые существуют на странице DOM, являются потомками document. 

jQuery.contains( document, YOUR_ELEMENT)
1 голос
/ 04 декабря 2012

Простое решение с jQuery 

$('body').find(yourElement)[0] != null
0 голосов
/ 24 июня 2019

Проверьте, является ли элемент дочерним по отношению к <html> через Node::contains(): 

const div = document.createElement('div');
document.documentElement.contains(div); //-> false

document.body.appendChild(div);
document.documentElement.contains(div); //-> true

Я рассмотрел это и многое другое в is-dom-detached .

0 голосов
/ 23 апреля 2019

попробуйте, это самое надежное решение: 

window.getComputedStyle(x).display == ""

есть: 

var x = document.createElement("html")
var y = document.createElement("body")
var z = document.createElement("div")
x.appendChild(y);
y.appendChild(z);

z.style.display = "block";

console.log(z.closest("html") == null);//false
console.log(z.style.display);//block
console.log(window.getComputedStyle(z).display == "");//true
0 голосов
/ 23 августа 2018

Используйте querySelectorAll с forEach: 

document.querySelectorAll('.my-element').forEach((element) => {
  element.classList.add('new-class');
});

в противоположность: 

const myElement = document.querySelector('.my-element');
if (myElement) {
  element.classList.add('new-class');
}
0 голосов
/ 10 января 2018

Используйте это: 

var isInDOM = function(element, inBody) {
    var _ = element, last;

    while (_) {
        last = _;
        if (inBody && last === document.body) { break;}
        _ = _.parentNode;
    }

    return inBody ? last === document.body : last === document;
};
0 голосов
/ 14 августа 2014

Мне понравился этот подход 

var elem = document.getElementById('elementID');

if( elem )do this
else 
do that

Также 

var elem = ((document.getElementById('elemID')) ? true:false);

if( elem ) do this
else
do that
Страница:
...