DOM-Text类型、Comment类型、CDATASection类型、DocumentType类型、DocumentFragment类型、Attr类型
Text类型
文本节点由Text类型表示,包含的是可以照字面解释的纯文本内容。Text节点具有以下特征:
nodeType的值为3
nodeName的值为"text"
nodeValue的值为节点所包含的文本
parentNode的值为一个Element
没有子节点
可以通过nodeValue属性或者data属性访问Text节点中所包含的文本。使用下列方法可以操作节点中的文本:
appendData(text):将text添加到节点的末尾。
deleteData(offset,count):从offset指定的位置开始删除count个字符。
insertData(offset,text):在offset指定的位置插入text。
replaceData(offset,count,text):用text替换从offset开始到count的所有文本。
splitText(offset):从offset指定的位置将当前文本分成两个文本节点。
substringData(offset,count):提取从offset指定的位置开始到offset+count为止的字符串
除了这些方法还有一个length属性,保存着节点中字符的数目。而且nodeValue.length和data.length中也保存着同样的值
在默认情况下,每个可以包含内容的元素最多只能有一个文本节点,而且必须确实有内容存在。
1、创建文本节点
document.createTextNode()创建新文本节点,这个方法接受一个参数即要插入节点中的文本。与设置已有文本节点的值一样,作为参数的文本也将按照HTML或XML的格式进行编码。在创建
新文本节点的同时,也会为其设置ownerDocuemnt属性。
var textNode = document.createTextNode("<strong>Hello</strong> world!");
一般情况下,每个元素只有一个文本子节点。不过,在某些情况下也可能包含多个文本子节点,如下:
var element = document.createElement('div');
element.className = "message";
var textNode = docuemnt.createTextNode('Hello world!');
element.appendChild(textNode);
var anotherTextNode = document.createTextNode('Yippee!');
element.appendChild(anotherTextNode);
document.body.appendChild(element);
如果两个文本节点是相邻的同胞节点,那么这两个节点中的文本就会连起来显示,中间不会有空格
2、规范化文本节点
DOM文档中存在相邻的同胞文本节点很容易导致混乱,因为分不清哪个文本节点表示哪个字符串。normalize()能够将相邻文本节点合并的方法,在一个包含两个或者多个文本节点的父元素上调用
normalize()方法,则会将所有文本节点合并成一个节点。
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);
document.body.appendChild(element);
alert(element.childNodes.length); //
element.normalize();
alert(element.childNodes.length); //
alert(element.firstChild.nodeValue); //Hello world!Yippee!
3、分割文本节点
splitText(),会将一个文本节点分成两个文本节点。这个方法会返回一个新文本节点,该节点与原节点的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); //
Comment类型
注释在DOM中是通过Comment类型来表示的,Comment节点具有下列特征:
nodeType的值为8
nodeName的值为"#comment"
nodeValue的值是注释的内容
parentNode的值是Document或者Element
Comment类型与Text类型继承自相同的基类,因此它拥有除splitText()之外的所有字符串操作方法。
注释节点可以通过其父节点来访问:
<div id="myDiv"><!--A comment --></div>
在此,注释节点是<div>元素的一个子节点。
CDATASection类型
CDATASection类型只针对基于XML的文档,表示的是CDATA区域,CDATASection类型与Text类型继承自相同的基类,因此它拥有除splitText()之外的所有字符串操作方法
nodeType的值为4
nodeName的值为"#cdata-section"
nodeValue的值是CDATA区域中的内容
parentNode的值是Document或者Element
DocumentType类型
DocumentType包含着与文档的doctype有关的所有信息,它具有下列特征:
nodeType的值为10
nodeName的值是doctype的名称
nodeValue的值是null
parentNode的值是Document或者Element
DocumentFragment类型
DOM规定文档片段是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源。DocumentFragment类型具有下列特征:
nodeType的值为11
nodeName的值是"#document-fragment"
nodeValue的值是null
parentNode的值是null
子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference。
虽然不能把文档片段直接添加到文档中,但可以将它作为一个“仓库”来使用,即可以在里面保存将来可能会添加到文档中的节点。要创建文档片段,可以使用document.createDocumentFragment()方法,如下:
var fragment = document.createDocumentFragment();
为一个<ul>元素添加3个列表项
<ul id="myList"></ul>
var fragment = document.createDocumentFragment();
var ul = document.getElementById('myList');
var li = null;
for(var i=0;i<3;i++){
li = document.createElement('li');
li.appendChild(document.createTextNode("Item " + (i+1)));
fragment.appendChild(li);
}
ul.appendChild(fragment);
Attr类型
元素的特性在DOM中以Attr类型来表示,特性就是存在于元素attributes属性中的节点。特性节点具有下列特征:
nodeType的值为2
nodeName的值是特性的名称
nodeValue的值是特性的值
parentNode的值是null
Attr对象有3个属性:name、value 和specified。其中name是特性名称,value是特性的值,而specified是一个布尔值,用以区别特性是在代码中指定的,还是默认的。
DOM-Text类型、Comment类型、CDATASection类型、DocumentType类型、DocumentFragment类型、Attr类型的更多相关文章
- 从原型链看DOM--Comment,CDATASection,DocumentType,DocumentFragment,Attr类型
这次总结的是剩下的这些DOM类型节点,可能你见过却不经常使用但是了解一下总是好的,可以加深对DOM体系的整体理解~.本篇要介绍的是Comment,CDATASection,DocumentType,D ...
- Javascript高级编程学习笔记(42)—— DOM(8)Attr类型
Attr类型 我们在之前的文章中提到了,元素有一个 attributes 属性 该属性保存了一个 NamedNodeMap 集合 该集合中的元素也就是今天我们所要记叙的 attr 类型 主要就是方便我 ...
- Mysql BLOB、BLOB与TEXT区别及性能影响、将BLOB类型转换成VARCHAR类型
在排查公司项目业务逻辑的时候,见到了陌生的字眼,如下图 顺着关键字BLOB搜索,原来是Mysql存储的一种类型,从很多文章下了解到如下信息 了解 MySQL中,BLOB字段用于存储二进制数据,是一个可 ...
- 全栈JavaScript之路(十一)学习 Attr 类型 节点
元素的特性在DOM 中用Attr 类型的节点表示.在全部浏览器中都能够訪问 Attr 类型的构造函数与原型. 从技术上讲,Attr 类型节点 就是指,元素的 Attrbutes 属性 中的节点.构造器 ...
- Attr类型
Attr表示元素的特性,在所有浏览器中,都可以访问Attr类型的构造函数和原型. attr特性存在于元素的attributes属性中的节点 nodeType 2 nodeName 特性的名称 node ...
- 附加类型“UniversalReviewSystem.Models.ApplicationUser”的实体失败,因为相同类型的其他实体已具有相同的主键值。在使用 "Attach" 方法或者将实体的状态设置为 "Unchanged" 或 "Modified" 时如果图形中的任何实体具有冲突键值
在使用asp.net Identity2 的 UserManager RoleManager 时,同时还有其他仓储类型接口,能实现用户扩展信息的修改,用户注册没有问题.当修改用户信息时,出现了如下异常 ...
- C#中的值类型、引用类型,代码告诉你他是什么类型。
C#代码告诉你这是什么类型. using System; using System.Collections.Generic; using System.Linq; using System.Text; ...
- ASP.NET - Web API,从简单类型到复杂类型的参数传递用例,以及传递简单string类型的解决办法
一,简单类型的传值 比如 public Users Get(int id) ,它可以使用两种方式获取: api/default/ $.get("/api/default",{id: ...
- 无法将类型为“System.Windows.Controls.SelectedItemCollection”的对象强制转换为类型“System.Collections.Generic.IList`1
在WPF中DataGrid 选择事件中获取SelectedItems 报错如下 无法将类型为“System.Windows.Controls.SelectedItemCollection”的对象强制转 ...
随机推荐
- C语言_第五章__实践(密码转换)
1. 要求 输入China 输出 Glmre #include <stdio.h> #include <stdlib.h> int main() { char c ; c ...
- Servlet解决参数乱码问题
为什么会产生乱码? 之所以会产生乱码,是由于服务器端和客户端的编码方式不一致造成的.客户端与服务器端的交互过程中,存在着两次数据交换:第一次,客户端向服务器端发起请求,第二次数据交换,服务器端响应客户 ...
- Solve VS2010 Error "Exceptions has been thrown by the target of an invocation"
Sometimes when you open a VS2010 project, an error window will pop up with the error message "E ...
- MAC下使用Charles抓取安卓模拟器数据
一.安装Charles,这个不多记录 二.Charles数据乱码问题(参照这篇文章 http://blog.csdn.net/huanghanqian/article/details/52973651 ...
- 在Excel中把横行与竖列进行置换、打勾号
在Excel中把横行与竖列进行置换:复制要置换的单元,在新的单元上右键->选择性复制,会出现对话框,选中“置换”,即可在Excel中打勾号,左手按住ALT不放,右手在小键盘也就是右边的数字键盘依 ...
- ps 实例部分
实例篇1:将不同图片通过阀值转换成黑白色人物头像 图像-黑白-曲向-阀值 本图像-复制-粘贴
- NPOI、MyXls、Aspose.Cells 导入导出Excel(转)
Excel导入及导出问题产生: 从接触.net到现在一直在维护一个DataTable导s出到Excel的类,时不时还会维护一个导入类.以下是时不时就会出现的问题: 导出问题: 如果是asp.net,你 ...
- Css 相关资源(本篇不定期更新)
http://www.tuicool.com/articles/3eaINn---<终于搞懂了CSS实现三角形图标的原理>---☆☆☆☆☆.这篇讲的是css中的如何挤出一个三角形,这个讲的 ...
- Microservice 微服务的理论模型和现实路径
两年前接触到了微服务的概念,面对日益膨胀的系统感觉豁然开朗.之后的两年逐步把系统按微服务的架构理念进行了重构,并将业务迁移到了新架构之上.感觉现在差不多是时候写一篇关于微服务的总结文章了. 定义 在 ...
- 采访Philipp Crocoll:安卓平台上整合Java和C#
在这个采访中,我们跟开源开发者Philipp Crocoll讨论了关于Keepass2Android的相关话题.Keepass2Android不仅具有强大的密码存储的功能,还是在一个单独的安卓应用同时 ...