这是之前研究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. mongodb 批量更新 数组的键操作的文件

    persons该文件的数据如下面的: > db.persons.find() { "_id" : 2, "name" : 2 } { "_id& ...

  2. 拦截和跟踪HTTP请求的主要方法及实现

    一.HTTP 请求的拦截技术可以广泛地应用在反向代理.拦截 Ajax 通信.网页的在线翻译.网站改版重构等方面.而拦截根据位置可以分为服务器端和客户端两大类,客户端拦截借助 JavaScript 脚本 ...

  3. 自定义WPF 窗口样式

    原文:自定义WPF 窗口样式 Normal 0 false 7.8 pt 0 2 false false false EN-US ZH-CN X-NONE 自定义 Window 在客户端程序中,经常需 ...

  4. js小贴士

    1.在js中 定义方法 方法名第一个字母小写.如果是定义类 则第一个字母大学 2.如果想在a标签中点击 触发js方法 而不跳转页面 可以使用类似   <a href="javascri ...

  5. 微服务实践之路--RPC

    微服务实践之路--RPC 重点来了,本文全面阐述一下我们的RPC是怎么实现并如何使用的,跟Kubernetes和Openstack怎么结合. 在选型一文中说到我们选定的RPC框架是Apache Thr ...

  6. Oracle实践--PL/SQL综合之分页存储过程

    Oracle PL/SQL分页的存储过程 Oracle,分页,存储过程三个词结合起来,来个综合点的小练习,运用之前的PL/SQL创建一个分页的存储过程,仅仅须要简单几步就可以. 1.声明一个引用游标 ...

  7. 图形的认识（curve，surface，hypersurface）

    平滑函数(smooth function): curve:曲线: 二维平面: surface:曲面: 三维空间: hypersurface:超曲面: 更高维度: 1. surface 是对平面的泛化, ...

  8. WPF后台动画DoubleAnimation讲解

    WPF后台动画,使用DoubleAnimation做的. 1.移动动画 需要参数(目标点离最上边的位置,目标点离最左边的位置,元素名称) Image mImage = new Image(); Flo ...

  9. [Unity3D]Unity3D叙利亚NGUI血液和技能的冷却效果

    ---------------------------------------------------------------------------------------------------- ...

  10. 从零开始学习 asp.net core 2.1 web api 后端api基础框架(一)-环境介绍

    原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(一)-环境介绍 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.ne ...