JS DOM 中的空白节点的过滤

最新推荐文章于 2022-12-20 15:32:23 发布

转载最新推荐文章于 2022-12-20 15:32:23 发布 · 6.6k 阅读

文章标签：

#button #function #input #html

Javascript 专栏收录该内容

8 篇文章

订阅专栏

本文详细解析了一段HTML代码中的DOM元素结构，解释了如何通过JavaScript获取并操作DOM元素，特别关注了空白节点的处理。通过实现一个自定义函数cleanWhitespace，有效地移除了目标元素内的空格节点，确保了DOM树的清晰和高效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看如下HTML代码

<html>
<head><title>DOM Test</title></head>
<body>
<table> 
	<tr> 
	<td id="TEST">
		<input type="submit" value="确定"/>
		<input type="button" value="取消"/>
	</td>
	</tr> 
</table>

<script type="text/javascript">
<!--
	var td = document.getElementById("TEST");
	alert(td.childNodes.length);	//结果为4 
-->
</script>

</body>
</html>

由于DOM中，空白也是作为一个文本节点，而两个input元素后面都有空白（回车、空格、制表符），所以结果为4，删除空白后结果为2。

为了处理里面的空格节点,用以下函数来处理。

function cleanWhitespace(element) 
{ 
	for(var i=0; i<element.childNodes.length; i++) 
	{ 
		var node = element.childNodes[i]; 
		if(node.nodeType == 3 && !/\S/.test(node.nodeValue)) 
		{ 
			node.parentNode.removeChild(node); 
		} 
	} 
}