dom节点获取文本的方式
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节点获取文本的方式的更多相关文章
- 获取DOM节点的几种方式
DOM 是一个树形结构,操作一个DOM节点,实际上就是这几个操作:更新.删除.添加.遍历 在操作DOM节点之前,需要通过各种方式先拿到这个DOM节点,常用的方法有: 一.通过元素类型的方法来操作: d ...
- 获取元素节点的子节点 & 获取文本节点
1. 获取元素节点的子节点(**只有元素节点才有子节点): ①. childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 ...
- jQuery 获取DOM节点的两种方式
jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1.使用数组索引方式访问,例如: var dom = $(dom)[0]; 如: $("#id&qu ...
- Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理
浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...
- react.js 获取真实的DOM节点
为了获取真实的dom节点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点. var MyComponent = React.crea ...
- Vue 双向数据绑定、事件介绍以及ref获取dom节点
vue是一个MVVM的框架 M model V view MVVM model改变会影响视图view,view改变会影响model 双向数据绑定必须在表单里面使用 //我发现在谷歌浏览器翻译后的网页 ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- 前端JavaScript之DOM节点操作
1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...
- 简单概括下浏览器事件模型，如何获得资源dom节点
在各种浏览器中存在三种事件模型:原始事件模型,DOM2事件模型,IE事件模型.其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持. 浏览器事件模型 ...
随机推荐
- Flask&&人工智能AI --3
一.flask中的CBV 对比django中的CBV,我们来看一下flask中的CBV怎么实现? from flask import Flask, render_template, url_for, ...
- 【ACM】一种排序
一种排序 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 现在有很多长方形,每一个长方形都有一个编号,这个编号可以重复:还知道这个长方形的宽和长,编号.长.宽都是整数 ...
- 下载安装MariaDB Galera 10.1
因为无法访问外网, 配置官网的yum无法下载MariaDB Galera(在MariaDB 10.1 及之后内置了Galera, 不像之前那样需要独立安装) 需要在下载的包 MariaDB-10.1. ...
- over partition by与group by
over partition by与group by 的区别 http://www.cnblogs.com/scottpei/archive/2012/02/16/2353718.html 今天看到一 ...
- ORACLE比较两个数据库的表结构
create table ESPACE_TABLE( TABLE_NAME VARCHAR2(100) not null) create table ESPACE_COLUMN( TABLE_NAME ...
- Json Web Token 简介
1.Json Web Token是干什么 简称JWT,在HTTP通信过程中,进行身份认证. 我们知道HTTP通信是无状态的,因此客户端的请求到了服务端处理完之后是无法返回给原 ...
- weexpack 创建项目, 打包Android 和 ios
1: 首先确保 node.js版本大于6.0, 不然使用 weexpack 时会报错(部分使用es6语言,node版本太低不支持es6) 下面所有都是命令行执行的命令 2: 全局安装 weexpack ...
- 获取hudson持续构建编译结果的一种方法
作者:朱金灿 来源:http://blog.csdn.net/clever101 很多时候使用hudson结合VisualStudio进行持续构建后需要获取持续构建的编译结果,通过编译结果来知道哪些项 ...
- 构建第一个Spring Boot2.0应用之集成dubbo上---环境搭建（九）
一.环境: Windows: IDE:IntelliJ IDEA 2017.1.1 JDK:1.8.0_161 Maven:3.3.9 springboot:2.0.2.RELEASE Linux(C ...
- Android-->RxJava2更新体验
截止日前最新版2017-3-15: RxJava compile ‘io.reactivex:rxjava:’ compile ‘io.reactivex:rxandroid:’ RxJava2 co ...