您的位置：首页 > Web前端 > HTML

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

2015-08-22 10:32 495 查看

这是之前研究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就能看到全部信息"+"<br/>")
alert(getTag[0].innerHTML+"<br/>")
document.write("firstChild:"+getTag[0].firstChild+"<br/>")
document.write("firstChild.nodeValue:"+getTag[0].firstChild.nodeValue+"<br/>")
document.write("<br/>")
document.write("<br/>")

for(var i=0;i<getTag[0].childNodes.length;i++)    //遍历子节点
{
document.write("innerHTML："+getTag[0].childNodes[i].innerHTML+"<br/>")

document.write("nodeValue："+getTag[0].childNodes[i].nodeValue+"<br/>")

document.write("类型："+getTag[0].childNodes[i]+"<br/><br/>")

}
document.write(getTag[0].childNodes[1].firstChild.nodeValue)
</script>

</body>
</html>

下面是运行结果：

TagName:DIV

nodeValue:null

innerHTML:这是div的第一个子节点ObjectText类型 这是div的第二个子节点内容 这是div的第三个子节点ObjectText类型这里用write看不出，alert就能看到全部信息

firstChild[object Text]

firstChild.nodeValue这是div的第一个子节点ObjectText类型

innerHTML：undefined

nodeValue：这是div的第一个子节点ObjectText类型

类型：[object Text]

innerHTML：这是div的第二个子节点内容

nodeValue：null

类型：[object HTMLElement]

innerHTML：undefined

nodeValue：这是div的第三个子节点ObjectText类型

类型：[object Text]

这是div的第二个子节点内容

总之，我们需要明白的就是，<div>之内有三个节点，包括两个文本节点和一个<b>节点，就算文本节点里面没有任何文字，它也是依旧存在的~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航