elemento - javascript id exists
¿Cómo comprobar si existe elemento en el DOM visible? (17)
¿Podrías comprobar si la propiedad parentNode es nula?
es decir
if(!myElement.parentNode)
{
//node is NOT on the dom
}
else
{
//element is on the dom
}
¿Cómo se prueba la existencia de un elemento sin el uso del método getElementById ? He configurado una demostración en vivo para referencia. También imprimiré el código aquí también:
<!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>
Básicamente, lo que demuestra el código anterior es un elemento que se almacena en una variable y luego se elimina de dom. Aunque el elemento se ha eliminado del dominio, la variable conserva el elemento como estaba cuando se declaró por primera vez. En otras palabras, no es una referencia en vivo al elemento en sí, sino más bien una réplica. Como resultado, la verificación del valor de la variable (el elemento) para la existencia proporcionará un resultado inesperado.
La función isNull es mi intento de verificar la existencia de elementos a partir de una variable, y funciona, pero me gustaría saber si hay una manera más fácil de lograr el mismo resultado.
PD: También me interesa por qué las variables de JavaScript se comportan de esta manera si alguien conoce algunos buenos artículos relacionados con el tema.
¿Por qué no getElementById() si está disponible?
Además, aquí hay una manera fácil de hacerlo con jQuery:
if ($(''#elementId'').length > 0) {
// exists.
}
Y si no puedes usar bibliotecas de terceros, solo apégate a JavaScript base:
var element = document.getElementById(''elementId'');
if (typeof(element) != ''undefined'' && element != null)
{
// exists.
}
De contains()
Esta función verifica si un elemento está en el cuerpo de la página. Como contiene es incluyente y determinar si el cuerpo contiene no es la intención de isInPage, este caso devuelve explícitamente false.
function isInPage(node) {
return (node === document.body) ? false : document.body.contains(node);
}
nodo es el nodo que queremos comprobar en el.
La solución más sencilla es verificar la propiedad baseURI , que se establece solo cuando el elemento se inserta en el DOM y vuelve a una cadena vacía cuando se elimina.
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>
Me gusto este enfoque
var elem = document.getElementById(''elementID'');
if( elem )do this
else
do that
también
var elem = ((document.getElementById(''elemID'')) ? true:false);
if( elem ) do this
else
do that
Otra opción element.closest :
element.closest(''body'') === null
Parece que algunas personas están aterrizando aquí, y simplemente quieren saber si existe un elemento (un poco diferente a la pregunta original).
Eso es tan simple como usar cualquiera de los métodos de selección del navegador, y verificar que tenga un valor verdadero (generalmente).
Por ejemplo, si mi elemento tuviera un id de "find-me" , simplemente podría usar ...
var elementExists = document.getElementById("find-me");
Esto se especifica para devolver una referencia al elemento o un null . Si debes tener un valor booleano, simplemente tira un !! Antes de la llamada al método.
Además, puede utilizar algunos de los muchos otros métodos que existen para encontrar elementos, como (todos los que viven fuera del document ):
-
querySelector()/querySelectorAll() -
getElementsByClassName() -
getElementsByName()
Algunos de estos métodos devuelven un NodeList , así que asegúrese de verificar su propiedad de length , porque un NodeList es un objeto, y por lo tanto es veraz .
Para determinar realmente si un elemento existe como parte del DOM visible (como la pregunta formulada originalmente), Csuwldcat proporciona una solución mejor que rodar la suya propia (como esta respuesta solía contener). Es decir, para utilizar el método contains() en elementos DOM.
Podrías usarlo así ...
document.body.contains(someReferenceToADomElement);
Simplemente hago
if(document.getElementById("myElementId")){
alert("Element exists");
} else {
alert("Element does not exist");
}
Funciona para mí y no tuve problemas con eso todavía ...
Solución simple con jQuery.
$(''body'').find(yourElement)[0] != null
También puede usar jQuery.contains , que verifica si un elemento es descendiente de otro elemento. Pasé el document como elemento principal para buscar porque cualquier elemento que exista en la página DOM es un descendiente del document .
jQuery.contains( document, YOUR_ELEMENT)
Una forma sencilla de verificar si el elemento existe puede hacerse a través del código de una línea de jQuery.
Aquí está el código de abajo:
if ($(''#elementId'').length > 0) {
// do stuff here if element exists
}else {
// do stuff here if element not exists
}
Usando contains() , puede verificar la presencia de cualquier elemento en la página (actualmente en el DOM) con bastante facilidad:
document.body.contains(YOUR_ELEMENT_HERE);
NOTA CROSS-BROWSER : el objeto de document en IE no tiene un método - contains() para garantizar la compatibilidad entre navegadores, use document.body.contains() lugar
Utilice querySelectorAll con forEach :
document.querySelectorAll(''.my-element'').forEach((element) => {
element.classList.add(''new-class'');
});
como lo contrario a:
const myElement = document.querySelector(''.my-element'');
if (myElement) {
element.classList.add(''new-class'');
}
Utilizar esta:
var isInDOM = function(element, inBody) {
var _ = element, last;
while (_) {
last = _;
if (inBody && last === document.body) { break;}
_ = _.parentNode;
}
return inBody ? last === document.body : last === document;
};
en lugar de iterar a los padres, solo puede obtener el rectángulo que es todo ceros cuando el elemento se separa de dom
function isInDOM(element) {
if (!element) return false;
var rect=element.getBoundingClientRect();
return (rect.top || rect.left || rect.height || rect.width)?true:false;
}
Si desea manejar el caso de borde de un elemento de ancho y alto de cero en la parte superior de cero y en el de izquierda, puede verificar dos veces iterar a los padres hasta el 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;
}
solución jQuery:
if ($(''#elementId'').length) {
// element exists, do something...
}
Esto me funcionó usando jQuery y no requirió que se usara $(''#elementId'')[0] .
La solución de csuwldcat parece ser la mejor del grupo, pero se necesita una ligera modificación para que funcione correctamente con un elemento que esté en un documento diferente al que se ejecuta el javascript, como un iframe:
YOUR_ELEMENT.ownerDocument.body.contains(YOUR_ELEMENT);
Tenga en cuenta el uso de la propiedad ownerDocument del elemento, a diferencia del document simple ol ''(que puede o no referirse al documento propietario del elemento).
torazaburo publicó un método aún más simple que también funciona con elementos no locales, pero desafortunadamente, utiliza la propiedad baseURI , que no se implementa de manera uniforme en todos los navegadores en este momento (solo pude hacer que funcionara en los basados en webkit). No pude encontrar ningún otro elemento o propiedad de nodo que pudiera usarse de manera similar, por lo que creo que por el momento la solución anterior es tan buena como es posible.