Fork me on GitHub

操作DOM常用的方法和属性总结

document.querySelector() 返回指定css选择器的第一个元素对象
document.querySelectorAll() 返回指定css选择器的所有元素对象
textContent 设置或获取元素中的文本内容
style:
display 设置或获取元素的显示类型
textAlign 设置或获取文本对齐方式
transform 向元素应用2D或3D转换

className 获取设置好的css样式
classList 对元素进行获取,添加,删除,判断等lenth获取类名数量,add对一个元素添加类名,remove移除类名,contains判断类名是否存在,item获取索引
setAttribute('id',2) 为一个标签添加属性和值 id,2
getAttribute()获取属性值
removeAttribute('') 移除属性和值

date-* 自定义属性
dataset.属性名 获取自定义属性
dataset【】获取自定义属性

nodeName 获取节点名字
nadeValue 获取节点值
nodeType 获取节点类型

parentNode 获取当前节点的父节点
firstChild 获取当前节点的首个子节点
lastChild 获取当前节点的最后一个子节点
firsrElementChild 获取当前节点的首个子元素节点
lastElementChild 获取当前节点的最后一个子元素节点
children 获取所有子元素节点集合
childNodes获取所欲子节点集合

创建并添加节点
createElement() 创建节点
insertBefore 添加节点,首部
appendChild添加节点,末尾
removeChild() 删除子节点

复制节点
cloneNode() 复制节点

事件监听:
对象名.addEventListener('click',函数) 事件处理函数
事件移除:
对象.removeEventListener('click',函数) 事件移除

事件对象

window.event 获取点击事件对象
名字.target 获取触发事件的对象
名字.type
preventDefault() 阻止默认事件,比如阻止表单提交
stopPropagation() 阻止事件冒泡
禁用右键菜单和文本选中
contextmenu 右键事件
selectstart 文本选中事件

焦点事件
function blur() blur为失去焦点时触发 focus成为焦点的时候触发
在需要进行焦点验证的地方跟.onfocus=blur;
在需要进行焦点验证的地方跟.onblur=blur;

键盘事件:名字.keyCode 获取键盘对应的参数
onkeydown 键盘按下的时候触发

表单事件:submit 表单提交时触发
reset 表单重置时触发
change 内容发生改变的时候触发

offsetParent 向上查找距离当前元素最近的父元素

获取鼠标指针位置:
clientX 鼠标位于浏览器窗口中可视化区域的水平坐标
clientY 鼠标位于浏览器窗口中可视化区域的垂直坐标
pageX 鼠标位于文档的水平坐标,早期ie不支持
pafeY 鼠标位于文档的垂直坐标,早期ie不支持
screenX 鼠标位于屏幕的水平坐标
screenY 鼠标位于屏幕的垂直坐标

鼠标事件:
onmouseup 释放鼠标的时候触发
onmousedown 按下鼠标任意按键时触发
onmousemove 当鼠标在目标元素上移动时持续触发

posted @ 2024-02-01 21:50  一名狗书匠&  阅读(4)  评论(0编辑  收藏  举报

asd