Text类型

文本类型由Text类型表示,包含纯文本内容,可以包含转义后的HTML字符,但不能包含HTML代码。Text节点具有以下特征:

nodeType的值为3;

nodeName的值为"#text";

nodeValue的值为节点所包含的文本;

parentNode是一个Element;

不支持(没有)子节点

可以通过nodeValue属性或data属性访问Text节点中包含的文本,这两个属性中包含的值相同,对nodeValue的修改也会通过data反映出来。可以使用下列方法操作节点中的文本:

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指定的位置开始到count个字符串

除了上述方法,文本节点还有一个length属性,保存着字符的数目nodeValue.length==data.length

每个可以包含内容的元素最多只能有一个文本节点,而且必须确实有内容存在

<!--没有内容,也就没有文本节点-->

<div></div>

<!--空格也算一个文本节点-->

<div> </div>

取得文本节点的引用,并修改它

div.firstChild.nodeValue="some other message";

在修改文本节点的时候还要注意此时的字符串会经过HTML或XML编码,大于号小于号或引号或被转义。

创建文本节点

var textNode=document.createTextNode("<strong>Hello</strong> world!");  //也会被编码

在创建新文本节点的同时也会为其设置ownerDocument属性

如果两个文本节点是相邻的同胞节点,那么两个节点的文本就会连起来显示,中间不会有空格

规范文本节点

DOM文档中相邻的同胞文本节点很容易导致混乱,搞不清楚哪个文本节点表示哪个字符串,于是催生了一种方法normalize(),要在拥有2个或者多个的文本节点的父元素调用normalize()方法,会将所有文本节点合并成一个节点,结果节点的nodeValue等于合并前每个文本节点拼接起来的值

分隔文本节点

splitText(5);  //第二段文本从第5个位置开始

Comment类型

注释在DOM中通过Comment类型表示,它具有下列特征

nodeType的值为8;

nodeName的值为"#comment";

nodeValue的值是注释的内容;

parentNode可能是Document或Element;

不支持(没有)子节点

Comment类型与Text类型继承自相同的基类,它拥有除了splitText()之外的所有字符串操作方法。与Text类型相似,也可以通过nodeValue或data属性取得注释的内容

<div id="myDiv"><!--A comment--></div>

var div=document.getElementById("myDiv");

var comment=div.firstChild;

alert(comment.data);  //"A comment"

创建注释文本

document.createComment()

CDATASection类型

CDATASetion类型只针对基于XML的文档,表示的是CDATA区域。继承自Text类型,它拥有除了splitText()之外的所有字符串操作方法。

nodeType的值为4;

nodeName的值为"#cdata-section";

nodeValue的值是CDATA区域中的内容;

parentNode可能是Document或Element;

不支持(没有)子节点。

document.createCDataSection()创建CDATA区域

DocumentType类型

DocumentType类型在Web浏览器中并不常用,它包含着与文档doctype有关的所有信息,具有下列特征

nodeType的值为10;

nodeName的值为doctype的名称;

nodeValue的值为null;

parentNode是Document;

不支持(没有)子节点。

DocumentFragment类型

在所有节点类型中,只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段(document fragment)是一种“轻量级”的文档,可以包含和控制节点,但不会像完整文档那样占用额外的资源,DocumentFragment节点具有下列特征:

nodeType的值为11;

nodeName的值为“#document-fragment”;

nodeValue的值为null;

parentNode的值为null;

子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference。

虽然不能把文档片段直接添加到文档中,但可以将它作为一个“仓库”来使用,里面保存将来可能会被添加到文档中的节点,可以使用document.createDocumentFragment()方法创建文档片段。

var fragment=document.createDocumentFragment();  //不需要参数

文档片段继承了Node的所有方法。通常用于执行那些针对文档的DOM操作

在将文档片段作为参数传递给appendChild()或insertBefore()时,实际上只会将文档片段的所有子节点添加到相应位置上

Attr类型

元素的特性在DOM中以Attr类型来表示,在所有浏览器中都可以访问Attr类型的构造函数和原型。从技术角度讲,特性就是存在于元素的attributes属性中的节点,特性节点具有下列特征:

nodeType的值为11;

nodeName的值是特性的名称;

nodeValue的值就是特性的值;

parentNode的值为null;

在HTML中不支持(没有)子节点;

在XML中子节点可以是Text或EntityReference。

尽管它们也是节点,但特性却不被认为是DOM文档树的一部分。

