DOM節(jié)點(diǎn)操作（都是函數(shù)）

創(chuàng)建節(jié)點(diǎn)

createElement("p")

var createDiv = document.createElement("p")

image.png

控制臺(tái)輸出 ↓ 這個(gè)h1只是創(chuàng)建了但是沒有被使用

image.png

文檔結(jié)構(gòu)里面也沒有h1這個(gè)標(biāo)簽

image.png

2、添加節(jié)點(diǎn)（使用節(jié)點(diǎn)）

使用方法：父節(jié)點(diǎn).appendChild();

父節(jié)點(diǎn).appendChild(新節(jié)點(diǎn)); 父節(jié)點(diǎn)的最后添加一個(gè)新節(jié)點(diǎn)

image.png

ddiv是我獲取到的父節(jié)點(diǎn)赖歌，把h2標(biāo)簽添加到ddiv元素的最后面甩十。

控制臺(tái)輸出 ↓ h2標(biāo)簽在span標(biāo)簽的下面

image.png

使用方法：父節(jié)點(diǎn).insertBefore(要添加的節(jié)點(diǎn)胞四，參考節(jié)點(diǎn))盔腔；

父節(jié)點(diǎn).insertBefore(新節(jié)點(diǎn),參考節(jié)點(diǎn));在參考節(jié)點(diǎn)前添加;

image.png

創(chuàng)建h1標(biāo)簽通過createH1變量名來使用它壕曼，作為要添加的節(jié)點(diǎn)昼扛。

參考節(jié)點(diǎn)：ddiv.firstElementChild選擇父節(jié)點(diǎn)第一個(gè)子節(jié)點(diǎn)寸齐，就是span標(biāo)簽，它會(huì)在在參考節(jié)點(diǎn)前添加抄谐∶祓校控制臺(tái)輸出 ↓

image.png

3、刪除節(jié)點(diǎn)

用法：用父節(jié)點(diǎn)刪除子節(jié)點(diǎn)蛹含。

父節(jié)點(diǎn).removeChild（子節(jié)點(diǎn)）毅厚；必須制定要?jiǎng)h除的子節(jié)點(diǎn)

image.png

獲取到的ddiv ID作為父節(jié)點(diǎn)，通過removeChild這個(gè)方法來刪除div的lastElementChild（最后一個(gè)子節(jié)點(diǎn)）的方法浦箱。

控制臺(tái)輸出 ↓ 吸耿，h2標(biāo)簽已經(jīng)被刪除了，只剩h1標(biāo)簽酷窥。

image.png

節(jié)點(diǎn)自己刪除自己：

不知道父級(jí)的情況下咽安，可以這么寫：

node.parentNode.removeChild(node)，和上面的效果一樣蓬推。

使用的方法是妆棒，用

刪除節(jié)點(diǎn).parentNode（父節(jié)點(diǎn)）.removeChild(刪除節(jié)點(diǎn))

這個(gè)方法，找到需要?jiǎng)h除的節(jié)點(diǎn)父節(jié)點(diǎn)沸伏，括號(hào)里面寫入刪除節(jié)點(diǎn)自己的變量名糕珊。

我需要?jiǎng)h除的節(jié)點(diǎn)通過點(diǎn)parentNode找到父節(jié)點(diǎn)，然后刪除我自己毅糟。

image.png

控制臺(tái)輸出 ↓

image.png

4红选、復(fù)制節(jié)點(diǎn)（ oldNode.cloneNode（true））

想要復(fù)制的節(jié)點(diǎn)調(diào)用這個(gè)函數(shù)cloneNode()，得到一個(gè)新節(jié)點(diǎn)留特。

新節(jié)點(diǎn)=要復(fù)制的節(jié)點(diǎn).cloneNode(參數(shù)) ; 參數(shù)可選復(fù)制節(jié)點(diǎn)

image.png

方法內(nèi)部可以傳參纠脾，如果是true，深層復(fù)制蜕青，如果是false苟蹈，只復(fù)制節(jié)點(diǎn)本身。

image.png

控制臺(tái)輸出 ↓

image.png

用于復(fù)制節(jié)點(diǎn)右核，接受一個(gè)布爾值參數(shù)慧脱， true 表示深復(fù)制（復(fù)制節(jié)點(diǎn)及其所有子節(jié)點(diǎn)）， false 表示淺復(fù)制（復(fù)制節(jié)點(diǎn)本身贺喝，不復(fù)制子節(jié)點(diǎn)）菱鸥，這個(gè)在復(fù)制比較多的元素時(shí)候宗兼，盡量不要使用js操作。對于頁面效果不友好氮采，可能會(huì)卡頓殷绍。