紅寶書筆記 DOM0的小相關

2021-07-10 14:49:37 字數 1785 閱讀 5373

今天看dom。。。=  =。。不知道為什麼這兩天看書總是困乏。。。看一點就要看不下去了。。好睏。。=  =。。。效率有點低。。。所以吃完午飯之後半個小時就睡了一覺,起來還覺得困。。於是又出去吃了壽司=  =。。。。於是終於精神了。。。。迷之啟動方式

dom用於訪問html和xml。平常用於dom操作來動態改變頁面的內容。

恩。。可能是平常使用的dom操作有限。。所以對於其他的一些dom節點不是和感興趣。。所以也沒有記住。。

主要總結兩種dom節點:node,element

1.node

node是基本的節點型別。所有的dom節點都是繼承node型別。

node間有父子,鄰居的關係。通過xx.parentnode可以查詢到節點的父節點,通過xx.childnodes可以訪問到該節點的子節點。其中childnodes得到的是nodelist物件。這個物件相當於子節點的指標,所以可以動態追蹤節點的變化。nodelist類似array物件,可以通過下標或者item方法訪問元素,或者通過array.prototype.slice.call(xx,0)將nodelist物件轉換成陣列物件,方便操作。call(obj,arguments[0],arg[1]...)是將傳入的obj作為函式的this指標,arg是引數。這樣,array.prototype.slice的this指標就指向了nodelist,然後slice函式有(start,end)表示對物件的[start,end)進行切片,又傳入了0為引數,所以將nodejlist轉成了陣列,記得返回的物件才是轉化後的array物件。

用nextsibling或previossibling可以訪問到節點的前後兩個鄰居節點

2.element

element節點主要用來訪問節點的標籤名,id,類名等詳細屬性。

訪問屬性主要有兩種方式,一種是屬性訪問,一種是getattribute訪問。注意的是如果是自定義屬性,只能用getattribute方法訪問,用屬性訪問會返回undefined。。並且由於在style屬性和事件處理屬性上,兩種方式返回的物件不一樣。所以訪問一般屬性就用物件的屬性方法,訪問自定義屬性的時候採用getattribute方法.

關於設定屬性,新增自定義屬性的時候,直接指定屬性和值是不能真正新增的,一定要用setattribute方法來新增。

關於刪除屬性,使用removeattribute

dom0 和 dom2事件 簡略

dom級別 4級 dom0,dom1,dom2,dom3 dom事件 3級 dom0級事件 dom2級事件 dom3級事件 為什麼 沒有 dom1級事件?因為 dom1級 中 沒有定義 事件相關的 內容 dom0 通過 onclick 繫結事件 或者 input.nclick function on...

事件繫結 DOM0級事件繫結和DOM2級事件繫結

box.onclick function 元素.事件行為 函式 box.onclick function 相當於給乙個元素的屬性賦值,只能賦乙個值,後面如果再賦值就會覆蓋前面的值,所以說dom0級事件只可以繫結一次,如果繫結多次,後面的會把前面的給覆蓋了,因為是乙個賦值的過程,乙個屬性只能賦乙個值 ...

紅寶書筆記 關於innerHTML的一點坑

之前寫 幻燈片 外掛程式的時候,在滾動要改變幻燈片位置的時候,發現怎麼對元素設定style都無效。六臉懵逼0 0。之前做頭像外掛程式的時候也出現過這種問題。不過那個是偶發的。現在還不知道為什麼。於是一直以為是style的設定有誤。後來不可置信的發現是innerhtml的問題。在建立每個的導航的時候,...