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以外的所有主流浏览器支持. 浏览器事件模型 ...
随机推荐
- jquery对象里面的context参数
jquery源码: jQuery = function( selector, context ) { // The jQuery object is actually just the init co ...
- day01笔记
linux基本命令的学习: 1.查看主机名 hostname 2.修改主机名 hostnamectl set-hostname s16ds 3.linux命令提示符 [root@s16ds ~]# # ...
- Models-查询详细操作
# 单表简单查询13种方法 1.all(): 查询所有结果 all: models.表名.objects.all() book_all=models.Book.objects.all() # 结果是q ...
- Docker从入门到实战（二）
Docker从入门到实战(二) 一:什么是docker Docker是一个开源的应用容器引擎,开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到主流的Linux.MacOS.Windo ...
- 系统启动与Linux的初始化_1
boot 的起源: the term bootstrap refers to a person who tries to stand up by pulling her own boots. (Und ...
- 【开源我写的富文本】打造全网最劲富文本技术选型之经典OOP仍是魅力硬核。
套路--先贴图 demo : http://www.vvui.net/editor/index.html gitee : https://gitee.com/kevin-huang/Bui-Edit ...
- 冷笑话，idea 按删除键就是undo？
第一反应是keymap被改了,一看 那么,看起来就是alt出问题了 解决方法 在公司换一个键盘或者狂按alt
- C# 的两种debug 方法
第一种:需要把调试方法改成debug代码用 #if DEBUG 包裹 using System; using System.Collections.Generic; using System.Text ...
- ssm（Spring、Springmvc、Mybatis）实战之淘淘商城-第九天(非原创）
文章大纲 一.课程介绍二.今日功能介绍三.项目源码与资料下载四.参考文章 一.课程介绍 一共14天课程(1)第一天:电商行业的背景.淘淘商城的介绍.搭建项目工程.Svn的使用.(2)第二天:框架的整合 ...
- hibernate课程 初探单表映射3-4 组件属性
本节内容: 1 简介组件属性 2 demo 1 简介组件属性: <component name = "address" class = "Address" ...