javascript操作htmldom節(jié)點(diǎn)的基礎(chǔ)教程_基礎(chǔ)知識(shí)

javascript操作htmldom節(jié)點(diǎn)的基礎(chǔ)教程_基礎(chǔ)知識(shí)

ID:30768839

大?。?7.00 KB

頁(yè)數(shù):8頁(yè)

時(shí)間:2019-01-03

javascript操作htmldom節(jié)點(diǎn)的基礎(chǔ)教程_基礎(chǔ)知識(shí)_第1頁(yè)
javascript操作htmldom節(jié)點(diǎn)的基礎(chǔ)教程_基礎(chǔ)知識(shí)_第2頁(yè)
javascript操作htmldom節(jié)點(diǎn)的基礎(chǔ)教程_基礎(chǔ)知識(shí)_第3頁(yè)
javascript操作htmldom節(jié)點(diǎn)的基礎(chǔ)教程_基礎(chǔ)知識(shí)_第4頁(yè)
javascript操作htmldom節(jié)點(diǎn)的基礎(chǔ)教程_基礎(chǔ)知識(shí)_第5頁(yè)
資源描述:

《javascript操作htmldom節(jié)點(diǎn)的基礎(chǔ)教程_基礎(chǔ)知識(shí)》由會(huì)員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)

1、JavaScript操作HTMLDOM節(jié)點(diǎn)的基礎(chǔ)教程因?yàn)镈OM的存在,這使我們可以通過(guò)JavaScript來(lái)獲取、創(chuàng)建、修改、或刪除節(jié)點(diǎn)。NOTE:下面提供的例子中的element均為元索節(jié)點(diǎn)。獲取節(jié)點(diǎn)父子關(guān)系clement.parentNodeelement,firstChild/element.lastChildelement,childNodes/element.children兄弟關(guān)系element.prcviousSibling/clcment.ncxtSiblingelement.previousElementSibling/element?nextElementSibl

2、ing通過(guò)節(jié)點(diǎn)直接的關(guān)系獲取節(jié)點(diǎn)會(huì)導(dǎo)致代碼維護(hù)性大大降低(節(jié)點(diǎn)之間的關(guān)系變化會(huì)直接影響到獲取節(jié)點(diǎn)),而通過(guò)接口則可以有效的解決此問(wèn)題。通過(guò)節(jié)點(diǎn)直接的關(guān)系獲取節(jié)點(diǎn)會(huì)導(dǎo)致代碼維護(hù)性人人降低(節(jié)點(diǎn)之間的關(guān)系變化會(huì)直接影響到獲取節(jié)點(diǎn)),而通過(guò)接口則可以有效的解決此問(wèn)題。ELEMENT_NODE&TEXT_NODE

  • First
  • Second
  • Third
  • 3、Fourth

  • IIcllo

    varulNode=document?getElementsByTagName(〃ul〃)[0];console,log(ulNode.parentNode);//console,log(ulNode.previousElementSibling);//nullconsole.log(ulNode.nextElementSibling);//

    Hello

    console,log(ulNode.firstElcmcntChild);

    4、//

  • First
  • console.log(ulNode.lastElcmentChild);//<1i>FourthNTOE:細(xì)心的人會(huì)發(fā)現(xiàn),在節(jié)點(diǎn)遍歷的例子中,body、ul.li、p節(jié)點(diǎn)之間是沒(méi)有空格的,因?yàn)槿绻锌崭瘢敲纯崭窬蜁?huì)被當(dāng)做一個(gè)TEXT節(jié)點(diǎn),從而用ulNode.previousSibling獲取到得就是一個(gè)空的文本節(jié)點(diǎn),而不是
  • First
  • 節(jié)點(diǎn)了。即節(jié)點(diǎn)遍丿力的兒個(gè)屬性會(huì)得到所有的節(jié)點(diǎn)類型,而元索遍歷只會(huì)得到相對(duì)應(yīng)的元素節(jié)點(diǎn)。一般情況下,用得比較多得還是元素節(jié)點(diǎn)的遍歷屬性。實(shí)現(xiàn)瀏覽器

    5、兼容版的element,children有一些低版本的瀏覽器并不支持element,children方法,但我們可以用下面的方式來(lái)實(shí)現(xiàn)兼容。CompatibleChildrenMethod

    123

    ppp

    hl
    functiongetElementChildren(e){if(e.chil

    6、dren){returne.children;}else{/*compatibleotherbrowse*/vari,len,children二[];varchild=element.firstChild;if(child!二element.lastCh訂d){while(chiId!二null){if(child.nodcTypc==1){children.push(child);child=child.nextSibling;}}else{childrcn.push(child);ijreturnchildren;}}/*TestmethodgetElementChiIdren(

    7、e)*/varitem二documcnt.gctElcmentByld(〃itcnT);varchildren=getElementChildren(item);for(vari=0;iNOTE:此兼容方法為初稿,還未進(jìn)行兼容性測(cè)試。接口獲取元素節(jié)點(diǎn)getElementByldgetElementsByTagNamegetEle

    當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文

    此文檔下載收益歸作者所有

    當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文
    溫馨提示:
    1. 部分包含數(shù)學(xué)公式或PPT動(dòng)畫(huà)的文件,查看預(yù)覽時(shí)可能會(huì)顯示錯(cuò)亂或異常,文件下載后無(wú)此問(wèn)題,請(qǐng)放心下載。
    2. 本文檔由用戶上傳,版權(quán)歸屬用戶,天天文庫(kù)負(fù)責(zé)整理代發(fā)布。如果您對(duì)本文檔版權(quán)有爭(zhēng)議請(qǐng)及時(shí)聯(lián)系客服。
    3. 下載前請(qǐng)仔細(xì)閱讀文檔內(nèi)容,確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載,若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
    4. 下載文檔時(shí)可能由于網(wǎng)絡(luò)波動(dòng)等原因無(wú)法下載或下載錯(cuò)誤,付費(fèi)完成后未能成功下載的用戶請(qǐng)聯(lián)系客服處理。