• 当前标签:文本节点

程序开发 DOM节点 - 文本节点

DOM节点类型: 类型 值 说明 ELEMENT_NODE 1 元素节点 ATTRIBUTE_NODE 2 属性节点 TEXT_NODE 3 文本节点 COMMENT_NODE 8 注释节点 DOCUMENT_NODE 9 文档节点   <ul>         <li>HTML5</li>         <li>CSS3</li>         <li>PHP</li>         <li>JavaScript</li>     </ul> var list = document.querySelector('ul')         console.log(list.childNodes)         // childNodes属性返回子节点的集合 以childNodes对象         console.log(list.childNodes.length)  //9         console.log(list.childNodes[0].nodeType)  //3         console.log(list.childNodes[0])  //#text //<ul>和<li>直接的空白节点         console.log(list.childNodes[1])  //<li>HTML5</li>         for(var i = 0;i < list.childNodes.length;i++){             // console.log(list.childNodes[i].nodeName)             // nodeName得到节点类型的名称 是字符串 #text表示文本 li表示标签             // console.log(list.childNodes[i].nodeType)             // nodeType得到的是节点类型的值 数字1表示元素节点 3表示文本节点             // console.log(list.childNodes[i].nodeType)             // nodeValue 属性规定节点的值              // 元素节点是undefined 或 null              // 文本节点是文本本省             // 属性节点是属性值         var node = list.childNodes[i]         if(node.nodeType != Node.TEXT_NODE){             console.log(node.nodeName)             var liChildren = node.childNodes             console.log(liChildren[0].nodeValue)             var liChild = liChildren[0]             console.log(liChild.nodeName)             console.log(liChild.nodeValue)         }         } var textNode = list.childNodes[1].childNodes[0]         console.log(textNode.textContent) textContent 和 nodeValue 都可以弹出文本节点的内容    textNode.appendData(':HTML5的第五个版本')  //HTML5:HTML5的第五个版本 // 在结尾处添加新的文本 textNode.insertData(1,'----')  //H----TML5:HTML5的第五个版本 // 在指定的位置插入新文本 textNode.replaceData(5,5,'****')  //H----****HTML5的第五个版本 // 替换指定区域的文本 // 三个参数 (指定的位置,替换的数量,'替换的字符') textNode.deleteData(1,5) //H***HTML5的第五个版本 // 删除指定区域的文本 alert(textNode.substringData(7,10))  //L5的第五个版本 // 获取指定区域的文本 substringData(开始位置,字符的数量) alert(textNode.length) // 获取文本节点的个数 alert(textNode.data) // 获取文本节点的内容 alert(textNode.wholeText) // 获取文本节点的内容 textNode.remove() // 移除文本节点

2017-07-14 17:18:39 27 0 0
阅读详情
  • 1
前往