复盘-----JS----DOM

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(){})

事件源 event.target