zoukankan      html  css  js  c++  java
  • Javascript高级编程学习笔记(38)—— DOM(4)Text

    Text类型

    html页面中的纯文本内容就属于Text类型

    纯文本内容可以包含转义后的html字符,但不能包括 html 代码

    text类型具有以下属性、方法

    nodeType:3

    nodeName:'#text'

    nodeValue:值为节点所包含的文本节点

    parentNode:Element节点

    childNodes:不支持子节点

    data:值与nodeValue一致

    length:保存节点中的文字数目与data.value、nodeValue.length一致

    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处开始的count个字符

    默认情况下,每个可以包含内容的元素最多只能有一个文本节点

    只要元素起止标签之间存在内容,就会生成一个文本节点

    只要被修改的节点存在于文档树中,那么对文本节点的修改将会立即呈现在页面中

    需要注意的是对文本节点插入的内容,会被html、XML编码,也就是说大于小于号等特殊的html字符都会被转义

    所以通过text类型来操作页面上的文本,在一定程度上可以避免XSS(脚本注入)攻击

    创建文本节点

    使用 document.createTextNode() 创建文本节点

    该方法接收一个参数:要插入节点中的文本

    在创建时会让其 ownerDocument 属性指向调用createTextNode()方法的document对象

    在创建文本节点后其内容并不会立即出现在页面中,我们需要将其插入文档树中才能显示

    一般来说一个元素只有一个文本节点,但是当我们多次对其进行插入后就会有多个文本节点

    需要注意的是,两个相邻的同级文本节点之间的内容显示并不会有空格,即它们的内容会连在一起显示

    规范化文本节点

    正是由于两个相邻的同级文本节点之间的内容会连在一起显示,所以会带来混乱,我们无法分辨到底这个字符串的那一部分属于前一个文本节点,而哪一个又属于后一个

    所以为了解决这种情况,DOM提供了一个方法用于修复这种情况

    这个方法由 Node 类型定义,所以所有的节点都存在该方法

    其使用方式也很简单,我们只需要在拥有多个文本子节点的元素上调用该方法即可

    element.normalize()

    这样就可以合并这些不合逻辑的文本节点

    需要注意的是,多个文本节点只有在我们进行DOM操作的时候才会产生

    HTML在解析的时候是不会产生多个文本节点这样的情况的

    PS. 在部分情况下在IE6中使用该方法会导致浏览器崩溃,IE7以上则不存在该问题

    分割文本节点

    Text类型提供了一个功能与 normalize 相反的方法,splitText()

    该方法会将一个文本节点从指定位置分成两个文本节点

    原来的文本节点将包含指定位置之前的文本,新的文本节点将包含剩下的值

    该方法返回这个新的文本节点,该节点已经添加到了文档中,parentNode与原来的文本节点一致,位置在原来的文本节点之后

    这种方法常用于从文本节点中提取数据

  • 相关阅读:
    mysql数据库中的锁
    HihoCoder
    旅游规划(双权连通图)
    单调栈的原理
    战争联盟(并查集)
    点赞狂魔(巧用STL容器事半功倍)
    这是二叉搜索树吗?
    好像是两种权的dijkstra
    pat--046.整除光棍(除法模拟)
    幸运数字 2
  • 原文地址:https://www.cnblogs.com/lhyxq/p/10248107.html
Copyright © 2011-2022 走看看