这是之前研究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. Docker 入门基础

    Docker是一个能把开发的应用程序自动部署到容器的开源引擎.Docker是新的容器化技术,轻巧,易移植[Build Once, Configure Once And Run Anywhere].Do ...

  2. phpstudy2018升级MySQL5.5为5.7.24教程(图文)

    原文: phpstudy2018升级MySQL5.5为5.7教程(图文) 一.MySQL官网下载MySQL5.7版本,我这里下载的是MySQL5.7.24. 二.直接到D:phpStudyPHPTut ...

  3. Java中定时器

    import java.util.Calendar; import java.util.Date; import java.util.Timer; import java.util.TimerTask ...

  4. 使用WPF实现3D场景[一]

    原文:使用WPF实现3D场景[一] 在这篇文章里,将介绍如何实现一个简单的三维场景,一个三维的空间,包括空间内的三维物体的组合. 首先介绍一下一个三维场景里的基本元素: 先是定义一个简单的三维的场景环 ...

  5. Folly: Facebook Open-source Library Readme.md 和 Overview.md（感觉包含的东西并不多，还是Boost更有用）

    folly/ For a high level overview see the README Components Below is a list of (some) Folly component ...

  6. Java异常处理错误

    Java异常处理错误 研究发现,在编译阶段的最佳时机错误,序之前.然而,编译期间并不能找出全部的错误,余下的问题必须在执行阶段解决.这就须要错误源通过某种方式把适当的信息传给某个接收者,该接收者知道怎 ...

  7. STL 中间&lt; 超载

    相同的代码,mingw能够执行,vs不能执行. vs报告错误: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2h1Y2h1cw==/font/5a6L5 ...

  8. SICP 1.11-1.13

    1.11 递归版本 (define (f n) (cond ((< n ) n) ()) (* (f (- n )) ) (* (f (- n )) ))))) 迭代版本 (define (f ...

  9. 通通WPF随笔（2）——自己制作轻量级asp.net网站服务

    原文:通通WPF随笔(2)--自己制作轻量级asp.net网站服务 大学玩asp.net时就发现VS在Debug时会起一个web服务,这东西也太神奇了服务起得这么快,而相对于IIS又这么渺小. 前几个 ...

  10. wpf 复制/剪切到本地系统剪切板中以供右键粘贴用

    原文:wpf 复制/剪切到本地系统剪切板中以供右键粘贴用   http://www.cnblogs.com/yhdkzy/archive/2012/11/27/2790655.html   /// & ...