Attr对象有3个属性:name、value和specified,其中name是特性名称(nodeName),value是特性的值(nodeValue),specified是一个布尔值,用以区别特性是代码中指定的还是默认的

使用document.createAttribute()并传入特性的名称可以创建新的特性节点

var attr=document.createAttribute("align");

attr.value="left";

element.setAttributeNode(attr);  //添加特性

alert(element.attributes["align"].value);  //"left"

alert(element.getAttributeNode("align").value);  //"left"

alert(element.getAttribute("align"));  //"left"

JavaScript高级程序设计25.pdf的更多相关文章

  1. JavaScript高级程序设计60.pdf

    错误处理 try-catch语句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时如何处理 } error是一个包含着错误信息的对象,它有一个message属性,保存 ...

  2. JavaScript高级程序设计53.pdf

    共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHan ...

  3. JavaScript高级程序设计12.pdf

    第六章 面向对象的程序设计 ECMA中有两种属性:数据属性和访问器属性 数据属性的特性 [[Configurable]] 表示是否通过delete删除属性,是否重新定义属性,是否能把属性修改为访问器属 ...

  4. JavaScript高级程序设计2.pdf

    第三章 基本概念 区分大小写 ECMAScript中的一切(变量.函数名和操作符)都区分大小写 标识符 指变量.函数.属性的名字或者函数的参数 第一个字符必须是一个字母.下划线或美元符号,其它字符可以 ...

  5. JavaScript高级程序设计61.pdf

    JSON对象 早期的JSON解析器就是使用JavaScript的eval()函数,ECMAScript5对解析JSON的行为做出了规定,定义了全局对象JSON. JSON对象有2个方法:stringi ...

  6. JavaScript高级程序设计58.pdf

    15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域 ...

  7. JavaScript高级程序设计57.pdf

    表单序列化 首先了解一下浏览器如何将数据发送给服务器 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送type为“reset” ...

  8. JavaScript高级程序设计55.pdf

    输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text&q ...

  9. JavaScript高级程序设计54.pdf

    过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中, ...

随机推荐

  1. bzoj1260[CQOI2007]涂色paint

    思路:区间dp,用f[i][j]表示区间[i,j]的答案,然后转移即可. #include<iostream> #include<cstdio> #include<cst ...

  2. leetcode345——Reverse Vowels of a String(C++)

    Write a function that takes a string as input and reverse only the vowels of a string. Example 1:Giv ...

  3. ubuntu14.04+opencv 3.0+python2.7安装及测试

    本文记录了ubuntu下使用源码手动安装opencv的过程.步骤来自opencv官网 此外记录了在python中安装及载入opencv的方法. 1.安装opencv所需的库(编译器.必须库.可选库) ...

  4. Javascript执行环境、作用域链

    执行环境 可以把执行环境想象为一个圆圈,里面包含了一些变量.函数. 执行环境定义了变量或函数的有权访问的其他数据,决定了它们各自的行为.还有一个顶部执行环境.在浏览器中,顶部执行环境既为window, ...

  5. Qt文件信息获取之QFileInfo

    在Qt中为文件的操作和信息获取提供了许多方便的类,常用的有QDir,QFile,QFileInfo以及QFileDialog,在本文中主要介绍用于获取关于文件信息的QFileInfo类. QFileI ...

  6. jQuery插件综合应用(四)头像设置

    一.操作流程 会员点击头像设置,弹出一个层,在层中,有上传图片的按钮,用户点击按钮上传图片,图片在服务器端按大小压缩保存(方便剪切).保存后,在前端显示,然后用户可修剪图片.选择图片区域,点击提交,保 ...

  7. 记录一下学习VC的初步过程.

    有需要把状态栏图标缓存清空. 找到DELPHI和E语言的例子.最近学VC所以要改成VC的. 做控件的时候发现函数不能直接控制控件.在网上找了半天相关资料,都是说要包含"resource.h& ...

  8. HTML5:一个拖拽网页元素的例子

    关键字:HTML5, Drag&Drop, JavaScript, CSS 运行环境:Chrome <!DOCTYPE html> <html> <head> ...

  9. 服务器慢 mysql-bin.000001文件占满磁盘的原因与解决

    发现 VPS 服务器上的网站反应超级慢,简单的重启.重启各主要服务,发现mysql 的反应极其不正常. 一方面是问题,这与站点访问量有关.开始时从mysql 的配置文件 my.cnf 考虑,但志文工作 ...

  10. Intel项目Java小记

    cannot be cast to javax.servlet.Filter添加provided即可 install -X是什么意思? Unsupported major.minor version ...