大家好，我是IT修真院武漢分院第13期學(xué)員，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網(wǎng)js4任務(wù)中可能會(huì)使用到的知識(shí)點(diǎn)：
常見DOM操作有哪些？
小課堂
DOM常用操作
1.查找節(jié)點(diǎn)
2.添加新節(jié)點(diǎn)
3.刪除節(jié)點(diǎn)
4.修改節(jié)點(diǎn)
1、查找節(jié)點(diǎn)
1、document.getElementById('id屬性值');
返回?fù)碛兄付╥d的第一個(gè)對(duì)象的引用
2、document/element.getElementsByClassName('class屬性值');?
返回?fù)碛兄付╟lass的對(duì)象集合
3、document/element.getElementsByTagName('標(biāo)簽名');?
返回?fù)碛兄付?biāo)簽名的對(duì)象集合?
4、document.getElementsByName('name屬性值');
返回?fù)碛兄付Q的對(duì)象結(jié)合
5、document/element.querySelector('CSS選擇器');
僅返回第一個(gè)匹配的元素
6、document/element.querySelectorAll('CSS選擇器');
返回所有匹配的元素
7、document.documentElement
獲取頁(yè)面中的HTML標(biāo)簽
8、document.body
獲取頁(yè)面中的BODY標(biāo)簽
2.添加新節(jié)點(diǎn)
1、parent.appendChild( element/txt/comment/fragment );
向父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)后追加新節(jié)點(diǎn)
2、parent.insertBefore( newChild, existingChild );?
向父節(jié)點(diǎn)的某個(gè)特定子節(jié)點(diǎn)之前插入新節(jié)點(diǎn)
3、element.setAttributeNode( attributeName );?
給元素增加屬性節(jié)點(diǎn)?
4、element.setAttribute( attributeName, attributeValue );
給元素增加指定屬性，并設(shè)定屬性值
3.刪除節(jié)點(diǎn)
1、parentNode.removeChild( existingChild );
刪除已有的子節(jié)點(diǎn)，返回值為刪除節(jié)點(diǎn)
2、element.removeAttribute('屬性名');?
刪除具有指定屬性名稱的屬性，無(wú)返回值
3、element.removeAttributeNode( attrNode );?
刪除指定屬性，返回值為刪除的屬性?
4.修改節(jié)點(diǎn)
1、parentNode.replaceChild( newChild, existingChild );
用新節(jié)點(diǎn)替換父節(jié)點(diǎn)中已有的子節(jié)點(diǎn)
2、element.setAttributeNode( attributeName );?
若原元素已有該節(jié)點(diǎn)，此操作能達(dá)到修改該屬性值的目的
3、element.setAttribute( attributeName, attributeValue );?
若原元素已有該節(jié)點(diǎn)，此操作能達(dá)到修改該屬性值的目的?
今天的分享就到這里啦，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)、留言、拍磚~
技能樹-IT修真院
IT修真院是一個(gè)免費(fèi)的線上IT技術(shù)學(xué)習(xí)平臺(tái) 。
每個(gè)職業(yè)以15個(gè)左右的task為初學(xué)者提供更快速高效的學(xué)習(xí)方式 ；
所有task均是從真實(shí)項(xiàng)目中提煉出來(lái)的技能點(diǎn)，
強(qiáng)調(diào)實(shí)戰(zhàn)演練+自學(xué)優(yōu)先+師兄輔導(dǎo)的學(xué)習(xí)方式，
嚴(yán)格的日?qǐng)?bào)體系，歡樂的交流討論學(xué)習(xí)氣氛，更有無(wú)數(shù)師兄師姐幫你解疑
