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. 浅谈关于SRAM与DRAM的区别

    在上体系结构这门课之前,我只知道DRAM用作内存比较多,SRAM用作cache比较多.在今天讲到内存技术时,我对于这两个基础概念有了更加完整的认识.这篇文章是我的听课心得,现在分享给各位,仅供参考,若 ...

  2. c# Equals对比忽略大小写

    String.Equals(str1,str2,StringComparison.CurrentCultureIgnoreCase); StringComparison.CurrentCultureI ...

  3. 安装mongodb并配置

    下载网址http://dl.mongodb.org/dl/win32/x86_64 mongodb-win32-x86_64-2008plus-ssl-v3.4-latest.zip 解压d盘命名mo ...

  4. chapter05_20180330

    // 5.7 主构造器// 主构造器的参数直接旋转在类名之后class Person57(val name: String, val age: Int) { // 上边()中的内容就是主构造器的参数} ...

  5. (转)linux自定义开机启动服务和chkconfig使用方法

    原文:https://www.cnblogs.com/jimeper/archive/2013/03/12/2955687.html linux自定义开机启动服务和chkconfig使用方法 1. 服 ...

  6. docker的卸载方法

    卸载: 1.查询docker安装过的包: yum list installed | grep docker 2.删除安装包: yum remove docker-ce.x86_64 ddocker-c ...

  7. drools的error：Jboss rule 6.4.0 Cannot find a default StatelessKieSession

    drools的kmodule.xml文件,如果是默认加载必须放在META-INF的文件夹下,如下图 官网大佬原话 Have you defined kieSession and KieBase nam ...

  8. onclientclick与onclick的问题.

    <script language="javascript" type="text/javascript"> document.getElementB ...

  9. Java算法面试题 一个顺子带一对

    打牌里面经常出现的5张牌,一个顺子带一对,给你五张牌,比如:1,2,2,2,3 或者 5,6,7,4,4 或者 2,4,3,5,5 或者 7,5,9,6,9 ,这种情况就符合一个顺子带一对,则返回 t ...

  10. blog 题解目录

    洛谷: 1.P2430 严酷的训练 2.CF784E Twisted Circuit 3.P1886 滑动窗口 4.P1090 合并果子 5.P1119 灾后重建 6.P1690 贪婪的Copy 7. ...