JavaScript – ¿Cómo saber si un elemento está vacío?

Hola, hallamos la respuesta a tu búsqueda, continúa leyendo y la obtendrás más abajo.

Solución:

Podrías simplemente revisar el childNodes propiedad de un elemento, que devuelve un Nodelist.

Si su longitud es 0, entonces su elemento está vacío.

const elem = document.querySelector("#container")
console.log(elem.childNodes.length)

Cuidado ya que los saltos de línea cuentan como text aunque.

node.childNodes.length recogerá espacios u otros elementos dentro del nodo que está comprobando, para incluir cualquier espacio o devolución del formato.

por ejemplo, las siguientes devoluciones 3

  resultará en 1 y    resultará en 2 con el método anterior.

A menos que esté seguro de sus datos o esté limpiando bien su fuente de datos, usaría lo siguiente para probar contra el vacío del nodo.

// 


function isEmpty(node) 
  return node.textContent.trim() === "";


isEmpty(SomeElement);

// or

Element.prototype.isEmpty = function() 
  return this.textContent.trim() === "";


SomeElement.isEmpty();

function emptyElementNode(node) 
  return node.textContent.trim() === "";


var xo = TicTacToe.getElementsByTagName('div');

for (var i = 0; i < xo.length; ++i) 

	if (emptyElementNode(xo[i])) 
    xo[i].classList.add('highlight');
    xo[i].textContent = "⚬";
  

#TicTacToe 
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 0.063rem;
  width: 6.25rem;
  height: 6.25rem;
  align-items: center;
  justify-items: center;
  margin: -0.063rem;
  overflow: hidden;


#TicTacToe 
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 0.063rem;
  width: 6.25rem;
  height: 6.25rem;
  align-items: center;
  justify-items: center;
  margin: -0.063rem;
  overflow: hidden;


#TicTacToe div
  position: relative;


#TicTacToe div::before 
  content: "";
  display: block;
  position: absolute;
  width: calc(6.25rem / 3);
  height: calc(6.25rem / 3);
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: #fff;
  z-index: -1;
  outline: 1px solid #222;


#TicTacToe .highlight::before 
  background: #ddd;


#TicTacToe div
  position: relative;


#TicTacToe div::before 
  content: "";
  display: block;
  position: absolute;
  width: calc(6.25rem / 3);
  height: calc(6.25rem / 3);
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: #fff;
  z-index: -1;
  outline: 1px solid #222;


#TicTacToe .highlight::before 
  background: #ddd;

  
⚬
  
×
  
×
  
⚬
  
⚬
  
×
  

  
×
  
⚬

Puedes usar innerHtml propiedad para verificar si el elemento contiene algo. Pero preferiría agregar clase marked cuando configuras el html X or O. Luego, en tu js, verifica si el elemento tiene clase. marked. Agregar clase en el evento de clic de td usando:

function mark(e)
{
var isMarked = hasClass(e,"marked");
if(!isMarked )

e.className+= " marked";
//add X or O

else

//do something else

function hasClass(element, className) 
    return element.className && new RegExp("(^

HTML:

  
    
    
    
  
  
    
       .
       .
        
    
  

Referencia de HasClass: http://sonnyt.com/blog/development/javascript-check-if-element-has-class

Recuerda que puedes dar recomendación a esta división si te valió la pena.

---

---

Utiliza Nuestro Buscador