關(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.事件操作
