第十章—DOM(三)——Text类型
文本节点由TEXT类型表示,包含纯文本内容,Text节点具有以下特征:
看看下面的代码:
div元素开始和结束标签只要存在内容,就会创建一个文本节点。可以使用以下代码来访问元素的这些文本子节点:
访问元素的文本节点的代码
但是这里有几个小问题:
<body>
<div></div>
<script>
var div = document.getElementsByTagName('div')[0];//这里没有这句,只是单独使用div会导致异常1
var textNode = div.firstChild || div.childNodes[0];
alert(textNode);//这里div标签没有文本节点的话会导致异常2,同时无法设置nodeValue属性
textNode.nodeValue = 'some <strong> other </strong> message';
</script>
因此,只有这个文本 节点存在于当前的文档树中,那么修改文本节点的结果才会有反映。
输出:
<div id="myDiv"> </div>
<script>
var parent = document.getElementById('myDiv');
var div = document.createElement('p');
div.className = 'test';
var text = document.createTextNode('<strong> Hello World </strong>')
div.appendChild(text);
parent.parentNode.insertBefore(div,parent);//此处是使用parent.parentNode来代表div的父节点,换句话说不必获取父元素
输出:
第十章—DOM(三)——Text类型的更多相关文章
- javascript之DOM(三Element类型)
Element类型用于表现XML和HTML的元素,提供了对元素标签名.子节点及特性的访问. 要访问标签名可以使用nodeName和tagName属性,其返回值是一样的. <p id=" ...
- 第十章—DOM(0)—NODE类型
DOM1定义了一个node接口,该接口由DOM的所有节点类型实现. 所有的节点都存在这样或那样的关系.在HTML中,head,body可以看出是html的子元素,html是head,body的父元素, ...
- 第十章—DOM(一)——Document类型
DOCUMENT类型 JS通过document类型表示文档,在文档中document对象是HTMLDocument的一个实例,表示整个HTML页面.document对象是window对象的一个属性,因 ...
- 从原型链看DOM--Text类型
文本节点由Text类型表示,包含的是可以按照字面解释的纯文本内容,纯文本中可以包含转义后的HTML字符但不能包含HTML代码.原型链继承关系为:textNode.__proto__->Text. ...
- JavaScript中DOM节点层次Text类型
文本节点 标签之间只要有一点内容都会有文本节点,包括空格 创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 == ...
- JavaScript高级程序设计学习笔记第十章--DOM
1.DOM:文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). 2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 3.文档节点是每个 ...
- javascript之DOM(四其他类型)
一.Text类型 文本节点由Text类型表示,指的是可以以字面意思解释的纯文本内容,其中包含HTML代码. nodeType=3 nodeName=#text nodeValue=文本内容 paren ...
- mysql中char,varchar与text类型的区别和选用
关于char,varchar与text平时没有太在意,一般来说,可能现在大家都是用varchar.但是当要存储的内容比较大时,究竟是选择varchar还是text呢?不知道...... 于是去查阅了一 ...
- javascript系列之DOM(三)---事件
原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...
随机推荐
- 转:Linux 文件IO理解
源地址http://blog.csdn.net/lonelyrains/article/details/6604851 linux文件IO操作有两套大类的操作方式:不带缓存的文件IO操作,带缓存的文件 ...
- centos7下Elasticsearch5.2.2和head 插件环境搭建
ElasticSearch是一个基于Lucene构建的开源,分布式,RESTful搜索引擎.设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便.支持通过HTTP使用JSON进行数据索引 ...
- django中的request对象
Request 我们知道当URLconf文件匹配到用户输入的路径后,会调用对应的view函数,并将 HttpRequest对象 作为第一个参数传入该函数. 我们来看一看这个HttpRequest对 ...
- Java学习之二(线程(了解) JVM GC 垃圾回收)
线程与进程(了解)→JVM→字节码→GC 一.程序 = 算法 + 数据结构(大佬) 二.程序 = 框架 + 业务逻辑(现实) 1.线程与进程.同步与异步 1.1进程是什么? 进程就是操作系统控制的基本 ...
- MyBatis - 输入和输出参数
基础知识 mybatis规定mapp.xml中每一个SQL语句形式上只能有一个@parameterType和一个@resultType 1. 返回值是一个对象的集合,@resultType中只能写该对 ...
- 09_springmvc异常处理
一.异常处理思路 系统中异常包括两类:预期异常和运行时异常RuntimeException,前者通过捕获异常从而获取异常信息,后者主要通过规范代码开发.测试通过手段减少运行时异常的发生. 系统的dao ...
- Pandas对于CSV的简单操作
Pandas对于CSV的简单操作 最近在研究pandas对于csv文件的读取以及一些操作,网上的信息比较乱,写篇博客记录一下,毕竟自己写的才是最适合自己的用法. 首先我们应该都知道,pandas是一个 ...
- 给java mongodb 官方driver 增加bean 操作
mongodb官方的java driver不支持直接插入java bean,只能使用DbObject的Key,Value形式进行insert,update,(c# mongodb官方driver类 ...
- PostgreSQL DISTINCT ON
https://stackoverflow.com/questions/3800551/select-first-row-in-each-group-by-group select DISTINCT ...
- React学习整理
React介绍 React设计思想及其独特,属于革命性创新,性能出众,代码逻辑却非常简单. 库(library):小而巧,库只提供了特定的api.优点是船小好调头,可以很方便的从一个库切换到另外的库, ...