JavaScript(三)Dom查找、設置標籤屬性及內容、綁定事件

本章內容

1、介紹

2、dom之查找標籤

1. id查找
2. 標籤名查找
3. 類名查找
4. 複合查找

3、dom之設置標籤的內容及屬性

1. 設置標籤的樣式
2. 設置標籤的內容 （innnerHTML）
3. 設置class（className）
4. 設置標籤公用屬性值（ele.attributename）
5. 設置標籤全部屬性值（Attribute）

4、dom之綁定事件

1. 介紹
2. onload
3. onclick
4. onmouseover
5. onmouseout
6. onfouce
7. onblur
8. onkeydow
9. onkeypress
10. onkeyup
11. keycode

 

 1、介紹

• dom便是Html的一個編程接口
• 須要把dom編碼寫在<script>標籤內
• 經過獲取dom來進行對標籤的屬性、樣式、內容進行設置

2、dom之查找

一、Id查找

• 語法：dcument.getElementById('id')
• 返回值：dom對象
• *當沒有id不存在時返回null
• *存在兩個或多個同名的id值取第一個id

二、標籤查找

• 語法：documnet.getElementsByTagName('tag')
• 返回值：一個對全部tag標籤引用的dom對象的集合

三、類查找

• 語法：documnet.getElementsByClassName('classname')
• 返回值：一個對擁有classname屬性引用的dom對象的集合

四、複合超找

• 某一個dom對象（是一個對象不是數組），再次進行dom超找。
• 如:document.getElementById('id').getElementsByTagName('li')

3、dom之設置標籤的內容及屬性

一、設置標籤的樣式

語法：ele.style.styleName=styleValue

做用：ele的樣式

*以前css中的樣式屬性名‘-’如今都要用駝峯形式來命名

二、設置標籤的內容 （innnerHTML）

語法：ele.innerHTML=value

做用：設置ele的內容，內容能夠是一個html

語法 ret=ele.innerHTML

做用獲取ele的內容

返回值：ele開始和結束標籤之間的html

三、設置class（className）

語法：ele.className=value

功能：重寫class值設置成value

*以前class的值會被覆蓋

語法：ret=ele.className

做用：獲取ele的class值

返回值：ele的class值

四、設置標籤公用屬性值（ele.attributename）

五、設置標籤全部屬性值（Attribute）