关于javascript:js-DOM操作

39次阅读

共计 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 操作完结啦, 是不是很简略! 心愿对你有所帮忙! 让咱们一起致力走向巅峰!

正文完
 0