Как проверить, существует ли элемент в видимом 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 ]

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

Кажется, что некоторые люди приземляются здесь, и просто хотят знать, существует ли элемент (немного отличается от исходного вопроса).

Это так же просто, как использовать любой из методов выбора браузера и проверить его на истинное значение (как правило).

Например, если бы мой элемент имел id "find-me", я мог бы просто использовать ... 

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

Это спецификация для возврата ссылки на элемент или null. Если вам нужно логическое значение, просто бросьте !! перед вызовом метода.

Кроме того, вы можете использовать некоторые из многих других методов, которые существуют для поиска элементов, таких как (все живут за document):

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

Некоторые из этих методов возвращают NodeList, поэтому обязательно проверьте его свойство length, поскольку NodeList является объектом и, следовательно, truey .

Для фактического определения, существует ли элемент как часть видимого DOM (как изначально заданный вопрос), Csuwldcat предоставляет лучшее решение, чем развертывание вашего собственного (как этот ответ раньше содержал). То есть использовать метод contains() для элементов DOM.

Вы можете использовать это так ... 

document.body.contains(someReferenceToADomElement);
276 голосов
/ 12 апреля 2011

Почему бы вам не использовать getElementById(), если он доступен?

Кроме того, вот простой способ сделать это с помощью jQuery: 

if ($('#elementId').length > 0) {
  // exists.
}

А если вы не можете использовать сторонние библиотеки, просто придерживайтесь базового JavaScript: 

var element =  document.getElementById('elementId');
if (typeof(element) != 'undefined' && element != null)
{
  // exists.
}
164 голосов
/ 29 мая 2013

Используя Node.contains DOM API , вы можете легко проверить наличие любого элемента на странице (в настоящее время в DOM): 

document.body.contains(YOUR_ELEMENT_HERE);

ПРИМЕЧАНИЕ: CROSS-BROWSER : объект document в IE не имеет метода contains() - для обеспечения кросс-браузерной совместимости используйте document.body.contains() вместо

56 голосов
/ 11 февраля 2013

Я просто делаю: 

if(document.getElementById("myElementId")){
    alert("Element exists");
} else {
    alert("Element does not exist");
}

Работает у меня и с ним еще не было проблем ...

10 голосов
/ 15 сентября 2013

Из Сеть разработчиков Mozilla

Эта функция проверяет, находится ли элемент в теле страницы. Значение «Содержит» является включающим, и определение, содержит ли тело себя, не является ли это намерением isInPage, в этом случае явно возвращается значение «ложь». 

function isInPage(node) {
  return (node === document.body) ? false : document.body.contains(node);
}

узел - это узел, который мы хотим проверить в.

9 голосов
/ 29 февраля 2012

Не могли бы вы просто проверить, имеет ли свойство parentNode значение NULL?

т.е. 

if(!myElement.parentNode)
{
    //node is NOT on the dom
}
else
{
    //element is on the dom
}
7 голосов
/ 28 сентября 2014

Самое простое решение - проверить свойство baseURI , которое устанавливается только при вставке элемента в DOM и возвращается к пустой строке при его удалении. 

var div = document.querySelector('div');

// "div" is in the DOM, so should print a string
console.log(div.baseURI);

// Remove "div" from the DOM
document.body.removeChild(div);

// Should print an empty string
console.log(div.baseURI);
<div></div>
3 голосов
/ 29 ноября 2014

Решение csuwldcat кажется лучшим из всех, но для его корректной работы требуется небольшое изменение, чтобы он работал правильно с элементом, который находится в другом документе, отличном от используемого JavaScript, например, в iframe :

YOUR_ELEMENT.ownerDocument.body.contains(YOUR_ELEMENT);

Обратите внимание на использование свойства элемента ownerDocument, в отличие от простого ol 'document (которое может относиться или не относиться к документу владельца элемента).

torazaburo опубликовал еще более простой метод , который также работает с нелокальными элементами, но, к сожалению, он использует свойство baseURI, которое в настоящее время неодинаково реализовано во всех браузерах (я мог только получить это работать в основанных на webkit). Я не смог найти никаких других элементов или свойств узла, которые могли бы быть использованы подобным образом, поэтому я думаю, что пока вышеупомянутое решение так же хорошо, как и оно.

3 голосов
/ 17 сентября 2018

Простой способ проверить, существует ли элемент, можно сделать с помощью однострочного кода jQuery.

Вот код ниже: 

if ($('#elementId').length > 0) {
    // do stuff here if element exists
}else {
    // do stuff here if element not exists
}
3 голосов
/ 06 декабря 2012

Решение jQuery: 

if ($('#elementId').length) {
    // element exists, do something...
}

Это сработало для меня с использованием jQuery и не требовало использования $('#elementId')[0].

Страница:
...