JavaScript 基礎(七)【DOM】

元素與節點

當網頁被加載時,瀏覽器會創建頁面的文檔對象模型(Document Object Model)。
Js通過操作dom來控制頁面
Js操作的不只是元素,還包括元素的屬性、內容、元素外的文本等等,所以Js的dom對象對頁面進行了更詳細的劃分,稱爲節點。

在 HTML DOM (文檔對象模型)中,每個部分都是節點:

  • 文檔本身是文檔節點
  • 所有 HTML 元素是元素節點
  • 所有 HTML 屬性是屬性節點
  • HTML 元素內的文本是文本節點 (包括回車符也是屬於文本節點)
  • 註釋是註釋節點

元素是節點的一種,節點包括了元素

Js通過控制節點來對html做各種改變

  1. 改變頁面中的所有 HTML 元素
  2. 改變頁面中的所有 HTML 屬性
  3. 改變頁面中的所有 CSS 樣式
  4. 對頁面中的所有事件做出反應

輸出

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驅動
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章