获取ZY↑↑方打开链接↑↑
DOM事件和DOM选择器
DOM事件
DOM事件是指当网页中的某个元素发生特定的事件时所触发的行为或函数。这些事件可以是用户交互事件，如点击、鼠标移动、键盘输入等，也可以是浏览器事件，如页面加载、文档准备就绪等。
事件类型
- 用户交互事件：这类事件通常由用户的操作触发，如点击（click）、双击（dblclick）、鼠标移动（mousemove）、键盘输入（keydown、keyup）等。
- 浏览器事件：这类事件与浏览器的行为或状态相关，如页面加载完成（load）、文档准备就绪（DOMContentLoaded）、窗口大小调整（resize）等。
事件处理程序
事件处理程序是当事件发生时执行的函数或方法。在JavaScript中，可以通过多种方式将事件处理程序与DOM元素相关联：
- HTML属性：直接在HTML标签中使用事件属性（如onclick）来指定事件处理程序。
- DOM属性：通过JavaScript访问DOM元素的属性来设置事件处理程序，如
element.onclick = function() {...}。 - addEventListener方法：使用
addEventListener方法为DOM元素添加事件监听器，可以指定事件类型、事件处理程序以及是否捕获事件。这种方法更加灵活，可以添加多个事件处理程序，并且可以通过removeEventListener方法移除。
事件触发机制
当事件发生时，浏览器会创建事件对象，并触发与事件相关联的事件处理程序。事件对象包含了事件的相关信息，如事件类型、触发事件的元素、鼠标位置等。事件处理程序可以访问这些信息，并根据需要执行相应的操作。
DOM选择器
DOM选择器用于快速定位网页中的DOM元素，以便对其进行操作。在原生JavaScript中，提供了多种选择器来查找DOM元素。
常用选择器
- getElementById：通过元素的ID属性查找元素。ID在文档中应该是唯一的，因此这种方法通常用于查找单个元素。
- getElementsByClassName：通过元素的class属性查找元素集合。由于class属性不是唯一的，因此返回的是一个元素集合（HTMLCollection）。
- getElementsByTagName：通过元素的标签名查找元素集合。同样返回的是一个元素集合。
- getElementsByName：通过元素的name属性查找元素集合。name属性通常用于表单元素，因此这种方法常用于查找表单控件。
- querySelector：返回匹配指定CSS选择器的第一个元素。这是一个非常强大的选择器，支持各种CSS选择器语法。
- querySelectorAll：返回匹配指定CSS选择器的所有元素的集合（NodeList）。与
querySelector类似，它也支持各种CSS选择器语法。
选择器使用示例
Javascript
// 使用getElementById查找元素var elementById = document.getElementById("myId");// 使用getElementsByClassName查找元素集合var elementsByClassName = document.getElementsByClassName("myClass");// 使用getElementsByTagName查找元素集合var elementsByTagName = document.getElementsByTagName("div");// 使用getElementsByName查找元素集合（通常用于表单元素）var elementsByName = document.getElementsByName("myFormElement");// 使用querySelector查找第一个匹配的元素var firstMatchedElement = document.querySelector(".myClass #myId");// 使用querySelectorAll查找所有匹配的元素var allMatchedElements = document.querySelectorAll(".myClass, #myId");
DOM事件和DOM选择器是Web开发中非常重要的概念，它们使得开发者能够轻松地与网页中的元素进行交互和操作。通过合理使用这些技术，可以创建出丰富、动态和交互性强的Web应用。
