Como verificar se o elemento existe no DOM visível?

Como você testa um elemento para existência sem o uso do método getElementById ? Eu configurei uma demonstração ao vivo para referência. Eu também vou imprimir o código aqui também:

     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? };    

Basicamente, o que o código acima demonstra é um elemento sendo armazenado em uma variável e depois removido do dom. Mesmo que o elemento tenha sido removido do dom, a variável mantém o elemento como foi quando foi declarado pela primeira vez. Em outras palavras, não é uma referência ao elemento em si, mas sim uma réplica. Como resultado, verificar o valor da variável (o elemento) para existência fornecerá um resultado inesperado.

A function isNull é minha tentativa de verificar a existência de elementos a partir de uma variável e funciona, mas gostaria de saber se existe uma maneira mais fácil de obter o mesmo resultado.

PS: Eu também estou interessado em por que as variables ​​JavaScript se comportam assim se alguém souber de alguns bons artigos relacionados ao assunto.

Parece que algumas pessoas estão pousando aqui, e simplesmente querem saber se um elemento existe (um pouco diferente da questão original).

Isso é tão simples quanto usar qualquer método de seleção do navegador e verificar se há um valor geral (geralmente).

Por exemplo, se meu elemento tivesse um id de "find-me" , eu poderia simplesmente usar …

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

Isso é especificado para retornar uma referência ao elemento ou null . Se você deve ter um valor booleano, simplesmente jogue um !! antes da chamada do método.

Além disso, você pode usar alguns dos muitos outros methods que existem para encontrar elementos, como (todos vivendo fora do document ):

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

Alguns desses methods retornam um NodeList , portanto, certifique-se de verificar sua propriedade de length , porque um NodeList é um object e, portanto, verdadeiro .


Para realmente determinar se um elemento existe como parte do DOM visível (como a pergunta feita originalmente), o Csuwldcat fornece uma solução melhor do que rolar a sua própria (como essa resposta costumava conter). Ou seja, para usar o método contains() em elementos DOM.

Você poderia usá-lo assim …

 document.body.contains(someReferenceToADomElement); 

Por que você não usaria getElementById() se estiver disponível?

Além disso, aqui está uma maneira fácil de fazer isso com jQuery:

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

E se você não pode usar bibliotecas de terceiros, basta usar o JavaScript básico:

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

Usando a API DOM do Node.contains , você pode verificar a presença de qualquer elemento na página (atualmente no DOM) com bastante facilidade:

 document.body.contains(YOUR_ELEMENT_HERE); 

CROSS-BROWSER NOTA : o object de document no IE não tem um método contains() – para garantir a compatibilidade entre navegadores, use document.body.contains()

Eu simplesmente faço:

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

Funciona para mim e não teve problemas com isso ainda ….

Da Mozilla Developer Network

Esta function verifica se um elemento está no corpo da página. Como contém é inclusivo e determinar se o corpo contém em si não é a intenção de isInPage este caso explicitamente retorna falso.

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

é o nó que queremos verificar no.

A solução mais fácil é verificar a propriedade baseURI , que é definida somente quando o elemento é inserido no DOM e reverte para uma string vazia quando é removida.

 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); 
 

Você poderia apenas verificar se a propriedade parentNode é nula?

ou seja

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

solução jQuery:

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

Isso funcionou para mim usando jQuery e não exigiu que $('#elementId')[0] fosse usado.

A solução do csuwldcat parece ser a melhor do grupo, mas uma pequena modificação é necessária para que funcione corretamente com um elemento que está em um documento diferente do que o JavaScript está executando, como um iframe:

YOUR_ELEMENT.ownerDocument.body.contains(YOUR_ELEMENT);

Observe o uso da propriedade ownerDocument do elemento, em oposição a apenas um simples document (que pode ou não se referir ao documento do proprietário do elemento).

O torazaburo postou um método ainda mais simples que também trabalha com elementos não-locais, mas infelizmente, ele usa a propriedade baseURI , que não é implementada uniformemente nos navegadores neste momento (eu só consegui fazê-lo funcionar nos baseados em webkit). Não encontrei nenhum outro elemento ou propriedades de nó que pudessem ser usados ​​de maneira semelhante, por isso acho que, por enquanto, a solução acima é a melhor possível.

Gostei dessa abordagem

 var elem = document.getElementById('elementID'); if( elem )do this else do that 

Além disso

 var elem = ((document.getElementById('elemID')) ? true:false); if( elem ) do this else do that 

Solução simples com jQuery

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

Você também pode usar jQuery.contains , que verifica se um elemento é um descendente de outro elemento. Eu passei no document como o elemento pai para pesquisar porque quaisquer elementos que existam na página DOM são descendentes do document .

 jQuery.contains( document, YOUR_ELEMENT) 

em vez de iterar os pais, você pode simplesmente obter o rectângulo delimitador que é todo zeros quando o elemento é separado do dom

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

Se você quiser lidar com o caso de borda de um elemento de zero largura e altura no topo zero e zero à esquerda você pode verificar novamente iterando pais até que o documento.

 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; } 

Use querySelectorAll com forEach :

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

como o oposto para:

 const myElement = document.querySelector('.my-element'); if (myElement) { element.classList.add('new-class'); } 

Usa isto:

 var isInDOM = function(element, inBody) { var _ = element, last; while (_) { last = _; if (inBody && last === document.body) { break;} _ = _.parentNode; } return inBody ? last === document.body : last === document; };