部分DOM事件总结

Posted 2022-12-28 lvlisn

复习：

1.1 DOM:Docment Object Model  文档对象模型

当页面加载时，就会创建文档对象模型。文档对象模型被构造为DOM树；

DOM树种任何一个部分都可以看做是节点对象，结构中的html元素、属性、文本、注释等都是节点。

1.2 节点属性

nodeType 节点类型

元素节点 - 1

属性节点 - 2

文本节点 - 3

注释节点 - 8

文档节点 - 9

nodeName  节点名称

nodeValue  含有文本的节点才有节点值

1.3 节点层级访问

firstChild  第一个子节点

firstElementChild  第一个子元素节点

lastChild

lastElementChild

childNodes  所有子节点

childElements  所有子元素节点

parentNode  获取父节点

parentElement 获取父元素

nextSibling 下一个兄弟节点

nextElementSibling 下一个兄弟元素

previousSibling 上一个兄弟节点

previousElementSibling 下一个兄弟元素

1.4 document属性

document.documentElement

document.body

document.title

document.cookie

1.5 获取元素的方式

getElementById()

getElementsByClassName()

getElementsByTagName()

getElementsByName()

1.6 设置和获取html属性

对象的方式   obj.att  或   obj[“att”]

get/set  getAttribute(“att”)   setAttribute(“att”,”value”)

get/set方式可以自定义属性（data-）显示到结构中，对象自定义属性只能在js中使用

1.7 设置和获取css样式

行内式添加的样式：

对象的方式  

ele.style.prop =“单个样式”

ele.style = “多个样式”

ele.style.cssText = “多个 样式”

get/set方式

setAttribute(‘style’,”样式”)

非行内式获取样式

非IE8及以下版本浏览器，使用window.getComputed(element,null)

IE8及以下浏览器版本，使用element.currentStyle =

兼容性写法：

function getOuterStyle(ele,att)

if(window.getComputed)

return window.getComputed(ele,null)[att];

else

return ele.currentStyle[att];

1.8 事件

事件是用户或者浏览器的行为；通过函数进行捕获，执行相应的操作；

一旦有了事件，会自动生成事件对象，存储事件对象相关的详细信息。

窗口事件

window.onload  结构或图片加载完成后，执行的事件

window.onscroll 窗口滚动条事件

window.onresize 窗口改变事件

键盘事件

onkeydown  键盘被按下

onkeyup 键盘按键被松开

onkeypress 键盘按键按下并松开  不支持功能键  大小写获取的键盘码不一致

keyCode

鼠标事件

onclick  单击事件

ondblclick 双击事件

oncontextmenu 右键事件

onmouseover / onmouseenter 鼠标滑过

onmouseout/onmouseleave 鼠标离开

onmousedown 鼠标按下

onmouseup 鼠标松开

onmousemove 鼠标移动

表单事件

onfocus 获取焦点

onblur 失去焦点

onchange 表单改变

onselected 选中事件

oninput 正在输入事件

onsubmit 表单提交

onreset 表单重置

提交和重置需要元素form驱动