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. Sqoop Export HDFS

    Sqoop Export应用场景——直接导出 直接导出 我们先复制一个表,然后将上一篇博文(Sqoop Import HDFS)导入的数据再导出到我们所复制的表里. sqoop export \ -- ...

  2. pat1097. Deduplication on a Linked List (25)

    1097. Deduplication on a Linked List (25) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 ...

  3. File 元素 都有files属性

    File 元素 都有files属性 必须有 name 才能传到后台 Html data-* 存储string 值 Jquery data() 可以存储对象 ,但是执行后页面看不到,可以取到     P ...

  4. 固定ip地址

    IP.  配置文件写数据库文件连接时,之前一直是就写个.  ; 毕竟之前就自己本地用.现在需要,写ip地址,但是公司点的ip的都是自动获得的.并且过一段时间还会改变. 所以,需要固定一下啊. 首先cm ...

  5. JAVA中面向对象

    一.方法: 1.方法概述: 在JAVA中,方法就是用来完成解决某件事情或实现某个功能的办法. 2.方法的语法格式: 修饰符  返回值类型 方法名(参数类型 参数名1,参数类型 参数名2,.....){ ...

  6. codevs 1664 清凉冷水

    1664 清凉冷水 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold         题目描述 Description 闷热的夏天,威斯康辛州的奶制品地区提供冷水供奶牛 ...

  7. java基础概念整理综合 及补充（jdk1.8）

    2018 java基础 笔记回顾摘要 一 1,html 与 注释: <!--   -->  注释不能嵌套 代码都得有注释. 2,空格符:   3,css选择的优先级: id选择器 > ...

  8. [转] eclipce使用vim 开启装逼模式

    原文:http://blog.csdn.net/fatal360/article/details/12321613 1.在eclipse中使用vi模式的插件Vrapper打开eclipse,在Help ...

  9. JS随机生成100个DIV每10个换行(换色，生成V字和倒V)

    附图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  10. 【MFC】可以换行的编辑框

    在mfc中编辑框允许输入多行时,换行符被表示为<归位><换行>即“\r\n”,用ascii码表示为13 10 如果为编辑框中想要输入换行,就请将编辑框的属性: Auto HSc ...