javascript querySelector选择器和addEventListener事件监听 _javascript

querySelector()元素选择器功能： querySelector() 方法返回文档中匹配指定 css 选择器的第一个元素；如果你需要返回所有的元素，请用 querySelectorAll() 方法替代；

文章插图

语法： document.querySelector(CSS selectors)；
参数值： String 必须。指定一个或多个匹配元素的 CSS 选择器。使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。
【javascript querySelector选择器和addEventListener事件监听】对于多个选择器，使用逗号隔开，返回一个匹配的元素。
返回值: 匹配指定 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区别getElement(s)Byxxxx 获取的是动态集合，querySelector 获取的是静态集合。
动态就是选出的元素会随文档改变，静态不会随文档改变，取出来之后就和文档的改变无关了。

<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() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。
window.onload() 通常用于 <body> 元素，在页面完全载入后（包括图片、css文件等等）执行脚本代码。
因为 JAVAScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。

<a href=https://www.isolves.com/it/cxkf/yy/CSS2/2023-02-22/"https://noi.hioier.com/" target="_blank">https://noi.hioier.com/

文章插图

键盘事件键盘事件就是按下、抬起按键所触发的事件，区分不同按键使用键码值，即ASCII值。

文章插图

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

addEventListener事件监听常见的触发函数有：
鼠标