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是一个布尔值,用以区别特性是在代码中指定的,还是默认的。

    不要在该奋斗的年纪而选择了安逸
  • 相关阅读:
    loj#6433. 「PKUSC2018」最大前缀和(状压dp)
    PKUWC2019游记
    10. Regular Expression Matching
    9. Palindrome Number
    8. String to Integer (atoi)
    7. Reverse Integer
    6. ZigZag Conversion
    5. Longest Palindromic Substring
    4. Median of Two Sorted Arrays
    3. Longest Substring Without Repeating Characters
  • 原文地址:https://www.cnblogs.com/qqandfqr/p/5847071.html
Copyright © 2011-2022 走看看