JavaScript-DOM操作

核心知識點

1. className操作標簽樣式
2. style屬性方式操作標簽樣式
3. 操作表單控件

學習目標

1. 能夠通過className方式給標簽設置樣式
2. 能夠通過style方式給標簽設置樣式
3. 能夠獲取表單控件中的值

操作元素樣式

語法：1.dom.className = '類名';2.dom.style.屬性 = 值;
備注：1.通過style屬性方式設置背景色 backgroundColor

課堂案例

• 立體動畫效果【課堂】
• 隔行變色【案例】

H5中新增的方式：Dom.classList.add()       添加類名Dom.classList.remove()    移除類名Dom.classList.toggle()    切換類名Dom.classList.contains()  是否包含案例：1. 使用className方式實現tab欄切換2. 使用classListf方式實現tab欄切換

操作表單屬性

• value屬性【購物車案例】

  1. 獲取表單控件中的值
<input type = 'text' value = '123'>
<script type="text/javascript">var input = document.querySelector('input');alert(input.value);
</script>2. 設置表單控件的值
<script type="text/javascript">var input = document.querySelector('input');input.value = '值';
</script>

• disabled屬性 readOnly屬性【同意完成注冊案例】

  1. 獲取當前控件是否被禁用
dom.disabled  --> 如果返回false，代表沒有被禁用，否則被禁用
dom.readOnly  --> 如果返回false，代表沒有被禁用，否則被禁用2. 設置控件是否禁用
dom.disabled = true | false;
dom.readOnly = true | false;

• checked屬性

  1. 獲取控件是否被選中
dom.checked   ---> true （選中）   | false  (未選中)2. 設置控件是否被選中
dom.checked = true | false;

• selected屬性

  1. 獲取下拉列表是否被選中
dom.selected  ---> true (選中)  | false (未選中)2. 設置控件是否被選中dom.selected  = true (選中) | false (未選中)
備注：1. 下拉列表默認是從第一項開始顯示的，默認第一項是被選中的狀態

課堂案例

• 購物車全選案例反選案例【課堂】

文本框事件

• onfocus 獲取焦點

dom.onfocus  ---> 獲取焦點時候觸發事件

• onblur 失去焦點

dom.onblur    ---> 失去焦點觸發事件

鼠標事件

• onmouseenter 鼠標進入事件【沒有事件冒泡】

dom.onmouseenter = function() {}

• onmouseleave 鼠標離開事件

dom.onmouseleave = function() {}
備注：
onmouseenter 和 onmouseleave 是對應的一組

• onmouseover 鼠標放到標簽之上【會有事件冒泡，少用】

dom.onmouseover = function() {}

• onmouseout 鼠標離開

dom.onmouseout = function() {}

• 多個標簽注冊事件，獲取索引方式

實現的功能：用戶點擊（鼠標懸停）到標簽上，獲取該標簽對應的索引方式：1. 通過給標簽（對象）動態添加一個表示索引的屬性，并賦值2. 通過代碼獲取該索引值即可

課堂案例

• 隔行變色鼠標移動高亮顯示案例【課堂】
• tab欄切換案例【課堂】

標簽屬性操作方式

• 系統屬性

? 獲取屬性的值：dom.getAttribute(屬性名)；備注：1. 通過getAttribute可以獲取標簽屬性對應的值2. 如果標簽沒有對應的屬性，那么getAttribute返回null
? 設置dom.setAttribute(屬性名,值);備注：1.通過setAttribute可以給標簽添加新的屬性2.如果該標簽已經存在某個屬性，是對該屬性值得修改
? 刪除dom.removeAttribute(屬性名)；備注：1. 通過removeAttribute可以將屬性移除  	

• 自定義屬性

概念：以  data-* 開始的屬性，為自定義屬性作用：  保存數據(處理業務中的數據)? 獲取dom.dataset     --->  返回自定義屬性的對象【該屬性只能獲取自定義屬性】    dom.dataset.屬性名稱  dom.dataset["屬性名稱"]
? 設置Dom.dataset.自定義屬性名稱=值;
備注：getAttribute()也可以用來獲取自定義屬性

課堂案例

• 利用自定義屬性實現tab欄切換效果【課堂】