9. DOM操作

DOM操作:

操作HTML文档元素，修改样式、内容和属性等

DOM获取元素的一些常用方法及其返回结果的表格：

方法	参数	描述	返回结果
document.getElementById	id	根据元素id获取元素节点	单个元素节点
document.getElementsByClassName	class	根据class名获取元素节点列表	元素节点列表
document.getElementsByTagName	tagname	根据标签名获取元素节点列表	元素节点列表
document.querySelector	selector	根据选择器获取第一个匹配的元素节点	单个元素节点
document.querySelectorAll	selector	根据选择器获取所有匹配的元素节点列表	元素节点列表

DOM元素监听式绑定/解绑的表格：

方法	参数	描述
addEventListener	type, listener, useCapture	在元素上注册指定的事件类型，并在触发该事件时执行指定的函数。
removeEventListener	type, listener, useCapture	在元素上移除已注册的指定事件类型的事件监听函数。
addEventListener (type/事件类型)	事件类型，如“click”	绑定的事件类型
addEventListener (type,listener/事件处理函数)	事件处理函数，当触发指定类型的事件时，以事件对象作为参数调用该函数。	绑定的事件处理函数
addEventLietener(type,listener,true or flse冒泡或捕获)	布尔值参数，指定事件是在冒泡或捕获阶段内处理。	指定事件运行算法

DOM事件类型和对应的触发时机：

事件类型	触发时机
click	鼠标点击事件
mouseover	鼠标悬停事件
mouseout	鼠标移出事件
mousedown	鼠标按下事件
mouseup	鼠标松开事件
dblclick	鼠标双击事件
keydown	按键按下事件
keyup	按键松开事件
keypress	按键按下并松开事件
focus	获取焦点事件
blur	失去焦点事件
change	输入内容改变事件
submit	提交表单事件
reset	重置表单事件
load	网页加载完成事件
unload	离开网页事件
resize	浏览器窗口大小改变事件
scroll	页面滑动事件
contextmenu	鼠标右击事件

event事件对象的一些常见属性和方法：

属性/方法	描述
type	获取事件的类型，例如 “click”、“keydown” 等。
target	获取触发事件的目标元素。
currentTarget	获取当前事件处理程序绑定的元素，即事件处理函数内部的 this。
preventDefault()	阻止默认行为，例如在点击链接时取消跳转、在提交表单时取消提交等。
stopPropagation()	阻止事件冒泡，从而防止事件传递到祖先元素中。
stopImmediatePropagation()	阻止事件冒泡，并取消未被执行的事件处理函数。
clientX、clientY	获取事件发生时鼠标在页面中的坐标。
pageX、pageY	获取事件发生时鼠标在文档中的坐标。
button	获取鼠标按键的状态，例如 0 表示左键，1 表示中键，2 表示右键。
which	获取鼠标按键的键码，例如 1 表示左键，2 表示中键，3 表示右键。
key	获取按下的键位字符，例如 “a”、“b”、“1”、“Esc” 等。
keyCode、which	获取按下的键位的键码，例如 13 表示回车键，27 表示 Esc 键。
classList.contains()	检查被点击的元素是否具有类名为()的元素,返回布尔值
shiftKey、ctrlKey、altKey、metaKey	获取是否按下了 Shift、Ctrl、Alt 和 Command（MacOS）键。