querySelector()元素選擇器

功能： querySelector() 方法返回文檔中匹配指定 css 選擇器的第一個元素；如果你需要返回所有的元素，請用 querySelectorAll() 方法替代；

語法： document.querySelector(CSS selectors)；

參數(shù)值： String 必須。指定一個或多個匹配元素的 CSS 選擇器。使用它們的 id, 類, 類型, 屬性, 屬性值等來選取元素。

對于多個選擇器，使用逗號隔開，返回一個匹配的元素。

返回值: 匹配指定 CSS 選擇器的第一個元素。如果沒有找到，返回 null。如果指定了非法選擇器則拋出 SYNTAX_ERR 異常。

<div class="box">第1行</div>
<div class="box">第2行</div>
<div class="box">第3行</div>

<script>
    let box = document.querySelector(".box");
    box.style.color = "red";
    console.log(box);

    let boxes = document.querySelectorAll(".box");
    console.log(boxes);
    for(let i = 0; i < boxes.length; i++)
        console.log(boxes[i]);
</script>

querySelector和getElement(s)Byxxx區(qū)別

getElement(s)Byxxxx 獲取的是動態(tài)集合，querySelector 獲取的是靜態(tài)集合。

動態(tài)就是選出的元素會隨文檔改變，靜態(tài)不會隨文檔改變，取出來之后就和文檔的改變無關了。

<ul id="wrap">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

<script>
    let wrap = document.getElementById("wrap");

    let li = document.getElementsByTagName("li");

    for(let i = 0; i < 10; i++){
        let newli = document.createElement("li");
        newli.innerhtml = "item" + i;
        wrap.AppendChild(newli);
    }

    console.log(li.length);
</script>

控制臺輸出13。

// let li = document.getElementsByTagName("li");
let li = document.querySelectorAll("li");

控制臺輸出3。

window.onload方法

window.onload() 方法用于在網頁加載完畢后立刻執(zhí)行的操作，即當 HTML 文檔加載完畢后，立刻執(zhí)行某個方法。

window.onload() 通常用于 <body> 元素，在頁面完全載入后（包括圖片、css文件等等）執(zhí)行腳本代碼。

因為 JAVAScript 中的函數(shù)方法需要在 HTML 文檔渲染完成后才可以使用，如果沒有渲染完成，此時的 DOM 樹是不完整的，這樣在調用一些 JavaScript 代碼時就可能報出"undefined"錯誤。

<a href="https://noi.hioier.com/" target="_blank">https://noi.hioier.com/</a>

<script>
    window.onload = function(){
        let obj = document.querySelector("a[target]");
        console.log(obj);

        obj.style.color = "red";
    }
</script>

鍵盤事件

鍵盤事件就是按下、抬起按鍵所觸發(fā)的事件，區(qū)分不同按鍵使用鍵碼值，即ASCII值。

window.onload = function(){
	let input = document.getElementById("txt");
	input.onkeyup = function(e) {
		let keyCode = e.keyCode;
		if (keyCode >= 48 && keyCode <= 57) {
			alert("啦啦，你按下的是數(shù)字鍵！");
		} else {
			alert("哈哈，你沒有按下數(shù)字鍵哦！")
		}
	}
}

addEventListener事件監(jiān)聽

常見的觸發(fā)函數(shù)有：

鼠標

click：鼠標左鍵點擊
dblclick：鼠標左鍵雙擊
contextmenu：鼠標右鍵點擊
mousedown：鼠標按下，包括左鍵、滾輪、右鍵
event.button：0表示左鍵，1表示中鍵，2表示右鍵
mouseup：鼠標彈起，包括左鍵、滾輪、右鍵
event.button：0表示左鍵，1表示中鍵，2表示右鍵

鍵盤

keydown：某個鍵是否被按住，事件會連續(xù)觸發(fā)
keyup：某個按鍵是否被釋放
keypress：緊跟在keydown事件后觸發(fā)，只有按下字符鍵時觸發(fā)。適用于判定用戶輸入的字符。
event.altKey、event.ctrlKey、event.shiftKey分別表示是否同時按下了alt、ctrl、shift鍵。

表單

focus：聚焦某個元素
blur：取消聚焦某個元素
change：某個元素的內容發(fā)生了改變

窗口：需要作用到window元素上。

resize：當窗口大小發(fā)生變化
scroll：滾動指定的元素
load：當元素被加載完成

window.addEventListener("keydown", function(e){
	let keyCode = e.keyCode;
	if (keyCode >= 48 && keyCode <= 57) {
		alert("啦啦，你按下的是數(shù)字鍵！");
	} else {
		alert("哈哈，你沒有按下數(shù)字鍵哦！")
	}
});