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. Django 中related_name,"%(app_label)s_%(class)s_related"

    先看个model from django.db import models # Create your models here. class Parent(models.Model): name = ...

  2. Spark 应用程序调优

    对于很多刚接触Spark的人来说,可能主要关心数据处理的逻辑,而对于如何高效运行Spark应用程序了解较少.由于Spark是一种分布式内存计算框架,其性能往往受限于CPU.内存.网络等多方面的因素,对 ...

  3. pythonchallenge 解谜 Level 2

    好吧,赶紧贴一下. #-*- coding:utf-8 -*- #代码版本均为python 3.5.1 #Level 2 import re file = open("Level 2.txt ...

  4. java并发之volatile

    volatile是轻量级的synchronized,它在多处理器应用开发中保证了共享变量的“可见性”(可见性指当一个线程修改共享变量后,其它线程可以看到这个修改). volatile如果使用合理会比s ...

  5. 如何给GridView添加网格

    如何给gridview的单元格加上分割线 原文链接:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2013/1227/1582.html ...

  6. 多线程相关------临界区CriticalSection

    多线程一直是短板,整理相关知识方便查询 临界区(Critical Section) 临界区是一段供线程独占式访问的代码.在任意时刻,若有一个线程正在访问该代码段,如果其他所有试图访问的线程都将被挂起, ...

  7. java学习之面向对象(4)

    之前介绍了java面向对象三大特性之一封装,现在来说说三大特性之一继承和抽象类.这些只是我个人的认识,不足之处还请见谅. 1. 继承是面向对象的三大特征之一,那么何为继承呢? 继承是指一个对象直接使用 ...

  8. C语言中的插入排序(2016-12-30)

    直接插入排序: 算法思想:假设待排序的记录存放在数组R[1--n]中,初始时,i=1,R[1]自成一个有序区,无序区为R[2--n].然后从i=2起直到i=n,依次将R[i]插入当前的有序区R[1.. ...

  9. DOMO1

    以下是Demo首页的预览图 demo下载:http://www.eoeandroid.com/forum.php?mod=attachment&aid=NjE0Njh8ZTIyZDA2M2N8 ...

  10. C#基础_单例模式

    控制某个类型的实例数量-唯一一个 class Program { static void Main(string[] args) { test t1 = test.GetInstance(); tes ...