文章目錄
- 1.DOM概述
- 2.獲取元素
- 2.1.document.getElementBy...()
- 2.2.document.querySelector...()
- 3.操縱元素：函式
- 3.1.移除
- 3.2.為元素添加事件監聽器
- 4.操縱元素：屬性
- 4.1.子元素相關屬性
- 4.2.標簽內容相關屬性
- 4.3.類名相關屬性
- 4.4.css樣式屬性
1.DOM概述
2.獲取元素
2.1.document.getElementBy…()
使用該方式獲取標簽元素，會獲取到符合條件的所有標簽
- 由id獲取的方法得到的是唯一的
- 由className、tagName獲取的是陣列
document.getElementById("id");
documtnt.getElementByClassName("className");
documtnt.getElementByTagName("tagName");
2.2.document.querySelector…()
該方法的引數形式與css中選擇器類似：
- 標簽選擇器：無
- 類名選擇器："."
- id選擇器："#"
document.querySelector("input"); //獲取第一個input標簽
document.querySelectorAll("input"); //獲取所有input標簽
3.操縱元素：函式
3.1.移除
| 函式簽名 | 作用 |
|---|---|
| remove() | 移除元素 |
3.2.為元素添加事件監聽器
| 函式簽名 | 作用 |
|---|---|
| addEventListener(eventType, function) | 添加事件監聽器 |
- eventType是事件型別，如"click"則為單擊事件
- function是函式（沒錯傳入一個函式作為它的引數）
詳細內容請見下一篇文章，這里只做簡單演示：
4.操縱元素：屬性
4.1.子元素相關屬性
| 標簽屬性 | 釋義 |
|---|---|
| firstElementChild | 第一個子元素 |
| lastElementChild | 最后一個子元素 |
| children | 所有子元素(陣列) |
4.2.標簽內容相關屬性
| 標簽屬性 | 釋義 |
|---|---|
| textContent | 標簽內容 |
| innerText | 標簽內容 |
| innerHTML | 標簽內容 |
三者的區別詳見文章 innerHTML、innerText和textContent之間的區別
4.3.類名相關屬性
| 標簽屬性 | 釋義 |
|---|---|
| classList | class串列 |
| className | class名 |
上述是和class有關的屬性，通常直接用className就能實作大部分功能：
如果有多個類名，則用classList屬性去獲取指定的類名，之后便可以用className屬性進行操作，
4.4.css樣式屬性
| 標簽屬性 | 釋義 |
|---|---|
| style | css樣式表 |
呼叫style.backgroundColor就可以修改背景色，其他的也是類似：
雖然一般情況下，樣式應使用css定義
但使用js則可以實作"觸發事件后改變樣式"
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/303600.html
標籤：其他
上一篇：Vue實作商品放大鏡效果
下一篇：JavaScript 防抖和節流