JavaScript - How to know if an element is empty?

You could just check the childNodes property of an element, which returns a Nodelist.

If it's length is 0, then your element is empty.

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

<div id="container"></div>

Careful as line breaks count as text though.

node.childNodes.length will pick up spaces or other elements inside the node you're checking, to include any spacing or returns from formatting.

e.g. The following returns 3

<td>
  <!-- returns NodeList(3) [text, comment, text] -->
</td>

  will result in 1 and    will result in 2 with the above method.

Unless you're sure of your data or cleansing your data source well, I'd use the following to test against node emptiness.

// <div id="SomeElement" />

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

<div id="TicTacToe">
  <div>⚬</div>
  <div>×</div>
  <div>×</div>
  <div>⚬</div>
  <div>⚬</div>
  <div>×</div>
  <div></div>
  <div>×</div>
  <div>⚬</div>
</div>

You can use innerHtml property to check if element contain anything. But I would prefer to add class marked when you set the html X or O. Then in your js check if the element has class marked. Add class on click event of td using:

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("(^|\\s)" + className + "(\\s|$)").test(element.className);
}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css.css">
    <title></title>
  </head>
  <body>
    <table>
      <tr>
        <td onclick="mark(this)"></td>
       .
       .
        <td></td>
      </tr>
    </table>
    <script type="text/javascript" src="js.js">

    </script>
  </body>
</html>

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

JavaScript - How to know if an element is empty?

Tags:

Javascript

Html

Dom

Related

Recent Posts