溫故知新 DOM節點增刪查改替換複製

2021-09-26 09:58:12 字數 4278 閱讀 2743

今天的通過下面這一段範例**展開：

"users"


>


class


="user"


>


小a君li


>


class


="user"


>


小c君li


>


ul>
我們可以設想這樣乙個應用場景，根據上面的結構，建立兩個新的「小b君」和「小d君」，按照 abcd 的順序插入到上面的列表中

那麼我們就開始吧～

建立 element 節點主要依賴createelement方法，這個方法接受乙個引數，即要建立的標籤名：

let templi = document.


createelement


('li');


console.


log(templi)


;//
這個標籤名並不區分大小寫，但是按照標準最好還是採用小寫～

當 element 被建立的時候，它所屬的 document 就被設定好了，

當乙個空的 element 建立出來後，就要根據我們的需求為其新增內容

如果我們要新增的是文字內容，可以採用下面的幾個方法；

而關於新增（插入）節點的內容就放在下一節插入節點中

innertext 屬性是乙個可讀可寫的屬性，它可以操作元素中包含的所有文字內容，包括子文件樹中的文字。在通過innertext讀取值時，它會按照由淺入深地順序，將子文件樹中的所有文字拼接起來。在通過innertext寫入值時，結果會刪除元素的所有子節點，插入包含相應文字值的文字節點

console.


log(document.


getelementbyid


('users'


).innertext)


;// 小a君 小b君
而當我們進行寫操作的時候，會直接將這個 element 中的所有子節點清除並新增乙個文字節點（可以採用element.innertext = ''來清空乙個元素），猜一下當我們執行下面這段**的時候會發生什麼：

let usersele = document.


getelementbyid


('users');


usersele.innertext = usersele.innertext;
（如果真的寫了這樣的**會被人打死的吧，咳咳～）

這個屬性和 innertext 的使用方法基本一致，textcontent 屬性與 innertext 屬性類似，該屬性可讀寫。在讀模式下，返回當前節點和它的所有後代節點的文字內容；在寫模式下，結果會刪除元素的所有子節點，插入包含相應文字值的文字節點

他們的主要區別在於 innertext 是 element 的屬性，而 textcontent 是 node 的屬性且 textcontent 不相容 ie9 以下瀏覽器

console.


log(document.


getelementbyid


('users'


).textcontent)


;// 小a君 小b君
在建立好節點並新增好內容之後我們應該將節點插入到他們的父節點中了，插入節點的方法也不止一種

insertbefore

使用方法：

let templi = document.


createelement


('li');


templi.innertext =


"小d君"


;document.


getelementbyid


('users').


(templi)


;
由於這個方法只能將節點新增到父節點的最後，所以在使用時需要注意順序方面的要求，通常的做法是先進行一定的排序後再呼叫這個方法

⚠️注意：如果要新增的節點已經存在在這個 document 中了，並不是新建立出來的 element，這時會發生的並不是單純的插入，而是「移動」



"users"


>


class


="user"


>


小a君li


>


class


="user"


>


小c君li


>


ul>


>


document.


getelementbyid


('users').


(    document.


getelementsbyclassname


('user')[


0])script


>
同樣地，如果插入的節點已經是文件的一部分了，那結果就是將該節點從原來的位置轉移到新位置

這個方法就更加適合 「小b君」 的插入

let templi = document.


createelement


('li');


templi.innertext =


"小b君"


;document.


getelementbyid


('users').


insertbefore


(  templi,


document.


getelementsbyclassname


('user')[


1]);
removechild 方法接收乙個引數，即要移除的節點，被移除的節點成為方法的返回值

let user0 = document.


getelementsbyclassname


('user')[


0];document.


getelementbyid


('users').


removechild


(user0)


;
remove 方法不太常見，直接在當前節點使用 remove() 方法就可以刪除該節點，無返回值

要實現和上面一樣的效果只需要

document.


getelementsbyclassname


('user')[


0].remove()


;
replacechild 接收的兩個引數是要插入的節點和要替換的節點，要替換的節點將由這個方法返回並從文件樹中移除，同時由要插入的節點佔據其位置

let templi = document.


createelement


('li');


templi.innertext =


"替換節點"


;document.


getelementbyid


('users').


replacechild


(  templi,


document.


getelementsbyclassname


('user')[


0]);
clonenode 方法用於轉殖乙個節點

呼叫者是要被複製的 node，返回值是這個 node 的副本

它接受乙個布林值作為引數，表示是否執行深複製。在引數為true時，執行深複製，也就是複製節點及整個子節點樹。在引數為false的情況下，執行淺複製，即複製節點本身

let dupusers = document.


getelementbyid


('users').


clonenode


(true);


console.


log(dupusers)


;
⚠️注意：由於不同版本規範中 clonenode 方法的預設引數不同，所以請一定加上引數

上述提到的所有問題，都可以通過 innerhtml 解決

這個方法和前文中提到的 innertext 很相似

我們可以在讀模式下獲取到我們要操作的 node 或者他的 父節點，之後通過字串處理方法進行操作，然後再寫入

但是我們一般不會這樣做

主要是因為它存在安全問題，innerhtml不會檢查**，直接執行，會有風險

所以innerhtml方法建議僅用於新的節點，比如建立插入，內容最好是可控的，而不是使用者填寫的內容

溫故知新 ROWTYPE

rowtype 相當於資料庫表裡的一行資料記錄的變數型別。declare 定義乙個emp表裡的一行記錄的資料型別的變數 v emp emp rowtype begin 查詢的emp表裡的資料列必須與v emp的列順序以及個數保持一致 select empno,ename,job,mgr,hireda...

vue 溫故知新

v cloak指令 解決變數閃爍問題 v if isshow 是插入或刪除節點 v show isshow 是隱藏或顯示節點 v bind data m msg 或 data m msg 繫結屬性 v bind key v.id 繫結乙個資料唯一值，用於虛擬dom演算法，優化渲染效率 v on cl...

溫故知新系列

我從事windows phone開發一年多來，終日忙於開發應用，每每有所收穫也沒有時間思考總結。最近實習即將結束，同時也看清了真實的生活，痛定思痛，決定好好整理自己所學所得，同時也靜下心來好好學習一下一直欠缺的知識。溫故而知新，可以為師矣。此番總結，不求為師，但求能看清自己，共勉共勉。此溫故知新系列...