第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

JavaScrip節(jié)點(diǎn)類型之Text節(jié)點(diǎn)與文檔片段

基本概念

Text类型包含的是可以照字面解释的纯文本内容,不能包含HTML代码。

Text节点的基本属性

nodeType的值为3;
nodeName的值为"#text";
nodeValue的值为节点所包含的文本;
parentNode是一个Element;

*Text类型没有子节点。

Text节点的常用属性

data:可以通过nodeValue属性或data属性访问或修改Text节点中包含的文本,这两个属性中包含的值相同。
length:该属性是只读属性,保存着节点中字符的数目。

例子:

<p>hello</p>

var p = document.getElementsByTagName("p")[0]

console.log(p.childNodes[0].nodeValue); //输出:hello
console.log(p.firstChild.data); //输出:hello
console.log(p.firstChild.length); //输出:5

//也可以直接修改文本内容
p.childNodes[0].data = "world";

Text节点的常用方法

document.createTextNode():创建新文本节点,这个方法接受一个参数:要插入节点中的文本。

例子:

var p=document.createElement("p")
var textNode=document.createTextNode("hello")
p.appendChild(textNode)
document.body.appendChild(p)

浏览器截图:

图片描述

normalize():将所有文本节点合并成一个节点。

例子:

var p = document.createElement("p")
var textNode1 = document.createTextNode("hello")
var textNode2 = document.createTextNode(" world")
p.appendChild(textNode1); 
p.appendChild(textNode2);
document.body.appendChild(p);

console.log(p.childNodes.length); //输出:2
console.log(p.firstChild.data); //输出:hello
p.normalize();
console.log(p.childNodes.length); //输出:1
console.log(p.firstChild.data); //输出:hello world

splitText(): 这个方法会将一个文本节点按照指定的位置分割成两个文本节点。

例子:

var p = document.createElement("p")
var textNode = document.createTextNode("hello world")
p.appendChild(textNode)
document.body.appendChild(p)

console.log(p.childNodes.length);  //输出:1
console.log(p.firstChild.nodeValue);  //输出:hello world
console.log(p.firstChild.splitText(5).nodeValue);  //输出:world
console.log(p.childNodes.length);  //输出:2
console.log(p.firstChild.nodeValue);  //输出:hello

DocumentFragment节点(文档片段)

DocumentFragment节点在文档中没有对应的标记,但可以将它作为一个“仓库”来使用,即可以在里面保存将来可能会添加到文档中的节点。

使用document.createDocumentFragment()方法创建文档片段。
使用appendChild()或insertBefore()将文档片段中的内容一次性地添加到文档中。

例子:

var fragment=document.createDocumentFragment()
var ul=document.createElement("ul")
var li=null

for (var i=0;i<3;i++){
    li=document.createElement("li")
    li.appendChild(document.createTextNode("Item " + (i+1)))
    fragment.appendChild(li)
}

ul.appendChild(fragment)
document.body.appendChild(ul)

浏览器截图:

图片描述

*实际上只会将文档片段的所有子节点添加到相应位置上;文档片段本身永远不会成为文档树的一部分。


文中的代码部分,带有“例子”和“测试代码”字样的,只是用来学习或测试某一功能用的代码,不可以直接用于项目的开发中。带有“代码如下”字样的,都是经过本人测试,简单修改即可用于项目开发中的代码,如有错误,欢迎指出。

點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫(xiě)下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消