Dan*_*her 6 html javascript dom
我正在制作一个井字游戏。我的问题是我的代码允许重写 X 或 O，即使其中一个正方形已经包含 X 或 O。我正在使用 if 语句根据每次增加 1 的数字变量编写 X 或 O。我想添加另一个条件，如果我的标签为空，则只允许写入 X 或 O。我该怎么做呢？。注意：请只使用 javascript，因为我还没有开始学习 jQuery。提前致谢！
JS
var tds = document.querySelectorAll("td");
var player = 1;
var str = "";
for (var i = 0; i < tds.length; i++) {
tds[i].addEventListener("click", function(){
if( player % 2 === 0 && tds[i] !== "<td>X</td>" && tds[i] !==
"<td>O</td>"){
this.textContent = "O";
} else if (player % 2 !== 0 && tds[i] === "" ) {
this.textContent = "X";
}
player++;
});
}
HTML -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css.css">
<title></title>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script type="text/javascript" src="js.js">
</script>
</body>
</html>
你可以只检查childNodes一个元素的属性，它返回一个Nodelist.
如果它的长度为 0，则您的元素为空。
const elem = document.querySelector("#container")
console.log(elem.childNodes.length)<div id="container"></div>小心，因为换行符text很重要。
node.childNodes.length将拾取您正在检查的节点内的空格或其他元素，以包括格式设置中的任何空格或回车。
例如以下返回3
<td>\n <!-- returns NodeList(3)\xc2\xa0[text, comment, text] -->\n</td>\n<span> <span>将导致1并且<span> <span> </span></span>将导致2上述方法。
除非您确定自己的数据或很好地清理了数据源，否则我将使用以下内容来测试节点是否为空。
\n\n// <div id="SomeElement" />\n\nfunction isEmpty(node) {\n return node.textContent.trim() === "";\n}\n\nisEmpty(SomeElement);\n\n// or\n\nElement.prototype.isEmpty = function() {\n return this.textContent.trim() === "";\n}\n\nSomeElement.isEmpty();\n<td>\n <!-- returns NodeList(3)\xc2\xa0[text, comment, text] -->\n</td>\n// <div id="SomeElement" />\n\nfunction isEmpty(node) {\n return node.textContent.trim() === "";\n}\n\nisEmpty(SomeElement);\n\n// or\n\nElement.prototype.isEmpty = function() {\n return this.textContent.trim() === "";\n}\n\nSomeElement.isEmpty();\nfunction emptyElementNode(node) {\r\n return node.textContent.trim() === "";\r\n}\r\n\r\nvar xo = TicTacToe.getElementsByTagName(\'div\');\r\n\r\nfor (var i = 0; i < xo.length; ++i) {\r\n\r\n\tif (emptyElementNode(xo[i])) {\r\n xo[i].classList.add(\'highlight\');\r\n xo[i].textContent = "\xe2\x9a\xac";\r\n }\r\n\r\n}