对象.classList.add()添加一个类名 什么是API

API：应用程序接口

作用:开发人员使用,js提供的借口来操作元素和浏览器

什么是DOM

作用：操作网页文档,实现交互

DOM就是把整个网页当做一个对象来看,通过获取的对象来操作网页

获取DOM

获取元素：

document.querySelector(css选择器)

获取多个

document.querySelectorAll(CSS选择器)

返回的是一个伪数组，它没有数组的方法，但有长度,有下标

其他方式获取/了解

document.getELementById() 获取id
document.getElementsByTagName()根据标签名获取元素,伪数组
document.getElementsByClassName()根据类名获取元素,伪数组
document.getElementsByName() 通过name属性获取元素,伪数组

操作元素内容

对象.innerText

对象.innerHTML

相同点:都能修改元素内容
不同点：inner.Text赋值是不能解析标签,innert.HTML赋值能解析标签;推荐使用

操作元素属性

可以通过DOM操作元素的各个属性,如src,title等等

语法:对象.属性=值

操作元素样式

对象.style.样式属性=值

注意事项：

不要忘记记css单位，记得加引号
如果有连接符-就转为小驼峰命名法，如：

box.style.backgroundColor='red'

操作元素样式属性

通过className给元素添加一个类名,如果该元素还有其他类名，就会被替换,覆盖，使用记得加上元素自身的类名

对象.className='active'

通过classList操作元素类名对象.classList.add()添加类名对象.classList.remove()删除类名对象.classList.toggle()切换类名,有就删除,没有添加类名

操作表单属性

对象.value=值对象.type=值

复选框:

元素.checked=true 打勾
元素.checked=false 不打勾

按钮: 元素.disabled=true 禁用元素.disabled=false 不禁用

自定义属性

定义语法:data-自定义属性

data-id=1

获取自定义属性:dataset

元素.dataset.id

间歇函数,定时器、

作用:每隔一段时间自动的执行一段代码,不需要手动触发

语法:

  let id =  setInterval(函数,间隔时间)
    setInterval(function(){
    console.log('你好')
    //每个一秒打印你好
    },1000)

注意事项:

定时器括号里函数大多为匿名函数,如使用具名函数不要加括号,有括号则是调用
每个定时器都会返回一个数字标识代表这个定时器,用来关闭这个定时器

关闭定时器

clearInterval(开启定时器的返回值)

事件监听

事件监听的三大要素:

事件源(谁被触发了)
事件类型(因为什么原因触发)
处理函数(要怎么做)

监听的语法是什么 元素.addEventListener(事件类型,处理函数) 把事件处理函数注册到元素身上,当触发指定事件时,处理函数就会被执行.也被称为事件绑定,事件注册

事件类型

鼠标事件

click 鼠标点击
mouseentert鼠标移入触发
mouseleave鼠标移出触发

焦点事件

fpcus 获得焦点
blur 失去焦点

键盘事件

keydow 键盘按下
keyup 键盘抬起
input input事件，修改表单value值时触发

回调函数:

一个函数被当作参数来被另一个函数来使用，这个函数就是回调函数

事件监听的版本:

DOM L0

事件源.on事件类型=function(){}

DOM L2

事件源.addEventListener(事件类型.处理函数)

注意:

on方式同名事件会被覆盖,add方式则不会推荐使用

事件对象

是什么 也是个对象,这个对象有被触发的相关信息,包含属性名和方法

使用场景：判断用户是否按下了回车键

元素.addEventListener('keyup', function (e) {
      //判断用户是否按下了回车键,弹出你好
      if(e.key==='Enter'){
      alert('你好')
      }
      
    })

回调函数得第一个参数就是事件对象
一般取名为event,e,en

常见的属性

环境对象

指的是函数内部的this,他指向一个对象，受环境影响

谁调用我,我就是谁
普通函数指向window
对象方法函数指向对象
事件回调函数指向事件源本身
间歇函数定时器指向window

排他

先循环数组
给每个元素添加事件
找到高亮先将其删除
给每个元素添加高亮类名

DOM语法获取元素，操作元素,怎么给元素注册事件类型