Question

我试图让childNode不可见，以便用户无法看到它。

function hideLetters() {
  var squares = document.querySelectorAll( "#squarearea div" );
  for ( var i = 0; i < squares.length; i++ ) {
    squares[ i ] = hide( squares[ i ] );
  }
}

function hide( squares ) {
  var nodeList = squares.childNodes;
  nodeList.style.display = "none";
  squares.childNodes = nodeList;
  return squares;
}

我一直在努力使squares内的子节点不可见，这样它们就不会出现在屏幕上。请注意，我只为此项目使用JavaScript，HTML和CSS。

Answer 1

您需要将它应用于节点列表的每个元素：

squares.childNodes.forEach(node => node.style.display = "none");

Answer 2

你的代码有一些不正确的东西，我冒昧地拿出那些不值得留下的东西，考虑到你要做的事情。

除了循环之外，你决不会操纵squares。在你的代码中你说squares[i] = hide(squares[i] - 不要在它上面说明一点，但这是毫无价值的，什么都不做。列表本身是对节点的引用，而不是节点本身。您可以将列表中的每个项目都想象成一个告诉代码在哪里查看的路标。因此，当该节点被更改时，它不需要在列表中更新，因为列表只是说“这是您想要查看的内容”，它实际上并不包含该节点的副本。
由于上面列出的原因，您无需从hide函数返回任何内容。
需要迭代nodeList函数中的hide并单独操作每个节点。值得注意的是，除非你自己创建一个允许该功能的功能，否则你不能在JavaScript中随时说“调整所有这些”，但是你仍然会逐个浏览每个列表或数组。< / LI>
您的nodeList名称恰如其分。它是一个节点列表。大多数人，至少是JavaScript的新人（没有羞耻，我们都学习了一段时间），假设标签（例如<div></div>，<a></a>，<span></span>）是节点。是的，你是对的，他们是！但是这些标签中的文本也是完全独立的节点。这意味着当您遍历所有节点时，您可能不只是获得元素节点，您可能会获得文本节点或文档片段节点或实体节点等
当我们遍历nodeList时，我们需要分离出我们可以隐藏的节点（具有能够被操作的style对象的节点），我们通过比较内置节点来实现这一点具有nodeType属性的每个节点中的Node.ELEMENT_NODE属性。如果它返回true，我们绝对知道该节点是Element Node。
在我们检查了我们正在操作的是一个元素之后，我们只需将它的display属性（通常是“块”）设置为值"none"，然后以此方式隐藏它关于DOM。

我认为，以下代码正是您所寻找的。

function hideLetters() {
  let squares = document.querySelectorAll("#squarearea div");
  for(let i = 0; i < squares.length; i++) { 
  hide( squares[i] );
  });
}

function hide(squares) {
  var nodeList = squares.childNodes;
  for(let i = 0; i < nodeList.length; i++) {
    if (nodeList[i].nodeType === Node.ELEMENT_NODE) {
      nodeList[i].style.display = "none";
    }
  });
}

值得注意的是，您只需使用.children而不是.childNodes来仅返回父节点的元素。我不知道你是否有理由想要搜索所有节点，但这会将迭代压缩为简单设置样式属性：

  var nodeList = squares.children;
  nodeList.forEach(node => node.style.display = "none");

function hideLetters() {
  let squares = document.querySelectorAll("#squarearea div");
  for (let i = 0; i < squares.length; i++) {
    hide(squares[i]);
  };
}

function hide(squares) {
  var nodeList = squares.childNodes;
  for (let i = 0; i < nodeList.length; i++) {
    if (nodeList[i].nodeType === Node.ELEMENT_NODE) {
      nodeList[i].style.display = "none";
    }
  };
}

hideLetters();

#squarearea div {
  border: solid 1px black;
  width: 10px;
  padding: 3px;
  margin: 10px;
}

<div id="squarearea">
  <div><span>a</span></div>
  <div><span>b</span></div>
  <div><span>c</span></div>
  <div><span>d</span></div>
  <div><span>e</span></div>
  <div><span>f</span></div>
  <div><span>g</span></div>
</div>

Answer 3

试试这个

Array.prototype.slice.call(squares.childNodes).forEach(node => node.style.display = 'none')

Javascript childNodes

3 个答案: