元素與節點
當網頁被加載時,瀏覽器會創建頁面的文檔對象模型(Document Object Model)。
Js通過操作dom來控制頁面
Js操作的不只是元素,還包括元素的屬性、內容、元素外的文本等等,所以Js的dom對象對頁面進行了更詳細的劃分,稱爲節點。
在 HTML DOM (文檔對象模型)中,每個部分都是節點:
- 文檔本身是文檔節點
- 所有 HTML 元素是元素節點
- 所有 HTML 屬性是屬性節點
- HTML 元素內的文本是文本節點 (包括回車符也是屬於文本節點)
- 註釋是註釋節點
元素是節點的一種,節點包括了元素
Js通過控制節點來對html做各種改變
- 改變頁面中的所有 HTML 元素
- 改變頁面中的所有 HTML 屬性
- 改變頁面中的所有 CSS 樣式
- 對頁面中的所有事件做出反應
輸出
document.write()
在文檔加載完成後使用會覆蓋原文檔內容
改變元素
獲取元素
document.getElementById() //獲取id
document.getElementByClassName() //獲取class
document.getElementByTagName() //獲取標籤名
document.getElementByName() //獲取屬性
document.querySelector() //返回匹配指定選擇器的第一個元素
document.querySelectorAll() //返回匹配指定選擇器的所有元素
id和querySelector 獲取的是單個元素,其它獲取的是元素集合
元素集合類似數組但不是數組,無法使用數組方法 valueOf,push等
改變內容
innerHTML();
innerText();
改變屬性
title,className,src 等
改變樣式
Element.style.property = " "
增刪元素
創建元素 createElement()
創建文本節點 createTextNode()
向元素末尾添加元素或節點 appendChild()
向元素開始添加元素或節點 insertBefore()
移除已存在的元素 removeChild (需要知道該元素的父元素)
替換元素 replaceChild(新元素,舊元素) (也需要知道父元素)
注:創建的元素只能使用一次,添加到文檔之後就不能再次添加,必須重新創建
增刪改流程說明
響應事件
瀏覽器事件:加載完成onload,頁面卸載 onunload 等
用戶操作: 鼠標事件,鍵盤事件等
添加事件的三種方式
(1)在元素中添加onclick屬性,
(2)在js中獲取元素然後添加onclick,
(3)添加事件監聽addeventlistener
事件彙總
鼠標事件
onclick 單擊事件
ondblclick 雙擊事件
oncontextmenu 右鍵事件
onmouseover / onmouseenter 鼠標滑過
onmouseout/onmouseleave 鼠標離開
onmousedown 鼠標按下
onmouseup 鼠標鬆開
onmousemove 鼠標移動
表單事件
onfocus 獲取焦點
onblur 失去焦點
onchange 表單改變
onselected 選中事件
oninput 正在輸入事件
onsubmit 表單提交
onreset 表單重置
提交和重置需要元素form驅動