美文网首页
【DOM】Text类型

【DOM】Text类型

作者: Wonder233 | 来源:发表于2017-11-21 19:58 被阅读0次

文本节点由Text类型表示,包含的是可以照字面解释的纯文本。纯文本中可以包含转义后的HTML字符,但不能包含HTML代码。

Text节点特征

  • nodeType的值是3;
  • nodeName的值为“#text”;
  • nodeValue的值为节点所包含的文本;
  • parentNode是一个Element;
  • 不支持(没有)子节点。

可以通过nodeValue属性或data属性访问Text节点中包含的文本,这两个属性中包含的值相同。对nodeValue的修改也会通过data反映出来。

属性:length

文本节点有一个length属性,保存着节点中字符的数目。nodeValue.length和data.length中也保存着相同的值。

方法

  • appendData(text):将text添加到节点的末尾。
  • deleteData(offset,count):从offset指定的位置开始删除count个字符。
  • insertData(offset,text):从offset指定的位置插入text。
  • replaceData(offset,count,text):用text替换从offset指定的位置开始到offset+count为止处的文本。
  • splitText(offset):从offset指定的位置将当前文本节点分成两个文本节点。
  • substringData(offset,count):提取从offset指定的位置开始到offset+count为止处的字符串。

创建文本节点createTextNode()

/*
 * createTextNode()
 * param:要插入节点中的文本
 */
var textNode = document.createTextNode("<strong>Hello</strong>world!")
// 创建新文本节点的同时,也会为其设置ownerDocument属性。

// 下面代码会创建一个<div>元素并向其中添加一条消息。
var element = document.createElement("div");
element.className = "message";

var textNode = document.createTextNode("Hello world!")
element.appendChild(textNode);
document.body.appendChild(element);

规范化文本节点:合并normalize()

DOM文档中存在相邻的同胞文本节点很容易导致混乱,因为分不清哪个文本节点表示哪个字符串。
用途:能够将相邻文本节点合并。
(这个方法由Node类型定义的,因此在所有节点类型中都存在。)
用法:在一个包含两个或多个文本节点的父元素上调用,会将所有文本节点合并成一个节点,结果节点的nodeValue等于将合并前每个文本节点的nodeValue值拼接起来的值。

var element = document.createElement("div");
element.className = "message";

var textNode = document.createTextNode("Hello world!")
element.appendChild(textNode);

var anotherTextNode = document.createTextNode("Yippee!")
element.appendChild(anotherTextNode);

alert(element.childNodes.length);       //2

element.normalize();
alert(element.childNodes.length);       //1
alert(element.firstChild.nodeValue);    //Hello world!Yippee!

document.body.appendChild(element);

分割文本节点:splitText()

用途:将一个文本节点分成两个文本节点,即按照指定的位置分割nodeValue值。
返回:原来的文本节点将包含从开始到指定位置之前的内容,新文本节点将包含剩下的文本。返回一个新文本节点,该节点与原节点的parentNode相同。

var element = document.createElement("div");
element.className = "message";

var textNode = document.createTextNode("Hello world!")
element.appendChild(textNode);

document.body.appendChild(element);

var newNode = element.firstChild.splitText(5);
alert(element.firstChild.nodeValue);    //Hello
alert(newNode.nodeValue);               //world!
alert(element.childNodes.length);       //2

相关文章

  • 【DOM】Text类型

    文本节点由Text类型表示,包含的是可以照字面解释的纯文本。纯文本中可以包含转义后的HTML字符,但不能包含HTM...

  • JavaScript高级程序设计笔记10

    DOM 节点层次 (1)Node类型 (2)Document类型 (3)Element类型 (4)Text类型 (...

  • 2016-11-25

    HTML DOM maxLength 属性 HTML DOM Text 对象 定义和用法maxLength 属性可...

  • 【javascript】DOM-节点层次-Text类型&

    Text类型 文本节点由Text 类型表示,包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML ...

  • 19.DOM 进阶

    学习要点: 1.DOM 类型2.DOM 扩展3.DOM 操作内容 DOM 自身存在很多类型,在 DOM 基础课程中...

  • jQuery API学习之DOM操作与事件篇

    DOM属性操作: attr()与prop()的区别: DOM操作: 获取或设置文本内容: text()与html(...

  • python-requests模块

    response.text和response.content的区别 response.text类型:str解码类型...

  • MySQL长文本存储类型

    可以使用TEXT,BLOB俩种类型来存储长文本。 1. TEXT TEXT有4有类型: TINYTEXT 256b...

  • 企业微信markdown

    文本类型 { "msgtype": "text", "text": { "content": "广州今日天气:29...

  • DOM API 类型

    粗略的过一遍DOM API DOM类型 Node类型 Node接口是 DOM1级就定义了, Node接口定义了 1...

网友评论

      本文标题:【DOM】Text类型

      本文链接:https://www.haomeiwen.com/subject/lemivxtx.html