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. C++ 类对象和 指针的区别

    C++ 类对象和 指针的区别 C++ 类对象和 指针的区别 转自:http://blog.csdn.net/ym19860303/article/details/8557746 指针的情况 class ...

  2. Ubuntu 安装 JDK 7

    直接下载jdk压缩包方式安装 分为下面5个步骤 1.官网下载JDK 2.解压缩,放到指定目录 3.配置环境变量 4.设置系统默认JDK 5. 测试jdk 1.官网下载JDK      地址: http ...

  3. java基础3_循环语句,数组

    java中的循环: Java中提供了3中循环结构:  while  do-while  for ① 循环结构的作用? 可以不断重复执行循环结构中的代码: ② 上面的3个循环结构功能都是一样的,只是结构 ...

  4. 2016huasacm暑假集训训练五 J - Max Sum

    题目链接:http://acm.hust.edu.cn/vjudge/contest/126708#problem/J 题意:求一段子的连续最大和,只要每个数都大于0 那么就会一直增加,所以只要和0 ...

  5. python网页抓取练手代码

    from urllib import request import html.parser class zhuaqu(html.parser.HTMLParser): blogHtml = " ...

  6. 如何使用Microsoft技术栈

    Microsoft技术栈最近有大量的变迁,这使得开发人员和领导者都想知道他们到底应该关注哪些技术.Microsoft自己并不想从官方层面上反对Silverlight这样的技术,相对而言他们更喜欢让这种 ...

  7. gulp es7配置文件

    http://sanwen.net/a/ybsfcoo.html /** * Created by udi on 2016/11/24. */ var gulp = require('gulp'); ...

  8. 【腾讯Bugly干货分享】美团大众点评 Hybrid 化建设

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/rNGD6SotKoO8frmxIU8-xw 本期 T ...

  9. 领域驱动设计系列 (六):CQRS

    CQRS是Command Query Responsibility Seperation(命令查询职责分离)的缩写. 世上很多事情都比较复杂,但是我们只要进行一些简单的分类后,那么事情就简单了很多,比 ...

  10. Redis系列(三)-Redis发布订阅及客户端编程

    阅读目录 发布订阅模型 Redis中的发布订阅 客户端编程示例 0.3版本Hredis 发布订阅模型 在应用级其作用是为了减少依赖关系,通常也叫观察者模式.主要是把耦合点单独抽离出来作为第三方,隔离易 ...