普歌 智音團隊 DOM 入門基礎

2021-10-08 07:10:23 字數 2962 閱讀 9131

一.什麼是dom?

二.dom之獲取頁面元素

1.getelementbyid(id)        //獲取指定元素的id元素

2.getelementsbytagname() //獲取相同元素的節點列表,通過標籤名選擇元素,返回值是乙個陣列

3.getelementsbyname() //通過name值獲取元素,返回值是陣列,通常用來獲取有name的input的值

4.getelementsbyclassname() //通過class名獲取元素,返回值是陣列n

注意:1.不是所有標籤都有name值;2.在低版本的瀏覽器中,getelementsbyname和getelementsbyclassname有相容性

**示例:

三.dom之操作元素的屬性

1.事件三要素:事件源;事件型別;事件處理程式

2.dom屬性的基本操作(增/刪/改/查)

3.tagname //返回值是當前元素的標籤名

innerhtml/innertext  //返回值是當前元素的內容

id //返回值是當前元素的id

title //獲取title的標籤值,這個title是從document中獲取的

classname //返回值是當前元素的class

href //返回值是當前的href的值

getattribute() //獲取 元素的屬性

setattribute() //設定/修改 元素的屬性,低版本的ie不相容;接收兩個引數,屬性名和屬性值

removeattribute() //刪除 元素的屬性,低版本的ie不相容

**示例:

事件的三要素

innertext和innerhtml區別 inneerhtml識別html標籤 可以保留空格和換行

四.操作dom節點

根據dom規定,html文件中的每個成分都是乙個節點。

dom是這樣規定的:

整個文件是乙個文件節點

每個html標籤是乙個元素節點

包含在html元素中的文字是文字節點

每乙個html屬性是乙個屬性節點

注釋屬於注釋節點

2.獲取dom節點

物件.parentnode               //獲得父元素節點

物件.children //獲得子元素節點的集合,不包含空白節點

物件.childnodes //獲得所有子節點的集合,包括空白節點

物件.childnodes //獲取當前元素節點的所有子節點

物件.ownerdocument //獲取該節點的文件根節點,相當與 document

物件.firstchild //獲得第乙個子節點。(ie7/8非空白節點,可能是注釋節點)

物件.firstelementchild //獲得第乙個非空白的子節點。(ie7/8不支援)

物件.lastchild //獲得最後乙個子節點(ie7最後乙個元素節點,ie8最後乙個非空白節點,可能是注釋節點)

物件.lastelementchild //獲得最後乙個非空白的子節點。(ie7/8不支援)

物件.nextsibling //獲得下乙個兄弟節點。(包含空白節點和注釋,ie7/8包括注釋節點,不包括空白節點)

物件.nextelementsibling //獲得下個兄弟節點。(ie7/8不支援)

物件.previoussibling //獲得上乙個兄弟節點。(包含空白節點和注釋。ie7/8包括注釋節點,不包括空白節點)

**示例:

父節點

建立節點

三種建立元素的區別

五.給元素註冊事件

註冊事件的兩種方式:①:傳統註冊方式 特點:利用on開頭的事件onclick 具有唯一性;

②:方法監聽註冊方式 addeventlistener()

六.建立物件

普歌 飛靈團隊 ES9

先讚後看,養成習慣 rest 引數與 spread 擴充套件運算子在 es6 中已經引入,不過 es6 中只針對於陣列,在 es9 中為物件提供了像陣列一樣的 rest 引數和擴充套件運算子 rest 引數 物件合併 const skillone const skilltwo const skill...

普歌 飛靈團隊 Ajax基礎symbol

symbol特點 symbol 的值是唯一的,用來 解決命名衝突的問題 值不能與其他資料進行運算 symbol 定義 的 物件屬 性 不能 使 用 for in 循 環遍 歷 但 是可 以 使 用 reflect.ownkeys 來獲取物件的所有鍵名 建立symbol let s1 symbol c...

普歌 飛靈團隊 Ajax基礎class

知識點 class 宣告類 constructor 定義建構函式初始化 extends 繼承父類 super 呼叫父級構造方法 static 定義靜態方法和屬性 父類方法可以重寫 父類 class phone 物件方法 call 子類 class smartphone extends phone 子...