这是之前研究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. [Scikit-Learn] - 数据预处理 - 缺失值（Missing Value）处理

    reference : http://www.cnblogs.com/chaosimple/p/4153158.html 关于缺失值(missing value)的处理 在sklearn的prepro ...

  2. .net core下，Ocelot网关与Spring Cloud Gateway网关的对比测试

    有感于 myzony 发布的 针对 Ocelot 网关的性能测试 ,并且公司下一步也需要对.net和java的应用做一定的整合,于是对Ocelot网关.Spring Cloud Gateway网关做个 ...

  3. WPF中取得预定义颜色

    原文:WPF中取得预定义颜色 使用XAML代码取得.net预定义颜色:<Page    xmlns="http://schemas.microsoft.com/winfx/2006/x ...

  4. Leetcode 100 Same Tree 二叉树

    就是判断两棵树的值和结构是否相同 注意:要判断是否所有的树节点是否为NULL /** * Definition for a binary tree node. * struct TreeNode { ...

  5. 新版【CefSharp】 禁用右键菜单 43.00+

    原文:新版[CefSharp] 禁用右键菜单 43.00+ 禁用右键菜单其实是很容易的.主就要是实现一个接口 IMenuHandler ,这个接口有一个  OnBeforeContextMenu 的方 ...

  6. Java数据结构和算法的数组

    阵列的功能: 1.固定大小 2.相同的数据类型 3. 4.数据项可反复 Java数据类型:基本类型(int和double)和对象类型.在很多编程语言中.数组也是基本类型.但在Java中把它们当作对象来 ...

  7. WPF中实现PropertyGrid(用于展示对象的详细信息)的三种方式

    原文:WPF中实现PropertyGrid(用于展示对象的详细信息)的三种方式 由于WPF中没有提供PropertyGrid控件,有些业务需要此类的控件.这篇文章介绍在WPF中实现PropertyGr ...

  8. Bootstrap按钮组 按钮工具栏 嵌套

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

  9. JS 数组两种定义方式

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  10. ELINK编程器典型场景之多APP文件下载

    有些应用场合中,单MCU内会采用BootLoader+APP1+APP2的加载模式,程序启动时先进入BootLoader程序,依据设定条件跳转至APPx应用运行:为满足此类需求,设计多达5个程序文件( ...