这是之前研究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>节点，就算文本节点里面没有任何文字，它也是依旧存在的~

有关Html页面节点的简单理解的更多相关文章

  1. Less与TypeScript的简单理解与应用，并使用WebPack打包静态页面

    既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 创建空项目 使用Less 使用TypeScript 使用WebPack 开始写项目 总 ...

  2. 【原创】分布式之数据库和缓存双写一致性方案解析(三) 前端面试送命题（二）-callback，promise，generator，async-await JS的进阶技巧 前端面试送命题（一）-JS三座大山 Nodejs的运行原理-科普篇 优化设计提高sql类数据库的性能 简单理解token机制

    [原创]分布式之数据库和缓存双写一致性方案解析(三)   正文 博主本来觉得,<分布式之数据库和缓存双写一致性方案解析>,一文已经十分清晰.然而这一两天,有人在微信上私聊我,觉得应该要采用 ...

  3. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  4. 关于 Promise 的一些简单理解

    一.ES6 中的 Promise 1.JS 如何解决 异步问题? (1)什么是 同步.异步? 同步指的是 需要等待 前一个处理 完成,才会进行 下一个处理. 异步指的是 不需要等待 前一个处理 完成, ...

  5. 简单理解Struts2中拦截器与过滤器的区别及执行顺序

    简单理解Struts2中拦截器与过滤器的区别及执行顺序 当接收到一个httprequest , a) 当外部的httpservletrequest到来时 b) 初始到了servlet容器 传递给一个标 ...

  6. Deep learning：四十六(DropConnect简单理解)

    和maxout(maxout简单理解)一样,DropConnect也是在ICML2013上发表的,同样也是为了提高Deep Network的泛化能力的,两者都号称是对Dropout(Dropout简单 ...

  7. Deep learning：四十二(Denoise Autoencoder简单理解)

    前言: 当采用无监督的方法分层预训练深度网络的权值时,为了学习到较鲁棒的特征,可以在网络的可视层(即数据的输入层)引入随机噪声,这种方法称为Denoise Autoencoder(简称dAE),由Be ...

  8. 简单理解ECMAScript2015中的箭头函数新特性

    箭头函数(Arrow functions),是ECMAScript2015中新加的特性,它的产生,主要有以下两个原因:一是使得函数表达式(匿名函数)有更简洁的语法,二是它拥有词法作用域的this值,也 ...

  9. 简单理解前端web开发的MVC模式

    随着前端Ajax兴起.前端开发工作进一步划分:js开发和ui页面制作.另外从整个前端项目的清晰明朗以可扩展性角度来看,MVC的应用也越来越必要,特别是对大的项目. 例如 需要给一个页面上的button ...

随机推荐

  1. 从DOS bat启动停止SQL Server (MSSQLSERVER)服务

     由于机器上装了SQL Server2008,导致机器开机变慢,没办法只能让SQL Server (MSSQLSERVER) 服务默认不启动.但是每次要使用SQL Server时就必须从控制面板-管理 ...

  2. 微信公众号开发系列-Http请求包基类

    HttpHelper请求包基类,支持get请求和POS要求.以促进微通道交互界面的开发,为了准备的人机交互界面,背部. 1.HttpHelper帮助基类 [csharp] view plaincopy ...

  3. 形态学-扩大-C代码

    直接在代码,难.他们明白: void MorhpolotyDilate_ChenLee(unsigned char* pBinImg, int imgW, int imgH, Tpoint* mask ...

  4. XF 列表视图事件

    <?xml version="1.0" encoding="utf-8" ?><ContentPage xmlns="http:// ...

  5. Code First 连接已有数据库

    连接数据库                 生成结果并没有一个可视化界面(Model First有)     其他 连接数据库之后,可以采用migration管理第一次add-migration XX ...

  6. MVC基架生成的Create视图

    @model MyMusicStore.Models.Album @{     ViewBag.Title = "Create"; } <h2>Create</h ...

  7. comtextMenu 如何正确的响应MouseLeave事件

    今天给菜单加上这个事件,发现弹出菜单后 鼠标怎么动都不会触发 mouseLeave事件 解决方法是 在菜单loaded事件中,利用visualTreeHelper 访问他内部的border控件,把这个 ...

  8. 图像滤镜艺术---Glow Filter发光滤镜

    原文:图像滤镜艺术---Glow Filter发光滤镜 Glow Filter发光滤镜 Glow Filter发光滤镜是一种让图像产生发光效果的滤镜,它的实现算法如下: 1,对原图P进行高斯模糊得到图 ...

  9. Android基础开发入门（一）

    前言:我学了一年多的C#(从学编程算起,也没有两年,我现在大二下),中间也一直在学WP开发,虽然技术不咋地,很渣渣,但微软在Build大会上宣布的策略让我觉得有必要学习一下安卓开发了.关于微软的策略, ...

  10. dotnet core 跨平台编译发布

    vs2017 建立的项目,在项目目录 ,执行 dotnet publish -r ubuntu.15.04-x64 dotnet publish -r linux-x64 dotnet publish ...