原生js得到八種方式,事件操做

08.17自我總結

關於js

一.原生js得到八種方式

• 經過ID獲取（getElementById）
• 經過name屬性（getElementsByName）
• 經過標籤名（getElementsByTagName）
• 經過類名（getElementsByClassName）
• 經過選擇器獲取一個元素（querySelector）
• 經過選擇器獲取一組元素（querySelectorAll）
• 獲取html的方法（document.documentElement）
• document.documentElement是專門獲取html這個標籤的
• 獲取body的方法（document.body）
• document.body是專門獲取body這個標籤的

二.事件句柄

屬性	當如下狀況發生時，出現此事件
onabort	圖像加載被中斷
onblur	元素失去焦點
onchange	用戶改變域的內容
onclick	鼠標點擊某個對象
ondblclick	鼠標雙擊某個對象
onerror	當加載文檔或圖像時發生某個錯誤
onfocus	元素得到焦點
onkeydown	某個鍵盤的鍵被按下
onkeypress	某個鍵盤的鍵被按下或按住
onkeyup	某個鍵盤的鍵被鬆開
onload	某個頁面或圖像被完成加載
onmousedown	某個鼠標按鍵被按下
onmousemove	鼠標被移動
onmouseout	鼠標從某元素移開
onmouseover	鼠標被移到某元素之上
onmouseup	某個鼠標按鍵被鬆開
onreset	重置按鈕被點擊
onresize	窗口或框架被調整尺寸
onselect	文本被選定
onsubmit	提交按鈕被點擊
onunload	用戶退出頁面

三.使用方法

1.獲取單個元素

2.單個元素髮送的事件

3.發生的內容相關替換

let inp = document.querySelector('input');

inp.onkeydown = function () {
    console.log('按下')
};

四.提取元素裏面的內容

• innerHTML:獲取文本包括標籤

• innerText:獲取文本不包括標籤

• val:獲取表單裏面的值

五.補充知識點

獲取操做父標籤修改子標籤

好比說咱們點擊a類修改下面的b類

let xx = document.querySelector('.a');
xx.onclick = function () {
    this.querySelector('.b').innerHTML='點擊a了;
};

querySelectorAll獲取一組元素後咱們怎麼把其中的內容取出來

let xx = document.querySelectorAll('.a');
for (let i = 0; i < xx.length; i++){
    console.log(xx[i]);
}