1. innerHTML

innerHTML可以作为获取文本的方法也可以作为修改文本内容的方法

element.innerHTML 会直接返回element节点下所有的HTML化的文本内容

<body>
        <div>文本</div>
        <div>文本</div>
        
</body>
document.body.innerHTML    //返回"<div>文本</div><div>文本</div>";

同样逆向的：

document.body.innerHTM="<div>文本</div><div></div>"会生成

<body>

<div>文本</div>
    <div>文本</div>

</body>

！注意 innerHTML方法只能作用于元素节点调用；文本节点并不能使用这个方法返回undefined！

2. nodeValue

nodeValue是一个HTML DOM的对象属性；

同样的 可以通过 nodeValue设置节点的文本内容也可以直接返回文本内容

直接用节点对象调用就都可以： 如上例

document.getElementsByTagName(div)[0].childNodes[0].nodeValue //返回“文本”

另外 nodeValue 属性并不只存在于文本节点下  元素节点和属性节点对象也都具有nodeValue属性

属性节点的 nodeValue属性返回属性值
元素节点的 nodeValue属性返回null

3.textContent

textContent与innerHTML方法类似会返回对象节点下所有的文本内容

但是区别为 textContent返回的内容只有去HTML化的文本节点的内容 如上例：

document.body.textContent //返回"文本文本" ！注意在DOM中标签换行产生的空白字符会计入DOM中作为文本节点

另外IE8以前不支持textContent属性

4.innerText

innerText方法与textContent方法类似 并且和innerHTML一样也是作用于元素节点上但是浏览器对于这两种方法解析空白字符的机制不一样；不是很常用类似的还有outText outHTML等类似操作文本相关的方法，不是很常用；最后要提醒一点：文本与文本节点一定要区分，有些方法是依靠元素节点返回子文本内容，有些方法是文本节点返回自身文本内容，文本节点是对象而文本只是字符串。
类似的还有outText outHTML等类似操作文本相关的方法，不是很常用；

最后要提醒一点：文本与文本节点一定要区分，有些方法是依靠元素节点返回子文本内容，有些方法是文本节点返回自身文本内容，文本节点是对象而文本只是字符串。

dom节点获取文本的方式的更多相关文章

  1. 获取DOM节点的几种方式

    DOM 是一个树形结构,操作一个DOM节点,实际上就是这几个操作:更新.删除.添加.遍历 在操作DOM节点之前,需要通过各种方式先拿到这个DOM节点,常用的方法有: 一.通过元素类型的方法来操作: d ...

  2. 获取元素节点的子节点 & 获取文本节点

    1. 获取元素节点的子节点(**只有元素节点才有子节点):              ①. childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点          ...

  3. jQuery 获取DOM节点的两种方式

    jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1.使用数组索引方式访问,例如: var dom = $(dom)[0]; 如: $("#id&qu ...

  4. Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理

    浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...

  5. react.js 获取真实的DOM节点

    为了获取真实的dom节点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点. var MyComponent = React.crea ...

  6. Vue 双向数据绑定、事件介绍以及ref获取dom节点

    vue是一个MVVM的框架 M model V view MVVM  model改变会影响视图view,view改变会影响model 双向数据绑定必须在表单里面使用 //我发现在谷歌浏览器翻译后的网页 ...

  7. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  8. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  9. 简单概括下浏览器事件模型，如何获得资源dom节点

    在各种浏览器中存在三种事件模型:原始事件模型,DOM2事件模型,IE事件模型.其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持. 浏览器事件模型 ...

随机推荐

  1. POJ1442 Black Box 堆

    用大根堆和小根堆分别存放前$i-1$大的元素前$k-i$小的元素. 将当前序列的元素压入最小堆,如果最小堆的最小数大于最大堆的最大数则进行交换,保证最大堆中的所有数小于最小堆. 因为$i$值每进行一次 ...

  2. Java文件与io——缓冲流

    对文件或其它目标频繁的读写操作,效率低,性能差. 使用缓冲流的好处,能够更高效的读写信息,原理是将数据先缓冲起来,然后一起写入或者读取出来. BufferedInputStream:为另一个输入流添加 ...

  3. Centos7搭建redis，同一服务器启动两个端口的redis

    1.安装redis [1]下载安装包 #准备安装文件夹 mkdir /usr/local/soft/redis #进入文件夹 cd /usr/local/soft/redis #下载安装包 wget ...

  4. Docker | 第七章：Docker Compose服务编排介绍及使用

    前言 前面章节,我们学习了如何构建自己的镜像文件,如何保存自己的镜像文件.大多都是一个镜像启动.当一个系统需要多个子系统进行配合时,若每个子系统也就是镜像需要一个个手动启动和停止的话,那估计实施人员也 ...

  5. wcf_消息通信模式(下) 双工通讯

    原文:[老老实实学WCF] 第十篇 消息通信模式(下) 双工 第十篇 消息通信模式(下) 双工 在前一篇的学习中,我们了解了单向和请求/应答这两种消息通信模式.我们知道可以通过配置操作协定的IsOne ...

  6. wcf post

    服务端: 1.接口 [OperationContract] [ServiceKnownType(typeof(CreatMicroBlogFeedViewModel))] [WebInvoke(Bod ...

  7. 解决在eclipse中导入项目名称已存在的有关问题

    新建项目-Import-File System-找到相应的文件夹-Overwrite existing resources without warning打钩,选中项目即可

  8. 谈谈我对MVC的View层实现的理解

    MVC框架可以把应用清晰明了地分为三个部分:Model层–数据层,View层–视图层,Controller–逻辑层,Model层负责整合数据,View层负责页面渲染,Controller层负责实现业务 ...

  9. mysql mysqldump 本地数据库导入本地数据库的命令

    C:\Users\Administrator>mysqldump -h localhost -P 3306 -u root -proot -n -R --triggers foryou |mys ...

  10. 从零开始的全栈工程师——js篇2.10（对象与构造函数）

    对象与构造函数 一.js数据类型 基本数据类型:string   undefined   null  boolean  number 引用数据类型  Object  array  function 二 ...