美文网首页
2018-12-22

2018-12-22

作者: kathyever | 来源:发表于2018-12-22 17:20 被阅读0次

    10.1.4 Text类型

    文本节点由Text类型表示,包含的是可以照字面解释的纯文本内容。
    纯文本中可以包含转义后的HTML字符,但不能包含HTML代码

    Text节点具有以下特征:
    ◆ nodeType的值为3;
    ◆ nodeName的值为“#text”;
    ◆ nodeValue的值为节点所包含的文本;
    ◆ parentNode是一个Element;
    ◆ 不支持(没有)子节点

    可以通过nodeValue属性或data属性访问Text节点中包含的文本,这两个属性中包含中的值相同。对nodeValue的修改也会通过data反应出来,反之亦然。
    使用下列方法可以操作节点中的 文本:
    ◆ appendDate(text):将text添加到节点的末尾
    ◆ deleteDate(offset,count):从offset指定的位置开始删除count个字符
    ◆ inserDate(offset,text):在offset指定的位置插入text
    ◆ replaceData(offset,count,text):用text替换从offset指定的位置开始到offset+count位置处的文本
    ◆ spiltText(offset):从offset指定的位置将当前文本节点分成两个文本节点
    ◆ substringDate(offset,count):提取从offset指定的位置开始到offset+count为止处的字符串。

    除了以上的,文本节点还有一个length属性,保存着节点中字符的数目。而且,nodeValue.length和data.length中也保存着同样的值。

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

    //没有内容,也就没有文本节点
    <div></div>
    
    //有空格,因而有一个文本节点
    <div> </div>
    
    //有内容,因而有一个文本节点
    <div>Hello</div>
    

    第三个<div>也有一个文本节点,其nodeValue的值为“Hello”,可以使用下面的 代码来访问这些文本子节点

    var textNode = div.firstChild;//或者div.childNodes[0]
    //取得了文本节点的引用后,就可以像下面这样来修改它了
    div.firstChild.nodeValue="Some other message";
    
    //小于号、大于号或引号会经过HTML编码 转义
    
    div.firstChild.nodeValue="Some <strong> other </strong> message";
    //输出结果是“Some &lt;strong&gt;other&lt;/strong&gt;message”
    
    1.创建文本节点

    使用document.createTextNode() 创建新文本节点,这个方法接受一个参数——要插入节点中的文本。与设置已有文本节点的值一样,作为参数的文本也将按照HTML或XML的格式进行编码。

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

    //创建一个新的<div>并为它指定了值为“message”的class特性
    var element = document.createElement("div");
    element.className="message";
    
    //又创建一个文本节点,将其添加到前面创建的元素中。
    var textNode=document.createTextNode("Hello world!");
    element.appendChild(textNode);
    
    //最后,将这个元素添加到文档的<body>元素中,就可以在浏览器中看到新创建的 元素和文本节点了。
    document.body.appendChild(element);
    
    2.规范化文本节点

    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.childNodes.length);//2
    
    element.normalize();
    alert(element.childNodes.length);//1
    alert(element.firstChild.nodeValue);//"Hello world ! Yippee!"
    

    浏览器在解析文档时永远不会创建相邻的文本节点。

    3.分隔文本节点

    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
    

    分隔文本节点是从文本节点中提取数据的一种常用DOM解析技术

    相关文章

      网友评论

          本文标题:2018-12-22

          本文链接:https://www.haomeiwen.com/subject/akwikqtx.html