Как проверить, существует ли элемент в видимой 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()/<Т27 >
  • getElementsByClassName()
  • getElementsByName()

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


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

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

document.body.contains(someReferenceToADomElement);

Ответ 2

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

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

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

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

var element =  document.getElementById('elementId');
if (typeof(element) != 'undefined' && element != null)
{
  // exists.
}

Ответ 3

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

document.body.contains(YOUR_ELEMENT_HERE);

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

Ответ 4

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

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

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

Ответ 5

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

Эта функция проверяет, находится ли элемент в теле страницы. Как содержит включено и определение того, содержит ли тело само не намерение isInPage, этот случай явно возвращает false.

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

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

Ответ 6

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

то есть.

if(!myElement.parentNode)
{
    //node is NOT on the dom
}
else
{
    //element is on the dom
}

Ответ 7

Самое простое решение - это проверить свойство 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>

Ответ 8

Решение jQuery:

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

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

Ответ 9

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

YOUR_ELEMENT.ownerDocument.body.contains(YOUR_ELEMENT);

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

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

Ответ 10

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

Вот код ниже:

if ($('#elementId').length > 0) {
    // do stuff here if element exists
}else {
    // do stuff here if element not exists
}

Ответ 11

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

element.closest('body') === null

Ответ 12

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

$('body').find(yourElement)[0] != null

Ответ 13

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

jQuery.contains( document, YOUR_ELEMENT)

Ответ 14

вместо итерации родителей вы можете просто получить ограничивающий прямоугольник, который равен нулю, когда элемент отсоединен от 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;
}

Ответ 15

// this will work prefect in all :D     
function basedInDocument(el) {
        // this function use for checking if this element in a real DOM
        while (el.parentElement != null) {
            if (el.parentElement == document.body) {
                return true;
            }
            el = el.parentElement; // for check parent of 
        } // if loop break will return false mean element not in real DOM
        return false;
    }

Ответ 16

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

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

Ответ 17

Использовать этот:

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

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

    return inBody ? last === document.body : last === document;
};

Ответ 18

Используйте 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');
}

Ответ 19

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

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

Ответ 20

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

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

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

Я рассказал об этом и многом другом.

Ответ 21

все существующие элементы имеют установленный parentElement, кроме HTML-элемента!

function elExists (e) { 
    return (e.nodeName === 'HTML' || e.parentElement !== null);
};