Javascript childNodes

Question

I am trying to make a childNode be invisible so that the user will not be able to see it.

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

I have been trying to make the child nodes found within squares invisible so that they do not appear on the screen. Please note that I am only using JavaScript, HTML, and CSS for this project.

Answer 1

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

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

Answer 2

There were a few things incorrect about your code and I took the liberty of taking out bits that didn't merit staying in given what you were trying to do.

• In no way are you manipulating squares other than looping over it. In your code you said squares[i] = hide(squares[i] - not to put to fine a point on it, but this is worthless and does nothing. The list itself is a reference to the nodes, not the nodes themselves. You can think of every item in the list like a sign-post that tells the code where to look. So when that node is changed it doesn't need to be updated in the list because the list is simply saying "this is what you want to look at", it doesn't actually contain a copy of the node.
• because of the reasons listed above you don't need to return anything from your hide function.
• The nodeList in your hide function needs to be iterated over and each node manipulated individually. It's worth noting that you can't say "adjust all of these" at any point in JavaScript unless you yourself create a function that allows that functionality, but under the hood you're still going through every list or array one by one.
• Your nodeList is aptly named. It is a list of nodes. Most people, at least the newer people to JavaScript(no shame for that, we all learn sometime), assume that tags(ae <div></div> , <a></a> , <span></span> ) are nodes. And yes, you're right, they are! But the text within those tags are completely separate and individual nodes as well. This means that when you iterate over all the nodes you probably aren't just getting Element Nodes you might be getting Text Nodes or Document Fragment Nodes or Entity Nodes , etc.
• While we iterate over the nodeList we need to separate out the nodes that we can hide(those with a style object that's able to be manipulated) and we do this by comparing the built-in nodeType property that's in every node with the Node.ELEMENT_NODE property. If it returns true we know absolutely that the node is an Element Node .
• After we've checked that what we're manipulating is an element, we simply set it's display property (which is normally "block") to the value "none" and in that way hiding it on the DOM.

The code below, I think, is what you're looking for.

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

It's worth noting that you could simply use .children instead of .childNodes to return only the elements of a parent node. I don't know if you had a reason for wanting all nodes to be searched through, but this would condense the iteration down to simply setting the style property:

  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')