【JavaScript学习】DOM:Text类型
来源:互联网 发布:windows pro 编辑:程序博客网 时间:2024/05/16 11:24
文本节点由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); //2element.normalize();alert(element.childNodes.length); //1alert(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); //Helloalert(newNode.nodeValue); //world!alert(element.childNodes.length); //2
阅读全文
0 0
- 【JavaScript学习】DOM:Text类型
- JavaScript学习-Text类型
- JavaScript学习-DOM-Node类型
- 【JavaScript学习】DOM:Node类型
- 【JavaScript学习】DOM:Document类型
- 【JavaScript学习】DOM:Element类型
- 【JavaScript学习】DOM:Comment类型
- 【JavaScript学习】DOM:CDATASection类型
- 【JavaScript学习】DOM:DocumentType类型
- 【JavaScript学习】DOM:DocumentFragment类型
- 【JavaScript学习】DOM:Attr类型
- JavaScript高级程序设计之DOM之节点层次之Text类型第10.1.4讲
- Javascript之DOM(Document类型)
- JavaScript DOM(三) Element 类型
- javascript DOM 学习
- javascript DOM的学习
- javascript DOM 学习笔记
- 【javascript】dom学习笔记
- 做LeetCode题的感悟 (1-10题)
- HTTP Response Status Code -- HTTP响应代码中文详解
- sql server profiler中常用的跟踪事件
- JUnit中assertEquals和assertSame方法的不同
- TextView去除内边距
- 【JavaScript学习】DOM:Text类型
- Qt之如何获取主窗口的指针
- AndroidStudio安装教程2017年2018年
- 微信公众号学习--11-21
- springmvc+mybatis整合cms内容发布平台ios android
- doT.js详细介绍
- 非必要的重定向跳转将被Chrome 64浏览器限制
- 461. Hamming Distance
- 安装Ubuntu系统之后安装的软件