文本节点由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类型的更多相关文章

  1. javascript之DOM(三Element类型)

    Element类型用于表现XML和HTML的元素,提供了对元素标签名.子节点及特性的访问. 要访问标签名可以使用nodeName和tagName属性,其返回值是一样的. <p id=" ...

  2. 第十章—DOM(0)—NODE类型

    DOM1定义了一个node接口,该接口由DOM的所有节点类型实现. 所有的节点都存在这样或那样的关系.在HTML中,head,body可以看出是html的子元素,html是head,body的父元素, ...

  3. 第十章—DOM(一)——Document类型

    DOCUMENT类型 JS通过document类型表示文档,在文档中document对象是HTMLDocument的一个实例,表示整个HTML页面.document对象是window对象的一个属性,因 ...

  4. 从原型链看DOM－－Text类型

    文本节点由Text类型表示,包含的是可以按照字面解释的纯文本内容,纯文本中可以包含转义后的HTML字符但不能包含HTML代码.原型链继承关系为:textNode.__proto__->Text. ...

  5. JavaScript中DOM节点层次Text类型

    文本节点 标签之间只要有一点内容都会有文本节点,包括空格 创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 == ...

  6. JavaScript高级程序设计学习笔记第十章--DOM

    1.DOM:文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). 2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 3.文档节点是每个 ...

  7. javascript之DOM(四其他类型)

    一.Text类型 文本节点由Text类型表示,指的是可以以字面意思解释的纯文本内容,其中包含HTML代码. nodeType=3 nodeName=#text nodeValue=文本内容 paren ...

  8. mysql中char，varchar与text类型的区别和选用

    关于char,varchar与text平时没有太在意,一般来说,可能现在大家都是用varchar.但是当要存储的内容比较大时,究竟是选择varchar还是text呢?不知道...... 于是去查阅了一 ...

  9. javascript系列之DOM(三)---事件

    原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...

随机推荐

  1. Python学习day37-并发编程(3)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  2. java扫描某个包下的所有java类并加载

    最近在学习java的反射和注解,实际情景中需要扫描某个包下的所有java类,然后使用类加载器加载类. 基本思路,获得程序的路径扫描src下某个包内的子包和java类,实现也比较简单. 运行环境:win ...

  3. 解决使用mybatis模糊查询为空的问题

    解决方法: 在数据库配置的url后添加?useUnicode=true&characterEncoding=utf-8 参考: https://blog.csdn.net/IT_private ...

  4. (补充)10.Hibernate框架的查询方式

    技术分析之Hibernate框架的查询方式 1. 唯一标识OID的检索方式 * session.get(对象.class,OID) 2. 对象的导航的方式 3. HQL的检索方式 * Hibernat ...

  5. JZOJ5822 【NOIP提高A组模拟2018.8.16】 量子纠缠

    这是一道很巧妙的题目. 今早,我调了好久,终于将它切掉了-- 题目 Description Input 第一行包含一个正整数 m,代表操作数. 接下来 m 行,每行可能有以下形式: 1 s 代表将数字 ...

  6. PAT甲级——A1061 Dating

    Sherlock Holmes received a note with some strange strings: Let's date! 3485djDkxh4hhGE 2984akDfkkkkg ...

  7. VS中warning MSB8004和error MSB4018解决方案

    问题如下: warning MSB8004: Output Directory does not end with a trailing slash.  This build instance wil ...

  8. Size Balanced Tree(节点大小平衡树)

    定义 SBT也是一种自平衡二叉查找树,它的平衡原理是每棵树的大小不小于其兄弟树的子树的大小 即size(x->l)$\ge$size(x->r->l),size(x->r-&g ...

  9. 彻底理解setTimeout()

    之前在网上看了很多关于setTimeout的文章,但我感觉都只是点到为止,并没有较深入的去剖析,也可能是我脑袋瓜笨,不容易被点解.后面看了<你不知道的javascript-上卷>一书,决定 ...

  10. 【html、CSS、javascript-1】html基础

    HTML   翻译成代码如下: web: import socket def handle_request(client): buf = client.recv(1024) client.sendal ...