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. 【BFS】HDU 1495

    直达–> HDU 1495 非常可乐 相似题联动–>POJ 3414 Pots 题意:中文题,不解释. 思路:三个杯子倒来倒去,最后能让其中两个平分即可.可能性六种.判定的时候注意第三个杯 ...

  2. MemCache 启动

    这个MemCache在园子里面的文章也很多,这里只是我自己记录作下笔记 MemCache的官方网站为http://memcached.org/ 启动与关闭memCache # /usr/local/m ...

  3. MAC系统设置SSX教程与下载

    http://ss.hongxingchajian.com MAC系统设置SSX教程与下载 1.下载客户端并安装,装完后打开 链接: http://pan.baidu.com/s/1o7ypp5g 密 ...

  4. FTP命令 - Size的问题

    今天发现一个服务从某一个外接系统(Linux)FTP取到的文件大小和下载后的文件大小总是不一致. 开始以为是程序那里出错了.但是找来找去发现不了原因.后来用FTP工具上去执行SIZE命令,终于发现返回 ...

  5. CSS垂直水平居中方法总结

    在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...

  6. Python数据分析

    一.安装Anaconda 1.下载:https://www.continuum.io/downloads 2.命令行创建和启动环境 conda create --name py35 python=3. ...

  7. JSONP跨域处理实例

    <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content=&quo ...

  8. hoj 1014 Niven Numbers

    新手上路之我的水题之路 刚开始时,我首先想到的是定义一个int数组,然后让输入的数字从最低位开始在循环不断地*base,从而将 k进制转化成十进制:然后再作取模判断就可以了: 这时在将最低位到最高位依 ...

  9. fasicon.js (无二维码版,如需要js创建二维码版本可联系我:770959294@qq.com)

    /*** Created by 张云山 on 2016/12/9.*/(function(wins,doct){wins.fasicon = function(){this.name = " ...

  10. 安卓学习之--UI控件用法 单选 按钮 下拉框

    1.单选 .RadioGroup 可将各自不同的RadioButton ,设限于同一个Radio 按钮组,同一个RadioGroup 组里的按钮,只能做出单一选择(单选题). <RadioGro ...