《Web前端基礎(chǔ)》課件-任務(wù)7：學(xué)習(xí)DOM模型 節(jié)點(diǎn)操作

節(jié)點(diǎn)操作1獲取節(jié)點(diǎn)獲取父節(jié)點(diǎn)：在JavaScript中，可以使用parentNode屬性獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)，如果該節(jié)點(diǎn)沒(méi)有父節(jié)點(diǎn)，那么parentNode屬性返回null。獲取父節(jié)點(diǎn)的示例代碼如下。node.parentNodeDOM節(jié)點(diǎn)對(duì)象1獲取節(jié)點(diǎn)屬性說(shuō)明firstChild獲取當(dāng)前節(jié)點(diǎn)的首個(gè)子節(jié)點(diǎn)lastChild獲取當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)firstElementChild獲取當(dāng)前節(jié)點(diǎn)的首個(gè)子元素節(jié)點(diǎn)lastElementChild獲取當(dāng)前節(jié)點(diǎn)的最后一個(gè)子元素節(jié)點(diǎn)children獲取當(dāng)前節(jié)點(diǎn)的所有子元素節(jié)點(diǎn)集合childNodes獲取當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)集合獲取子節(jié)點(diǎn)：在DOM中，用來(lái)獲取子節(jié)點(diǎn)的屬性有很多，可以結(jié)合子節(jié)點(diǎn)的特征進(jìn)行獲取。1獲取節(jié)點(diǎn)childNodes屬性瀏覽器兼容性IE6~IE8中childNodes屬性不會(huì)獲取文本節(jié)點(diǎn)。在IE9及以上版本和主流瀏覽器中則可以獲取文本節(jié)點(diǎn)。在開(kāi)發(fā)過(guò)程中，有時(shí)需要?jiǎng)?chuàng)建一個(gè)新節(jié)點(diǎn)并添加到文檔中。例如，在“百度”搜索引擎中進(jìn)行搜索后，搜索框下方的搜索記錄列表中會(huì)增加一個(gè)新歷史記錄，這個(gè)新歷史記錄就可以通過(guò)創(chuàng)建并添加節(jié)點(diǎn)實(shí)現(xiàn)。2創(chuàng)建并添加節(jié)點(diǎn)2創(chuàng)建并添加節(jié)點(diǎn)創(chuàng)建節(jié)點(diǎn)：使用document對(duì)象的createElement()方法可以創(chuàng)建元素節(jié)點(diǎn)，語(yǔ)法如下。創(chuàng)建節(jié)點(diǎn)的示例代碼如下。使用createElement()方法創(chuàng)建的節(jié)點(diǎn)是頁(yè)面中原本不存在的，所以這種方式也稱為動(dòng)態(tài)創(chuàng)建節(jié)點(diǎn)。Tipvardiv=document.createElement('div');console.log(div);//結(jié)果為：<div></div>document.createElement('標(biāo)簽名');2創(chuàng)建并添加節(jié)點(diǎn)添加節(jié)點(diǎn)：節(jié)點(diǎn)創(chuàng)建后，我們需要根據(jù)實(shí)際的開(kāi)發(fā)需求將節(jié)點(diǎn)添加到文檔中的指定位置。添加節(jié)點(diǎn)的方法：DOM中提供了appendChild()方法和insertBefore()方法用于添加節(jié)點(diǎn)，這兩個(gè)方法都由父節(jié)點(diǎn)的對(duì)象調(diào)用。appendChild()方法表示將一個(gè)節(jié)點(diǎn)添加到父節(jié)點(diǎn)的所有子節(jié)點(diǎn)的末尾。insertBefore()方法表示將一個(gè)節(jié)點(diǎn)添加到父節(jié)點(diǎn)中的指定子節(jié)點(diǎn)的前面，該方法需要接收兩個(gè)參數(shù)，第1個(gè)參數(shù)表示要添加的節(jié)點(diǎn)，第2個(gè)參數(shù)表示父節(jié)點(diǎn)中的指定子節(jié)點(diǎn)。移除節(jié)點(diǎn)：在DOM中，可以通過(guò)removeChild()方法將一個(gè)父節(jié)點(diǎn)的指定子節(jié)點(diǎn)移除，語(yǔ)法格式如下。node.removeChild(child)父節(jié)點(diǎn)3移除節(jié)點(diǎn)移除指定的子節(jié)點(diǎn)child4復(fù)制節(jié)點(diǎn)復(fù)制節(jié)點(diǎn)：在DOM中，可以通過(guò)cloneNode()方法復(fù)制節(jié)點(diǎn)。通過(guò)一個(gè)節(jié)點(diǎn)對(duì)象調(diào)用cloneNode()方法后，該方法會(huì)返回節(jié)點(diǎn)對(duì)象的副本。該方法的第1個(gè)參數(shù)是可選參數(shù)，具體說(shuō)明如下。默認(rèn)為false，表示只復(fù)制節(jié)點(diǎn)本身，不復(fù)制節(jié)點(diǎn)內(nèi)部的子節(jié)點(diǎn)。如果設(shè)為true，表示復(fù)制節(jié)點(diǎn)本身及里面所有的子節(jié)點(diǎn)。案例實(shí)現(xiàn)步驟搭建頁(yè)面結(jié)構(gòu)。實(shí)現(xiàn)單擊“發(fā)布”按鈕發(fā)表留言的功能。實(shí)現(xiàn)刪除留言功能。5【案例】簡(jiǎn)