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

  1. 从原型链看DOM--Comment,CDATASection,DocumentType,DocumentFragment,Attr类型

    这次总结的是剩下的这些DOM类型节点,可能你见过却不经常使用但是了解一下总是好的,可以加深对DOM体系的整体理解~.本篇要介绍的是Comment,CDATASection,DocumentType,D ...

  2. Javascript高级编程学习笔记(42)—— DOM(8)Attr类型

    Attr类型 我们在之前的文章中提到了,元素有一个 attributes 属性 该属性保存了一个 NamedNodeMap 集合 该集合中的元素也就是今天我们所要记叙的 attr 类型 主要就是方便我 ...

  3. Mysql BLOB、BLOB与TEXT区别及性能影响、将BLOB类型转换成VARCHAR类型

    在排查公司项目业务逻辑的时候,见到了陌生的字眼,如下图 顺着关键字BLOB搜索,原来是Mysql存储的一种类型,从很多文章下了解到如下信息 了解 MySQL中,BLOB字段用于存储二进制数据,是一个可 ...

  4. 全栈JavaScript之路(十一)学习 Attr 类型 节点

    元素的特性在DOM 中用Attr 类型的节点表示.在全部浏览器中都能够訪问 Attr 类型的构造函数与原型. 从技术上讲,Attr 类型节点 就是指,元素的 Attrbutes 属性 中的节点.构造器 ...

  5. Attr类型

    Attr表示元素的特性,在所有浏览器中,都可以访问Attr类型的构造函数和原型. attr特性存在于元素的attributes属性中的节点 nodeType 2 nodeName 特性的名称 node ...

  6. 附加类型“UniversalReviewSystem.Models.ApplicationUser”的实体失败,因为相同类型的其他实体已具有相同的主键值。在使用 "Attach" 方法或者将实体的状态设置为 "Unchanged" 或 "Modified" 时如果图形中的任何实体具有冲突键值

    在使用asp.net Identity2 的 UserManager RoleManager 时,同时还有其他仓储类型接口,能实现用户扩展信息的修改,用户注册没有问题.当修改用户信息时,出现了如下异常 ...

  7. C#中的值类型、引用类型,代码告诉你他是什么类型。

    C#代码告诉你这是什么类型. using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  8. ASP.NET - Web API,从简单类型到复杂类型的参数传递用例,以及传递简单string类型的解决办法

    一,简单类型的传值 比如 public Users Get(int id) ,它可以使用两种方式获取: api/default/ $.get("/api/default",{id: ...

  9. 无法将类型为“System.Windows.Controls.SelectedItemCollection”的对象强制转换为类型“System.Collections.Generic.IList`1

    在WPF中DataGrid 选择事件中获取SelectedItems 报错如下 无法将类型为“System.Windows.Controls.SelectedItemCollection”的对象强制转 ...

随机推荐

  1. jQuery中prop() , attr() ,css() 的区别

    1.  HTML属性是指页面标记中放在引号中的值,而DOM属性则是指通过JavaScript能够存取的值. (1)在jQuery中,prop()是操作DOM属性,attr()是操作HTML属性. HT ...

  2. 许愿墙的搭建基于mysql

    首先需要两个服务器(也可以用一台,但不推荐) 1服务器用yum安装Apache+php+php-mysql 2服务器用yum安装mysql 1服务器 用yum安装Apache和php+php-mysq ...

  3. finally回收资源

    Java中的垃圾回收机制,也就是GC不会回收任何物理资源,垃圾回收机制只回收堆内存中对象所占用的内存,所以其他的物理资源需要用finally来回收. 如果try块中的某条语句引起了异常,该异常就会被c ...

  4. jquery修改Switchery复选框的状态

    script //选择框 var mySwitch; /* * 初始化Switchery * * classNmae class名 */ function initSwitchery(classNam ...

  5. EditPlus快捷键

    Editplus 选中一行: ctrl+rEditplus 复制一行: ctrl+r选择行,然后ctrl+c复制.复制一行到下一行中:Editplus有:Ctrl+j 复制上一行的一个字符到当前行Ed ...

  6. js 的一些知识 摘自http://img0.pconline.com.cn/Pc_intranet/1105/13/313647_7.pdf

    Js 问题分析--js 影响页面性能现状分析:问题陈述分析问题:抽象问题根源,通过实例或推理证明问题的严重性问题引申:以现有问题为点开始扩散,这将导致其它什么问题,或同一类型的问题问题总结:从分散开始 ...

  7. 搭建Linux+Jexus+MariaDB+ASP.NET[LJMA]环境

    备注:,将我的博客内容整理成册,首先会在博客里优先发布,后续可能的话整理成电子书,主要从linux的最基础内容开始进入Linux的Mono开发方面的话题.本文是我整理博客内容的一篇文章. LJMA 是 ...

  8. mysql定义和调用存储过程

    /*定义delimiter为 // */ delimiter // CREATE procedure sp_add3(a int, b int,out c int) begin set c=a+ b; ...

  9. 玩转动态编译 - 高级篇:一,IL访问静态属性和字段

    IL介绍 通用中间语言(Common Intermediate Language,简称CIL,发音为"sill"或"kill")是一种属于通用语言架构和.NET ...

  10. IoC在ASP.NET Web API中的应用

    控制反转(Inversion of Control,IoC),简单地说,就是应用本身不负责依赖对象的创建和维护,而交给一个外部容器来负责.这样控制权就由应用转移到了外部IoC容器,控制权就实现了所谓的 ...