HtmlDom学习_关于获取元素节点div下p节点内容underfind问题

本文链接：https://blog.youkuaiyun.com/weixin_41835485/article/details/103619332

本文介绍了在HTMLDom中遇到通过div获取p节点内容时出现underfined的问题。通过检查代码和理解DOM中空白节点的影响，提出了两种解决方案：1) 调整HTML结构，避免空白文本节点；2) 直接使用`childNodes[0]`获取元素节点。还提及了通过额外方法去除空白节点的其他途径。

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

现在有一段代码:

<div id="d1">
		<p>我是一号文本节点！</p>
		<P>我是二号文本节点！</P>
</div>

需要通过js来获取p里面的文本内容，但是是通过div来获取而不是直接给p节点加上id来获取，那么这很简单：

	<div id="d1">
			<p id="p1">我是一号文本节点！</p>
			<P>我是二号文本节点！</P>
		</div>
		<script>
			var x = document.getElementById("d1");
			document.write(x.firstChild.innerHTML);
		</script>

看起来好像没有什么问题，可是等我一运行：
在这里插入图片描述
运行结果是underfined…我在想是否子节点没获取到，于是我去重新看了下代码
firstchild没问题，我是想获取到当前div节点下的第一个子节点，但是获取失败的话就代表p并没有获取到，百度后发现有一种解决方法即去掉空白，DOM中，空白也是作为一个文本节点：

		<div id="d1"><p id="p1">我是一号文本节点！</p>
			<P>我是二号文本节点！</P>
		</div>
		<script>
			var x = document.getElementById("d1");
			document.write(x.firstChild.innerHTML);
			x.fir
		</script>

把p标签直接放到div标签后发现页面可以显示，但是这样代码看起来就非常的难看。
于是这里就有第二种方法，即直接获取元素节点：

document.write(x.firstElementChild.innerHTML);

当然，百度后发现还有别的方法，有人通过方法来去除空白节点，不过其实没太大必要，需要的人可以自行百度。