什么是#text以及如何删除它？

Question

我正在使用Bootstrap而且我不知道我是否做得对，但是一个ID为“text”的未知元素就是从哪儿冒出来的。每当我在浏览器上打开页面时，每个<li>元素之间都会显示#text。如果我检查页面，那些#text（s）显示为子弹。

这是我正在处理的代码：

<ul class="list-inline">
    <li>
        <a href="#">
            <img src="images/laptops.jpg" alt="">
            <p>Laptops</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="images/tablets.jpg" alt="">
            <p>Tablets</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="images/desktops.jpg" alt="">
            <p>Desktops</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="images/monitors.jpg" alt="">
            <p>Monitors</p>
        </a>
    </li>
</ul>

浏览器检查器的屏幕截图：

Answer 1

它们不是元素，“text”不是ID。它们是文本节点，表示DOM中标记之间的空白字符。

如果要删除源代码，请从源代码中删除空格，制表符和换行符。它们不应该是你需要关心的任何东西。

子弹只是从列表项中获得的正常子弹。如果要更改它，请调整CSS list-style属性。

Answer 2

正如昆汀回答的那样，＃text是节点。我很遗憾地说这些是元素。由于我不再感到宽慰，我不会再看到这些节点，我会用另一种方法来删除它们。

所以我看到James Edward的这个sitepoint article标题为＃34;从DOM中移除无用的节点＆＃34;。本文解释了为什么我们应该清理DOM以及代码如何工作。如果他们将页面关闭（希望不是），这里是发布的功能：

function clean(node) {
    for (var n = 0; n < 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);
        }
    }
}
clean(document);