DOM节点 – 文本节点

原创 黄良钵  2017-07-14 17:18  阅读 19 次 评论 0 条

DOM节点类型:

类型说明
ELEMENT_NODE1元素节点
ATTRIBUTE_NODE2属性节点
TEXT_NODE3文本节点
COMMENT_NODE8注释节点
DOCUMENT_NODE9文档节点

 

  1. <ul>
  2.         <li>HTML5</li>
  3.         <li>CSS3</li>
  4.         <li>PHP</li>
  5.         <li>JavaScript</li>
  6.     </ul>
  1. var list = document.querySelector('ul')
  2.         console.log(list.childNodes)
  3.         // childNodes属性返回子节点的集合 以childNodes对象
  4.         console.log(list.childNodes.length)  //9
  5.         console.log(list.childNodes[0].nodeType)  //3
  6.         console.log(list.childNodes[0])  //#text //<ul>和<li>直接的空白节点
  7.         console.log(list.childNodes[1])  //<li>HTML5</li>
  8.         for(var i = 0;i < list.childNodes.length;i++){
  9.             // console.log(list.childNodes[i].nodeName)
  10.             // nodeName得到节点类型的名称 是字符串 #text表示文本 li表示标签
  11.             // console.log(list.childNodes[i].nodeType)
  12.             // nodeType得到的是节点类型的值 数字1表示元素节点 3表示文本节点
  13.             // console.log(list.childNodes[i].nodeType)
  14.             // nodeValue 属性规定节点的值 
  15.             // 元素节点是undefined 或 null 
  16.             // 文本节点是文本本省
  17.             // 属性节点是属性值
  18.         var node = list.childNodes[i]
  19.         if(node.nodeType != Node.TEXT_NODE){
  20.             console.log(node.nodeName)
  21.             var liChildren = node.childNodes
  22.             console.log(liChildren[0].nodeValue)
  23.             var liChild = liChildren[0]
  24.             console.log(liChild.nodeName)
  25.             console.log(liChild.nodeValue)
  26.         }
  27.         }
  1. var textNode = list.childNodes[1].childNodes[0]
  2.         console.log(textNode.textContent)

textContent 和 nodeValue 都可以弹出文本节点的内容

 

  1.  textNode.appendData(':HTML5的第五个版本')  //HTML5:HTML5的第五个版本
  2. // 在结尾处添加新的文本
  3. textNode.insertData(1,'----')  //H----TML5:HTML5的第五个版本
  4. // 在指定的位置插入新文本
  5. textNode.replaceData(5,5,'****')  //H----****HTML5的第五个版本
  6. // 替换指定区域的文本
  7. // 三个参数 (指定的位置,替换的数量,'替换的字符')
  8. textNode.deleteData(1,5) //H***HTML5的第五个版本
  9. // 删除指定区域的文本
  10. alert(textNode.substringData(7,10))  //L5的第五个版本
  11. // 获取指定区域的文本 substringData(开始位置,字符的数量)
  12. alert(textNode.length)
  13. // 获取文本节点的个数
  14. alert(textNode.data)
  15. // 获取文本节点的内容
  16. alert(textNode.wholeText)
  17. // 获取文本节点的内容
  18. textNode.remove()
  19. // 移除文本节点
本文地址:https://xn--nf1a578axkh.xn--fiqs8s/743.html
关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情