什麼是#text以及如何刪除它？

我正在使用Bootstrap，我不知道我是否正確地做了，但ID爲「文本」的未知元素只是從無處出來。每當我在瀏覽器上打開頁面時，都會在＃<li>之間顯示#text。如果我檢查該頁面，這些#text（s）顯示爲項目符號。什麼是#text以及如何刪除它？

這是我工作的代碼：從瀏覽器檢查

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

截圖：

來源

2017-04-06 Rei-chan

他們不是元素和「文本」是不是一個ID。它們是表示DOM中標籤之間的空白字符的文本節點。

如果您不想使用它們，請從源代碼中刪除空格，製表符和換行符。他們不應該是你需要關心的任何東西。

子彈只是從列表項中獲得的正常項目符號。如果要更改它們，請調整CSS list-style屬性。

來源

2017-04-06 20:28:13 Quentin

謝謝你的答案，昆汀。我很愚蠢，不知道它們是節點。 –

正如Quentin回答的那樣，#text是節點。我很抱歉說這些是元素。由於我不是很安心，我不會再看到這些節點，我尋找另一種方式來消除它們。

所以我看到了James Edward的sitepoint article題爲「從DOM中刪除無用的節點」。文章解釋了爲什麼我們應該清理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);

來源

2017-04-06 21:18:50

什麼是#text以及如何刪除它？

回答

相關問題