劍指前端(前端入門筆記系列) DOM(元素節點)

2022-05-29 02:36:12 字數 1589 閱讀 9681

dom(元素節點)

新增乙個元素節點分為兩步(二者缺一不可),第一步:建立元素節點,第二步:將建立的元素節點插入到指定元素節點中(也就是插入指定元素節點的兒子元素節點)

原本存在的

刪除元素節點有兩種方式:

p1

p2span1

span2

span3

p1

p2span1

span2

span3

這種方式聽起來有種多此一舉的感覺,因為既然已經選擇到了要刪除的元素節點,為什麼不通過上面介紹的方法直接刪除,而是又去找了父元素節點,所以說,如果沒有特殊需求,大多數情況下還是直接使用元素節點.remove()方法來實現元素節點的刪除。

修改元素節點的操作也不常用,實用性較低,測試如下:

p1

p2

網頁的結構改變:

控制台的列印資訊

可以看到outerhtml是包含了整個元素節點的資訊

查(選擇器)

基本選擇器

div_id_1

div_id_2

div_id_2

div_class_1

dic_class_2

dic_class_2

span1

span2

es5新增了方法queryselector()和queryselectorall(),可以用css選擇器來做為引數傳入,兩者搭配可以實現以上所有方法,所以是現在選擇器的首選方法。

msg_span

box_1

box_2

box_3

cont_1

cont_2

cont_3

span_1

span_2

span_3

關係選擇器

總結(1)元素節點作為操作頁面最常用的節點,又可以通過html語言中的標籤名以及標籤的屬性名id、class以及name來獲取

(2)元素節點的獲取方法在es5中新增了queryselector()和queryselectorall()方法,這兩個方法用css選擇器來做為引數,兩者搭配可以獲取到所有元素節點,是獲取元素節點的首選方法。

(3)元素節點的新增需要先建立再插入。

(4)元素節點的刪除用remove()方法最方便。

(5)元素節點的修改操作存在,但是不常用。

前端入門心得筆記

今天了解了在前端開發中,html,css與js所扮演的角色,以前只是知道要寫前端需要用到這一些語言,今天看文章的時候看到了一句很適合的形容,叫做,html是名詞,css是形容詞,js為動詞。html可以寫出網頁中的大致框架,需要css來新增樣式,美化框架,js則可以用來做一些動態效果,當然後期還有一...

前端小白入門區塊鏈系列04

先解釋下 前端小白入門區塊鏈系列03的 pragma solidity 0.4.22 宣告solidity語言以及版本是0.4.22 contract ballot 傳送幣 ads 傳送的位址,coin 傳送幣的數量 function sendcoin address ads,uint coin p...

微信小程式筆記 前端(個人筆記系列)

注 個人筆記就是沒有大綱 沒有目錄 沒有結構,純屬本人筆記用。使用時獲得promise例項,promise.then function res 可以用for let i in object 來遍歷陣列,其中i是鍵,但是不能在迴圈中使用object.i訪問值。array.foreach functio...