wapApi節點操作

2021-10-05 19:00:12 字數 2115 閱讀 2982

//childnodes:獲取所有的孩子節點(包括了元素節點和其他很多態別的節點)

//children:獲取所有的子元素(用途很廣泛)

//firstchild //第乙個子節點

//firstelementchild //第乙個子元素

//lastchild //最後乙個節點

//lastelementchild //最後乙個子元素

//1. nextsibling:下乙個兄弟節點

//2. nextelementsibling:下乙個兄弟元素

//3. previoussibling//上乙個兄弟節點

//4. previouselementsibling //上乙個兄弟元素

//1. parentnode:父節點
【案例:隔行變色】

【案例:表單校驗】

1. onkeydown: 當鍵盤按下時觸發的事件

2. onkeyup: 鍵盤彈起時觸發的事件

parent: 呼叫者,父節點來呼叫

child:需要新增的那個孩子。

作用:把child新增到parent的孩子的最後面。

如果新增的是頁面中本來就存在的元素,是乙個剪下的效果,原來的就不在了。

var demo = document.

getelementbyid

("demo");

var box = document.

getelementbyid

("box");

box.

(demo)

;

語法:parent.insertbefore(child, refchild);

parent:必須要父節點來呼叫

child:需要新增的那個節點

refchild:新增到哪乙個節點的前面。

var ul = document.

getelementbyid

("list");

var li = document.

createelement

("li");

li.innerhtml =

"驥驥"

;//就是新增到子節點的最前面。

ul.insertbefore

(li, ul.children[0]

);

語法:var newnode = node.clonenode(deep)

功能:在記憶體中轉殖乙份節點

引數:deep

轉殖出來的節點跟原來的節點沒有關係了,修改了也不會相互影響。

如果轉殖的節點帶了id,我們需要給id重新設定乙個值,不讓id衝突

語法:parent.removechild(child);

功能:由父盒子呼叫,刪除裡面的乙個子元素。

【案例:祝願牆】 — ondblclick:雙擊的時候觸發

可以生成新的節點,但是不推薦使用。如果頁面已經載入完成了,你還是用document.write寫內容的話,會把之前的頁面給覆蓋掉

原理:頁面從上往下載入的時候,會開啟乙個文件流,當頁面載入完,文件流就會關閉。

document.write的本意就是在文件流上寫入內容。如果頁面沒載入完成,文件流還是開著的,document.write直接在這個文件流上寫東西

如果頁面載入完成了,還是用document.write寫東西,會重新開啟乙個新的文件流,往新的文件流上寫東西,舊的文件流就被新的文件流覆蓋了。

innerhtml也可以建立節點

innerhtml建立節點的時候有乙個特點,如果原來有內容的話,使用innerhtml會把原先的內容給乾掉。

慎用:很容易出現效能效率問題。

語法:var element = document.createelement(「tagname」);

作用:在記憶體裡面建立了乙個節點

返回:乙個元素。 用途非常的廣泛。

【案例:微博發布】

節點和節點操作

節點 一般的,節點擁有nodetype 節點型別 nodename 節點名稱 和nodevalue 節點值 這三個基本屬性.頁面中所有元素都是節點 元素節點 nodetype 為1 屬性節點 nodetype 為2 文字節點 nodetype 為3 文字節點包括文字.空格.換行等 利用dom樹可以把...

查詢節點 操作節點 刪除節點

insertbefore 在指定的已有子節點之前插入新的子節點 ul.insertbefore linew,li2 replacechild 該方法用新節點替換某個子節點 兩個引數 replacechild 要插入的節點,被替換的節點 返回被替換的節點 document.body.newnode v...

DOM節點操作

節點型別 nodetype nodename nodevalue 含義element node 1標籤名 eg div null 元素節點 attribute node 2特性名 eg class 特性值特性節點 text node 3 text 文字的內容 文字節點 cdata section n...