- Text类型
文本节点由Text类型表示,包含的是可以照字面解释的纯文本内容,纯文本中可以包含转义后的HTML字符,但不包含HTML代码,Text节点具有以下特征:
- nodeType值为3;
- nodeName的值为”#text”;
- nodeValue的值为节点所包含的文本;
- parentNode是一个Element;
- 不支持子节点
可以通过nodeValue属性或data属性访问Text节点包含的文本,这两个属性中包含的值相同,对nodeValue的修改也会通过data反映出来,反之亦然,使用下面方法可以操作节点中的文本。
- appnedData(text):将text添加到节点的末尾。
- deleteData(offset,count):从offset指定的位置开始删除count个字符。
- insertData(offset,text):在offset指定的位置插入text。
- replaceData(offset,count,text):用text替换从offset指定的位置开始到offset+count为止的文本。
- splitText(offset):从offset指定的位置将当前文本节点分成两个文本节点。
- substringData(offset,count):提取从offset指定的位置开始到offset+count为止处的字符串。
处理这些方法之外,文本节点还有一个length属性,保存着节点中字符的数目,而且nodeValue.length和data.length中也保存着相同的值。
如果这个文本节点当前存在于文档树中,那么修改文本节点的结果就会立即得到反映,另外,在修改文本节点时还要注意,此时的字符串会经过HTML编码,换句话说,小于号,大于号或引号都会像下面例子一样被转义。
- 创建文本节点
可以使用document.createTextNode()创建新文本节点,这个方法接受一个参数:要插入节点中文本。在创建新文本节点的同时,也为其设置ownerDocument属性,不过,除非把新节点添加到文档树中已经存在的节点中,否则我们不会再浏览器窗口中看到新节点,下面创建div元素并向其中添加一条信息的代码:
var element=document.createElement(“div”); element.className=”message”; var textNode=document.createTextNode(“Hello world!”); element.appendChild(textNode); document.body.appendChild(element);
一般情况下,每个元素只有一个文本子节点,不过,在某些情况下也可以包含多个文本子节点如:
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);
- 规范化文本节点
DOM文档存在相邻的同胞文本节点很容易导致混乱,因为分不清哪个文本节点表示哪个字符串,另外,DOM文档中出现相邻文本节点的情况也不在少数,于是就催生了一个能够将相邻文本节点合并的方法,这个方法是有Node类型定义的(因而在所有节点类型中都存在),名叫normalize()。如果在一个包含两个或多个文件节点的父元素上调用normalize方法,则会将所有文本节点合并成一个节点,结果节点的nodeValue等于将合并前每个文本节点的nodeValue值拼接起来的值,例如:
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.chlidNodes.length);//2 element.normalize(); alert(element.childNodes.length);//1 alert(element.firstChild.nodeValue);//”Hello world!Yippee!”
浏览器在解析文档时永远不会创建相邻的文本节点,这种情况只会作为执行DOM操作结果出现。
- 分割文本节点
Text类型提供了一个作用与normalize相反的方法:splitText()。这个方法会将一个文本节点分成两个文本节点,即按照指定的位置分割nodeValue值,原来的文本节点将包含从开始到指定位置之前的内容,新文本节点将包含剩下的文本,这个方法会返回一个新文本节点,该节点与原节点的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);//2
- Comment类型
注释在DOM中是通过Comment类型来表示的,Comment节点具有下列特征:
- nodeType的值8;
- nodeName的值为”#comment”;
- nodeValue的值是注释的内容;
- parentNode可能是Document或Element;
- 不支持子节点。
Comment类型与Text类型继承相同的基类,因此它拥有除了splitText之外的所有字符串操作方法。与Text类型相似,也可以通过nodeValue或data属性来取得注释内容。
使用document.createComent()并未其传递注释文本也可以创建注释节点。
- CDATASection类型
CDATASection类型只针对基于XML的文档,表示的是CDATA区域。与Comment类似,CDATASection类型继承自Text类型,因此拥有除splitText之外的所有字符串操作方法,CDATASection节点具有下列特征:
- nodeType的值为4;
- nodeName的值为”#cdata-section”;
- nodeValue的值是CDATA区域中的内容;
- parentNode可能是Document或Element;
- 不支持子节点。
CDATA区域只会出现在XML文档中,因此多数浏览器都会把CDATA区域错误地解析为Coment或Element。
- DocumentType类型
DocumentType类型在Web浏览器中并不常用,仅有firefox、safari和Opera支持它。DocumentType包含着与文档的doctype有关的所有信息:
- NodeType的值为10;
- nodeName的值为doctype的名称;
- nodeValue的值为null;
- parentNode是Document;
- 不支持子节点。
- DocumentFragment类型
在所有节点类型中,只有DocumentFragment在文档中没有对应的标记,DOM规定文档片段是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源。DocumentFragment节点特点如下:
- nodeType的值为11;
- nodeName的值为 “#document-fragment”;
- nodeValue的值为null;
- parentNode的值为null;
- 子节点可以是Element、processingInstruction、comment、text、CDATASection或EntityReference。
虽然不能把文档片段直接添加到文档中,但可以将它作为一个仓库来使用,即可以在里面保存将来可能会添加到文档中的节点,要创建文档片段,可以使用document.createDocumentFragment()方法。
- Attr类型
元素的特性在DOM中以Attr类型来表示。在所有浏览器中都可以访问Attr类型的构造函数和原型,特性节点具有以下特征:
- nodeType的值为11;
- nodeName的值是特性的名称;
- nodeValue的值是特性的值;
- parentNode的值为null;
- 在HTML中不支持子节点;
- 在XML中子节点可以是Text或EntityReference。
尽管它们也是节点,但特性却不被认为是DOM文档树的一部分,开发人员最常用的是getAttribute、setAttribute和removeAttributes方法,很少直接引用特性节点。
Attr对象有3个属性:name、value和specified,其中name是特性名称,value是特性值,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”
- 动态脚本
动态加载外部脚本,如下代码:
var script=document.createElement(“script”); script.type=”text/javascript”; script.src=”client.js”; document.body.appendChild(script);
- 动态样式
动态加载外部样式,如下代码:
var link=document.createElement(“link”); link.rel=”stylesheet”; link.type=”text/css”; link.href=”style.css”; var head=document.getElementsByTagName(“head”)[0]; head.appendChild(link);