DOM 重點(diǎn)核心

關(guān)于dom操作,我們主要針對(duì)于元素的操作。主要有創(chuàng)建、增、刪、改、查、屬性操作、事件操作
1.創(chuàng)建

1. document.write
2. innerHTML
3. createElement
區(qū)別
1.document.write 是直接將內(nèi)容寫入頁面的內(nèi)容流,但是文檔流執(zhí)行完畢,則它會(huì)導(dǎo)致頁面全部重繪
2.innerHTML 是將內(nèi)容寫入某個(gè) DOM 節(jié)點(diǎn),不會(huì)導(dǎo)致頁面全部重繪
3.innerHTML 創(chuàng)建多個(gè)元素效率更高(不要拼接字符串,采取數(shù)組形式拼接),結(jié)構(gòu)稍微復(fù)雜
4.createElement() 創(chuàng)建多個(gè)元素效率稍低一點(diǎn)點(diǎn),但是結(jié)構(gòu)更清晰不同瀏覽器下,innerHTML 效率要比 creatElement 高

2.增

1.appendChild
2.insertBefore
1.node.appendChild() 方法將一個(gè)節(jié)點(diǎn)添加到指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾。類似于 CSS 里面的after 偽元素
2.node.insertBefore() 方法將一個(gè)節(jié)點(diǎn)添加到父節(jié)點(diǎn)的指定子節(jié)點(diǎn)前面。類似于 CSS 里面的 before偽元素

3.刪除,復(fù)制節(jié)點(diǎn)

removeChild
node.removeChild() 方法從 DOM 中刪除一個(gè)子節(jié)點(diǎn),返回刪除的節(jié)點(diǎn)。
cloneNode()
node.cloneNode() 方法返回調(diào)用該方法的節(jié)點(diǎn)的一個(gè)副本。
1.如果括號(hào)參數(shù)為空或者為 false ,則是淺拷貝,即只克隆復(fù)制節(jié)點(diǎn)本身,不克隆里面的子節(jié)點(diǎn)。
2.如果括號(hào)參數(shù)為 true ,則是深拷貝,會(huì)復(fù)制節(jié)點(diǎn)本身以及里面所有的子節(jié)點(diǎn)

4.改

主要修改dom的元素屬性,dom元素的內(nèi)容、屬性, 表單的值等
1.修改元素屬性: src、href、title等
2.修改普通元素內(nèi)容: innerHTML 、innerText
3.修改表單元素: value、type、disabled等
4.修改元素樣式: style、className

5.查

主要獲取查詢dom的元素
1.DOM提供的API 方法: getElementById、getElementsByTagName 古老用法 不太推薦
2.H5提供的新方法: querySelector、querySelectorAll 提倡
3.利用節(jié)點(diǎn)操作獲取元素: 父(parentNode)、子(children)、兄(previousElementSibling、
nextElementSibling) 提倡

6. 屬性操作

1.setAttribute:設(shè)置dom的屬性值
2.getAttribute:得到dom的屬性值
3.removeAttribute移除屬性

7.事件操作
事件操作.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容