这是之前研究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. 奥格尔巧妙kfifo

    奥格尔巧妙kfifo Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.csdn.net/chen19870707 Date:O ...

  2. PAMIE- Python实现IE自动化的模块

    PAMIE- Python实现IE自动化的模块(附 网易注册代码) 收藏 安装: 今晚弄了一下.已经成功导入PAMIE.具体步骤如下 1.假如你要用PAM30那就就得去下个Python 3.0安装.因 ...

  3. 如何直接访问WEB-INF下列文件

    <servlet> <servlet-name>HE</servlet-name> <jsp-file>/WEB-INF/u_member/Login. ...

  4. matlab 正态分布相关 API

    randn:标准正太分布(μ=0,σ=1) normrnd:正态分布随机数,(需要手动指定 μ,σ,二者均是标量) mvnrnd:多变量正态分布随机数,(需要手动指定 μ,σ(二者为向量))

  5. NYOJ 298 相变点（矩阵高速功率）

    点的变换 时间限制:2000 ms  |  内存限制:65535 KB 难度:5 描写叙述 平面上有不超过10000个点.坐标都是已知的.如今可能对全部的点做下面几种操作: 平移一定距离(M),相对X ...

  6. Emgu-WPF学习使用-Rectangle识别

    原文:Emgu-WPF学习使用-Rectangle识别 环境:Win8 64位 Vs2015 Emgu 版本:emgucv-windesktop 3.2.0.2682 示例图上部流程:原图->灰 ...

  7. C#（WPF）为Grid添加实线边框。

    原文:C#(WPF)为Grid添加实线边框. 相信大家在做WPF项目的时候,都会用到Grid这个布局控件,一般情况下,如果只是为了布局,那就不需要显示它的边框,但是也有特殊需求,如果把它当做表格来使用 ...

  8. XF 按钮控件

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

  9. python3. 报“ImportError: No module named ‘MySQLdb'”

    需要安装PyMysql pip install PyMysql 然后在程序中引入 import pymysql pymysql.install_as_MySQLdb() app.config['SQL ...

  10. javascript的强制类型转换

    1.toString (1)调用toString方法 Array是将数组中的每个元素字符串化,并使用逗号拼接起来 object返回的是内部属性[[Class]]的值,[object Object] n ...