Question

我有这样的标记：

<table id='myTable'>
 <thead>
   <tr>
    <td>Hello</td>
   </tr>
 </thead>
</table>

但是当我尝试选择#table的firstChild时，它会返回空格（正如预期的那样）。

var ss = document.getElementById("myTable");
console.log(ss.firstChild);

它返回：

 <TextNode textContent="\n     ">

如何在获取子节点时过滤空格？

Answer 1

请看这里的文章http://www.sitepoint.com/removing-useless-nodes-from-the-dom/

这家伙给出了一个JS功能，可以过滤掉所有的空白子节点。

您可以阅读该功能的详细信息以及该文章中为何如此方便。我将在这里复制粘贴代码。

function clean(node)
{
   for(var n = 0; n &lt; node.childNodes.length; n++)
   {
       var child = node.childNodes[n];
       if (child.nodeType === 8 || (child.nodeType === 3 && !/S/.test(child.nodeValue)))
       {
          node.removeChild(child);
          n--;
       }
       else if(child.nodeType === 1)
       {
          clean(child);
       }
   }
}

Answer 2

基本解决方案是循环播放孩子，看看你正在寻找nodeType的孩子。

如果您不想自己做，那么有很多DOM库可供您使用（jQuery是最受欢迎的，但不一定是最好的）。

Answer 3

您可以使用.firstElementChild将始终返回第一个元素，而.firstChild可能会返回空格（如果有的话）以保留基础HTML源代码的格式。

选择firstChild和whitespace问题

3 个答案: