DOM的增删改
-
添加到指定父节点的最后
父节点.appendChild(新节点)
-
添加到指定父节点的最后(参数2 设置null 默认添加到父级最后 )
父节点.insertBefore(新节点,插入到哪一个值得前面)
-
添加到指定父节点最前面
父节点.insertBefore(新节点,父节点.irstElementChild)
-
删除DOM
父节点.removeChild(要删除的节点)
-
修改某一个节点
父节点.replaceChild(新节点,要修改的节点)
克隆节点
想要克隆的节点.cloneNode(参数)
参数 false 克隆时 不带克隆节点中的值
参数 true 克隆时 包括克隆节点中值
元素偏移量
元素.offsetLeft 距离左边偏移量
元素.offsetTop 距离顶部偏移量
获取元素尺寸与浏览器窗口尺寸
元素的尺寸(占地面积)
(实际宽度+ padding + border)
window.offsetXXX
(实际宽度 + padding)
window.clientXXX
获取浏览器窗口尺寸
(计算时 包含浏览器滚动条)
window.innerXXX
(计算时 不会包含浏览器滚动条)
window.clientXXX
js的事件
事件(在某一时刻,用户在页面中做了某件事,我们要给出的反馈)
事件的三要素
事件源
事件类型
事件处理函数
0级事件绑定 事件源.on+事件类型 = 事件处理函数
弊端:无法绑定多个同类型的事件 新写的事件会把之前写的事件覆盖
2级事件绑定(事件监听) 事件源.addEventListener('事件类型',事件处理函数,参数3)
优点:可以同时绑定多个同类型的事件 且不会被覆盖
浏览器 滚动事件
当页面中所有的资源全部加载完毕后 在执行
window.onload = 事件处理函数
鼠标事件
左键单击
事件源.onclick = 事件处理函数
左键双击
事件源.ondblclick = 事件处理函数
右键单击
事件源.oncontextmenu = 事件处理函数
鼠标按下
事件源.onmousedown = 事件处理函数
鼠标抬起
事件源.onmouseup = 事件处理函数
鼠标移动
事件源.onmousemove = 事件处理函数
鼠标移入 (鼠标移入盒子内的子元素也会触发)
onmouseover = 事件处理函数
鼠标移出 (鼠标移出盒子内的子元素也会触发)
onmouseout = 事件处理函数
鼠标移入
事件源.onmouseenter = 事件处理函数
鼠标移出
事件源.onmouseleave = 事件处理函数
键盘事件
键盘抬起事件
document.onkeyup =事件处理函数
键盘按下事件
document.onkeydown =事件处理函数
键盘按下抬起事件
document.onkeypress =事件处理函数
表单事件
获取焦点事件
标签.onfocus = 事件处理函数
失去焦点事件
标签.onblur = 事件处理函数
文本框内容改变时触发
标签.onchange = 事件处理函数
文本框输入内容时触发
标签.oninput = 事件处理函数
获取鼠标的坐标
获取 相对于 事件源 的鼠标坐标点
事件对象.offsetX
事件对象.offsetY
获取相对于 页面 的坐标点
事件对象.pageX
事件对象.pageY
获取相对于 浏览器窗口 的坐标点
事件对象.clientX
事件对象.clientY
