文本节点

标签之间只要有一点内容都会有文本节点,包括空格

创建文本节点document.createTextNode()

可以使用 document.createTextNode 创建新文本节点

一般情况下,每个元素只有一个文本节点

但是在某些情况下也会有多个节点,例子如下


//创建父节点
var element=document.createElement("div");
element.className="message"; //添加第一个文本节点
var textNode=document.createTextNode("节点一");
element.appendChild(textNode); //添加第二个文本节点
var atextNode=document.createTextNode("节点二");
element.appendChild(atextNode); //输出到页面
document.body.appendChild(element);
console.log(element.childNodes);

合并文本节点normalize()

如果一个元素中有多个文本节点,容易乱套,所以可以使用normalize()方法来合并文本节点

        var element=document.createElement("div");
element.className="message"; var textNode=document.createTextNode("节点一");
element.appendChild(textNode); var atextNode=document.createTextNode("节点二");
element.appendChild(atextNode); alert(element.childNodes.length); // 2 element.normalize(); //合并文本节点
alert(element.childNodes.length); // 1

分割文本节点splitText()

Text类型中有一个方法splitText(),与normalize()恰好相反可以将一个节点分割成为两个节点。



    var element=document.createElement("div");
element.className="message"; var textNode=document.createTextNode("hello world");
element.appendChild(textNode); alert(element.childNodes.length); // 1 element.firstChild.splitText(5);
alert(element.childNodes.length); // 2
alert(element.childNodes[0].nodeValue); // hello
alert(element.childNodes[1].nodeValue); // world

JavaScript中DOM节点层次Text类型的更多相关文章

  1. JavaScript中DOM的层次节点(一)

    DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.修改.删除节点的一部分. DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的节点 ...

  2. javascript DOM中的节点层次和节点类型概述

    针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结 存在的问题请大家多多指正! 因为DOM这方面的对象方法操作性都特别强,但是逻辑很简单,所以就没有涉及到实际的 ...

  3. JavaScript DOM节点和文档类型

    以下的例子以此HTML文档结构为例: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

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

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

  5. day29—JavaScript中DOM的基础知识应用

    转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...

  6. JavaScript HTML DOM 节点

    要向HTML DOM添加新元素,必须首先创建元素(元素节点),然后将其附加到现有元素. <!DOCTYPE html> <html> <meta charset=&quo ...

  7. 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

    getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...

  8. Javascript中DOM详解与学习

    DOM(文档对象模型)是针对html和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加,移除和修改页面的某一部分.下面将从这几个层次来学习. 一.节点层次 ...

  9. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

随机推荐

  1. Python PycURL 网络编程

    http://blog.chinaunix.net/uid-20544356-id-290882.html 在使用urllib的时候经常会死掉,以前debug过,是没有设置 timing out 所以 ...

  2. Hibernate从零开始的反向工程

    首先  创建一个web项目 导入jar包 Bulid Path 先现在hibernate的插件   help-->eclipse marketplace-->输入tool  点instal ...

  3. C++11 标准新特性: 右值引用与转移语义

    文章出处:https://www.ibm.com/developerworks/cn/aix/library/1307_lisl_c11/ 新特性的目的 右值引用 (Rvalue Referene) ...

  4. dedecms注入漏洞

    版本:Powered by DedeCMSV57_GBK © 2004-2011 DesDev Inc. 漏洞利用EXP:plus/recommend.php?action=&aid=1&am ...

  5. UVA 1508 - Equipment dp状态压缩

    题意:  已知n个5元组,从中选出k组,使得这些组中5个位置,每个位置上最大数之和最大. 分析:当k>5时,就是n个5元组最大的数之和,当k<5时,就当做5元组,状态压缩,用00000表示 ...

  6. 方格取数洛谷p1004

    题目描述 设有N*N的方格图(N<=9),我们将其中的某些方格中填入正整数,而其他的方格中则放 人数字0.如下图所示(见样例): A 0 0 0 0 0 0 0 0 0 0 13 0 0 6 0 ...

  7. mysql 索引类型

    根据类型分为普通索引2种类型,hash 和b-tree   最常用    hash是按一对一索引的.速度 最快但不支持范围 比如where name = 'dd' 最快.但是使用 date >3 ...

  8. php加密字符串超时不可解密

    <?php/** * 加密字符串在指定时间内解密有效 * @param  [type]  $string    明文字符串 * @param  string  $operation 解密值为DE ...

  9. Java并发编程总结4——ConcurrentHashMap在jdk1.8中的改进

    一.简单回顾ConcurrentHashMap在jdk1.7中的设计 先简单看下ConcurrentHashMap类在jdk1.7中的设计,其基本结构如图所示: 每一个segment都是一个HashE ...

  10. Batch Normalization

    一.BN 的作用 1.具有快速训练收敛的特性:采用初始很大的学习率,然后学习率的衰减速度也很大 2.具有提高网络泛化能力的特性:不用去理会过拟合中drop out.L2正则项参数的选择问题 3.不需要 ...