时间戳

首页 > 解决方案 > html中元素之间的空格（节点）

javascript - html中元素之间的空格（节点）

问题描述

为什么在我的站点中我看到特定插件的元素之间的白色节点？

这是一个 WordPress，这个空格在元素之间，我想删除它，但使用 DOM 我无法选择它。我尝试更改主题并且插件运行完美，所以我认为这是主题的问题但我无法更改它。

那么我该如何解决？我可以用 CSS/JavaScript/jQuery 删除/隐藏它吗？如果我使用 Inspector 并单击“在控制台中使用”，它会显示一些信息：

#text
​
assignedSlot: null
​
childNodes: NodeList []
​
data: "\n        "
​
firstChild: null
​
isConnected: true
​
lastChild: null
​
length: 9
​
nextElementSibling: null
​
nextSibling: null
​
nodeName: "#text"
​
nodeType: 3
​
nodeValue: "\n        "
​
textContent: "\n        "
​
wholeText: "\n        "

在此处输入图像描述

标签： javascripthtmljquerycsswordpress

解决方案

白色节点由元素节点的开始和结束标记之间的文本数据创建，您的文本数据是 ¨/n ¨、换行符和空格，如果要隐藏这些白色节点，您必须使用 removeChild 删除每个文本子节点(text_node) 方法来自父 element_node，或者不要在源文档的元素内创建文本数据(¨/n¨)。文档内的文本数据示例。

<HTML> 
<HEAD> 
<TITLE> A Simple Page </TITLE>
 </HEAD> 
<BODY> 
<P ID=”paragraph1”&gt;
 This is the <--! For example this line is Text Data for P element --> 
<EM ID=”emphasis1”&gt;
 one and only  <--! This line is Text Data for EM element -->
 </EM>
 paragraph on the page.  <--! This line ii  Text Data for P element --> /P> 
</BODY> 
</HTML

删除父元素节点内的文本节点的示例。从元素父节点中仅删除中间文本子节点：

function Remove_TextNode(parent_node) {
 for (i = 0 ; i < parent_node.childNodes.length; i++) {
    if (parent_node.childNodes.item(i).nodeName =="#text"){
         parent_node.removeChild(parent_node.childNodes.item(i));  
         Remove_TextNode(parent_node);}
  }
}

推荐阅读