复盘-----JS----DOM-CSDN博客

本文链接：https://blog.csdn.net/weixin_70027586/article/details/128172930

本文介绍了DOM文档对象模型的基础操作，包括节点查询方法如getElementById及getElementsByClassName等，并讲解了节点遍历技巧、事件监听注册及节点属性修改等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM文档对象模型

Document Object Mode

一、dom节点查询

1.document.getElementById()通过id获取节点
2.document.getELementsByTagName()通过标签名获取多个节点
3.document.getEementsByClassName()通过class类名获取节点
4.document.getElementsByName()通过表单名获取节点

节点的遍历

1.for循环来遍历

for(var i = 0;i<ps.length;i++){}

2.forEach(数组)

var arr = Array.form(ps);
arr.forEach(function(elem){
     console.log(elem.innerText) 
})

3.querySelector–通过css选择器的方式查询节点

var p = document.querySelector("div.four")
var p = document.querySelector("All")

知识点

classList.toggle()切换类名
classList.add()添加类名
classList.remove()移除类名
classList.contains()检查是否包含

mouseover鼠标移入
mousemove移动
mouseup弹起
mousedown按下
mouseleave离开
click单击
dblclick双击
focus获得焦点
blur失去焦点
submit提交
reset重置

查看节点关系

parentElement 父元素
previousElementsibling 上一个
nextElementSibling 下一个
firstElementChild 第一个兄弟
lastElementChild 最后一个兄弟

属性修改

getAttribute()获取属性
setAttribute()修改属性
removeAttribute()删除属性

获取getELementById

注册 addElementListener

btn2.addElementListener("click",function(){})