有关Html页面节点的简单理解

最新推荐文章于 2024-07-18 11:30:00 发布

Jerish_C

最新推荐文章于 2024-07-18 11:30:00 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： web前端 html javascript Html文本节点

本文链接：https://blog.csdn.net/u012999985/article/details/47857437

版权

本文主要面向web前端初学者，分享了作者在使用JavaScript和CSS进行网站开发后对HTML文本节点与普通节点区别的理解。通过示例说明即使文本节点内无文字，它们依然存在。在<div>中存在三个节点，包括两个文本节点和一个<b>元素节点。

摘要由CSDN通过智能技术生成

这是之前研究web前端的一点经验，主要针对刚入门还没怎么研究的朋友。

因为我发现我在用js，css参与过网站开发项目后仍然没有理解文本节点与普通节点的差别，所以记下来拿来分享一下。

先上结论：<div>之内有三个节点，包括两个文本节点和一个<b>节点，就算文本节点里面没有任何文字，它也是依旧存在的~

下面是一个简单的Html界面。

<html>
<body>
<div>这是div的第一个子节点ObjectText类型
     <b>这是div的第二个子节点内容</b>
     这是div的第三个子节点ObjectText类型
</div>
<br/>
<br/>


<script type="text/javascript">
//下面用js写一段代码用来显示我们想看到的信息
var getTag=document.getElementsByTagName("div")   //获取div节点
 
document.write("TagName:"+getTag[0].tagName+"<br/>")
document.write("nodeValue:"+getTag[0].nodeValue+"<br/>")
document.write("innerHTML:"+getTag[0].innerHTML+"这里用write看不出，alert就能看到全部信息"+"<