DOM节点 - 文本节点 - 会coding的HAM

DOM节点 - 文本节点

BG7ZAG

|

2017-7-14 17:18

|

1,747

|

0

|

524 字

|

3 分钟

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()
// 移除文本节点

DOM节点文本节点

暂无评论

发送评论编辑评论

Markdown

悄悄话

邮件提醒

|´・ω・)ノ

ヾ(≧∇≦*)ゝ

(☆ω☆)

（╯‵□′）╯︵┴─┴

￣﹃￣

(/ω＼)

∠( ᐛ 」∠)＿

(๑•̀ㅁ•́ฅ)

→_→

୧(๑•̀⌄•́๑)૭

٩(ˊᗜˋ*)و

(ノ°ο°)ノ

(´இ皿இ｀)

⌇●﹏●⌇

(ฅ´ω`ฅ)

(╯°A°)╯︵○○○

φ(￣∇￣o)

ヾ(´･･｀｡)ノ"

( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃

(ó﹏ò｡)

Σ(っ °Д °;)っ

( ,,´･ω･)ﾉ"(´っω･｀｡)

╮(╯▽╰)╭

o(*////▽////*)q

＞﹏＜

( ๑´•ω•) "(ㆆᴗㆆ)

颜文字

Emoji

小恐龙

花!