首页 > 其他分享 >操作DOM常用的方法和属性总结

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

时间:2024-02-01 21:56:01浏览次数:24  
标签:总结 触发 鼠标 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 当鼠标在目标元素上移动时持续触发

标签:总结,触发,鼠标,DOM,元素,获取,事件,节点,属性
From: https://www.cnblogs.com/wenjie001/p/18002195

相关文章

  • 2.1寒假每日总结23
    最最简单的超级马里奥训练过程fromnes_py.wrappersimportJoypadSpaceimportgym_super_mario_brosfromgym_super_mario_bros.actionsimportSIMPLE_MOVEMENTimporttimefrommatplotlibimportpyplotaspltfromstable_baselines3importPPOenv=gym_super_mario......
  • Codeforces Round 922 (Div. 2) 赛后总结
    自豪的是D题做出来了,悲哀的是B题没能做出来C题的绝对值最小D题,DP存不下状态就把状态放进所求值中比赛快结束的时候,我想,这个B题,它但凡需要我通过归并排序或者树状数组求逆序对,不比C题进制转化要难?于是我就猜了一个结论结论是对的,但不幸的是,我编程实现的时候出错了考虑怎样证......
  • 【技巧总结】java整数,字符串,数组之间的相互转换(持续更新)
    字符串转换为int类型给定一个字符串Stringstr="1234";转为转数字1234valueOf()Integernum=Integer.valueOf(str);返回的是包装类对象,可以进行调用对象方法可以用toString()方法。​parseIntintnum=Integer.parseInt(str)返回的是基本数据类型字符串......
  • Linux网络设备驱动总结
    1.Linux系统对网络设备驱动定义了4个层次,这4个层次为网络协议接口层、网络设备接口层、提供实际功能的设备驱动功能层和网络设备与媒介层。2.网络协议接口层向网络层协议提供统一的数据包收发接口,不论上层协议为ARP还是IP,都通过dev_queue_xmit()函数发送数据,并通......
  • 代码随想录算法训练营第九天| 28. 实现 strStr() 459.重复的子字符串 字符串总结 双
     28.实现strStr()给你两个字符串 haystack 和 needle ,请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标(下标从0开始)。如果 needle 不是 haystack 的一部分,则返回  -1 。题目链接:28.找出字符串中第一个匹配项的下标-力扣(LeetCode)思路:标......
  • 如何做好一个信息系统项目经理,一个项目经理的个人体会和经验总结(三)
    前言今天我们继续聊聊在项目开发阶段,项目经理需要做好的事情......
  • WC 2024 总结
    回顾T130分钟过,又用15分钟对拍。T2看了半个小时不会,于是去T3写了20分。此时2小时。不知道为什么我又想了两个小时的T3,没有得分。只剩一个小时了,我终于开始认真想T2了。枚举L,N^5。最后半个小时,我意识到自己又要输了,我不知道为什么自己没有力气冲了。反思别再......
  • 韩顺平Java自学编程误区,评论区的总结
    韩顺平Java自学编程误区,评论区的总结———韩顺平听了两遍,觉得很有收获。总结韩老师的视频内容。总结了10条。需要的大家可以参考。总结(我只总结10个)韩老师自学编程的13个误区:1.不注重基础(例如:oop,网络、操作系统、基本数据结构、算法、常用的设计模式、多线程、高并发基础知识......
  • PS 第一节 新建与属性
    PS基础第一节新建与置入快捷键:......
  • Collision Resolution -Game Physics Engine Development总结
    ThevelocityofapointThevelocityofapointonanobjectdependsonbothitslinearandangularvelocity:\[\dot{q}=\dot{\theta}\times(q-p)+\dot{p}\qquad\qquad[1.0]\]where\(\dot{q}\)isthevelocityofthepoint,\(p\)ist......