共计 1620 个字符,预计需要花费 5 分钟才能阅读完成。
#### 一、元素的操作
创立元素
document.createElement(‘div’);
增加元素
div.appenChild(div);// 增加到外部
div.insertBefore(div);// 增加到元素之前
删除元素
删除子元素:parent.removeChild(div);
删除自身:div.remove();
替换掉指定元素
a.replaceChild(b)// 将 A 替换成 B
创立元素属性
createAttribute(className,’ ‘)
批改元素属性
setAttribute();
获取元素属性
getAttribute();
判断是否存在该属性
A.hasAttribute(name)// 判断 A 中书否存在 name 这个属性的属性值
其余获取
oDiv.childNodes()//oDiv 的所有子元素
oDiv.childElementCount()//oDiv 的子元素的个数
oDiv.parentNode()//oDiv 的父元素,包含空格和换行
oDiv.parentElement()//oDiv 的父元素
oDiv.previousSibling()//oDiv 上一个兄弟元素,包含空格和换行
oDiv.previousElementSibling()//oDiv 上一个兄弟元素
oDiv.nextSibling()// 下一个兄弟元素,包含空格和换行
oDiv.nextElementSibling()// 下一个兄弟元素
几个像素值
A.clientWidth//width + 左右 padding
A.clientHeight//height+ 高低 padding
A.clientLeft// 左 border-width
A.clientTop// 上 border-height
A.offsetWidth//width+ 左右的 padding+ 左右的 border
A.offsetHeight//height+ 高低的 padding+ 高低的 border
A.offsetLeft// A 元素左边框外边缘到 offsetParent 右边框内边缘的间隔
A.offsetTop// A 元素上边框外边缘到 offsetParent 上边框内边缘的间隔
A.offsertParent// 获取的是以 A 元素最近的已定位的父元素,如果所有的元素都没有定位,那么就指 body
A.scrollWidth // 屏幕的宽
A.scrollHeight// 屏幕的宽
A.scrollLeft// A 元素可见元素与该元素理论内容的间隔
A.scrollTop
#### 二、元素的事件
鼠标事件 (11 个)
单击事件 onclick
双击事件 ondblclick
鼠标移入 onmouseover
鼠标移出 onmouseout
鼠标移入 onmouseenter
鼠标移出 onmouseleave
鼠标挪动 onmousemove
鼠标右键点击 oncontextmenu
鼠标按下 onmousedown
鼠标抬起 onmouseup
滚轮事件 onmousewheel(滚轮只有滚动就触发,不分方向)
oDiv.onmousewheeel=function(){ // 通过事件对象(event)的 wheel 的属性 if(event.wheelDelta){}else{}// 依据滚轮的方向操作页面的 top 值 }
键盘事件(3 个)
键盘按下 onkeydown
键盘抬起 onkeyup
键盘长按 onkeypress
表单事件(5 个)
input 框的事件
获取焦点 onfoucs
失去焦点 onblur
输出时触发 oninput
扭转事件 (比照输入框中前后两次的值发生变化时才会触发) onchange
form 的事件
提交表单事件 onsubmit
重置表单事件 onreset
触屏事件(触摸事件:挪动端)
加载事件
onload 当后面事件加载结束而后再触发的事件
window.onload=function(){};
// 本期对于 js dom 操作完结啦, 是不是很简略! 心愿对你有所帮忙! 让咱们一起致力走向巅峰!