DOM（三）

  • Text类型

文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容，纯文本中可以包含转义后的HTML字符，但不包含HTML代码，Text节点具有以下特征：

  1. nodeType值为3；
  2. nodeName的值为”#text”;
  3. nodeValue的值为节点所包含的文本;
  4. parentNode是一个Element;
  5. 不支持子节点

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

  1. appnedData(text):将text添加到节点的末尾。
  2. deleteData(offset,count):从offset指定的位置开始删除count个字符。
  3. insertData(offset,text):在offset指定的位置插入text。
  4. replaceData(offset,count,text)：用text替换从offset指定的位置开始到offset+count为止的文本。
  5. splitText(offset):从offset指定的位置将当前文本节点分成两个文本节点。
  6. 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节点具有下列特征：

  1. nodeType的值8;
  2. nodeName的值为”#comment”;
  3. nodeValue的值是注释的内容;
  4. parentNode可能是Document或Element;
  5. 不支持子节点。

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

使用document.createComent()并未其传递注释文本也可以创建注释节点。

  • CDATASection类型

CDATASection类型只针对基于XML的文档，表示的是CDATA区域。与Comment类似，CDATASection类型继承自Text类型，因此拥有除splitText之外的所有字符串操作方法，CDATASection节点具有下列特征：

  1. nodeType的值为4;
  2. nodeName的值为”#cdata-section”;
  3. nodeValue的值是CDATA区域中的内容；
  4. parentNode可能是Document或Element；
  5. 不支持子节点。

CDATA区域只会出现在XML文档中，因此多数浏览器都会把CDATA区域错误地解析为Coment或Element。

  •  DocumentType类型

DocumentType类型在Web浏览器中并不常用，仅有firefox、safari和Opera支持它。DocumentType包含着与文档的doctype有关的所有信息：

  1. NodeType的值为10；
  2. nodeName的值为doctype的名称；
  3. nodeValue的值为null；
  4. parentNode是Document；
  5. 不支持子节点。
  •  DocumentFragment类型

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

  1. nodeType的值为11；
  2. nodeName的值为 “#document-fragment”;
  3. nodeValue的值为null;
  4. parentNode的值为null;
  5. 子节点可以是Element、processingInstruction、comment、text、CDATASection或EntityReference。

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

  •  Attr类型

元素的特性在DOM中以Attr类型来表示。在所有浏览器中都可以访问Attr类型的构造函数和原型，特性节点具有以下特征：

  1. nodeType的值为11；
  2. nodeName的值是特性的名称；
  3. nodeValue的值是特性的值；
  4. parentNode的值为null；
  5. 在HTML中不支持子节点；
  6. 在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);

 

posted @ 2017-06-06 13:56  余子酱  阅读(211)  评论(0)  编辑  收藏  举报