zoukankan      html  css  js  c++  java
  • DOM-Text类型、Comment类型、CDATASection类型、DocumentType类型、DocumentFragment类型、Attr类型

    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属性。

    1         var textNode = document.createTextNode("<strong>Hello</strong> world!");

    一般情况下,每个元素只有一个文本子节点。不过,在某些情况下也可能包含多个文本子节点,如下:

     1         var element = document.createElement('div');
     2         element.className = "message";
     3 
     4         var textNode = docuemnt.createTextNode('Hello world!');
     5         element.appendChild(textNode);
     6 
     7         var anotherTextNode = document.createTextNode('Yippee!');
     8         element.appendChild(anotherTextNode);
     9 
    10         document.body.appendChild(element);

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

    2、规范化文本节点

    DOM文档中存在相邻的同胞文本节点很容易导致混乱,因为分不清哪个文本节点表示哪个字符串。normalize()能够将相邻文本节点合并的方法,在一个包含两个或者多个文本节点的父元素上调用
    normalize()方法,则会将所有文本节点合并成一个节点。

     1         var element = document.createElement('div');
     2         element.className = "message";
     3 
     4         var textNode = document.createTextNode('Hello world!');
     5         element.appendChild(textNode);
     6 
     7         var anotherTextNode = document.createTextNode('Yippee!');
     8         element.appendChild(anotherTextNode);
     9 
    10         document.body.appendChild(element);
    11 
    12         alert(element.childNodes.length); //2
    13 
    14         element.normalize();
    15         alert(element.childNodes.length); //1
    16         alert(element.firstChild.nodeValue); //Hello world!Yippee!

    3、分割文本节点

    splitText(),会将一个文本节点分成两个文本节点。这个方法会返回一个新文本节点,该节点与原节点的parentNode相同

     1         var element = document.createElement('div');
     2         element.className = "message";
     3 
     4         var textNode = document.createTextNode('Hello world!');
     5         element.appendChild(textNode);
     6 
     7         document.body.appendChild(element);
     8 
     9         var newNode = element.firstChild.splitText(5);
    10         alert(element.firstChild.nodeValue); //Hello
    11         alert(newNode.nodeValue); // world!
    12         alert(element.childNodes.length); //2

    Comment类型

    注释在DOM中是通过Comment类型来表示的,Comment节点具有下列特征:

    nodeType的值为8
    nodeName的值为"#comment"
    nodeValue的值是注释的内容
    parentNode的值是Document或者Element

    Comment类型与Text类型继承自相同的基类,因此它拥有除splitText()之外的所有字符串操作方法。
    注释节点可以通过其父节点来访问:

    1     <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()方法,如下:

    1     var fragment = document.createDocumentFragment();

    为一个<ul>元素添加3个列表项

     1     <ul id="myList"></ul>
     2 
     3     var fragment = document.createDocumentFragment();
     4     var ul = document.getElementById('myList');
     5     var li = null;
     6 
     7     for(var i=0;i<3;i++){
     8         li = document.createElement('li');
     9         li.appendChild(document.createTextNode("Item " + (i+1)));
    10         fragment.appendChild(li);
    11     }
    12 
    13     ul.appendChild(fragment);

     Attr类型

    元素的特性在DOM中以Attr类型来表示,特性就是存在于元素attributes属性中的节点。特性节点具有下列特征:

    nodeType的值为2
    nodeName的值是特性的名称
    nodeValue的值是特性的值
    parentNode的值是null

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

    不要在该奋斗的年纪而选择了安逸
  • 相关阅读:
    重学SQL Server 笔记(二)
    H.E mapreduce操作HBase(转载)
    Paxos算法能帮助我们做什么呢? 如下几点:
    Hive入门3–Hive与HBase的整合(转载)
    Hadoop的I / O管道剖析
    install jdk in ubuntu( please notice diffrent verstion and change the name in the configuration)
    sudo bin/hadoop namenode format
    asp.net + ext grid程序示例(提供源码下载)
    摩尔定律
    it's time go to sleep ,i will be continue!
  • 原文地址:https://www.cnblogs.com/qqandfqr/p/5847071.html
Copyright © 2011-2022 走看看