一、获取元素的方法
1.通过id获取
代码为document.getElementById('id名')
比如
<div id="time">2022-2-10</div>
<script>
var obj = document.getElementById('time')
console.log(obj)
</script>2.通过标签名获取
代码：document.getElementsByTagName('标签名')
返回的是伪数组，查找的是所有该标签的元素
3.h5新增的属性，通过类名获得元素
代码：document.getElementsByClassName('类名')
返回的是由所有该类名的元素构成的伪数组，在使用时必须要指明是第几个元素
如
<div class="box"></div>
<div class="box"></div>
<script>
var box = document.getElementsByClassName('box')
console.log(box)
</script>4.document.querySelector( )
也是H5新增的属性，返回的是第一个元素
5.document.querySelectorAll（ ）
返回的是集合，
支持后代选择器
使用时要写明具体的元素，就是 索引号
二、事件基础
1.事件的三要素
事件源 （谁）
事件类型 （什么事件）
事件处理程序 （做啥）
2.事件的执行步骤
获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）
比如
<button id = "btn">冰墩墩</button>
<script>
// 事件源.处理类型 = 函数（）{} （处理函数）
var btn = document.getElementById('btn')
btn.onclick = function(){
alert('墩墩')
}
</script>3.常见的鼠标点击事件
三、操作元素
1.改变元素内容
有两种方式
（1）element.innerText
是从起始标签到结束标签的内容，会去掉html标签，不保留换行或空格
（2）element.innerHTML
起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行
同时添加的html标签也可以执行
2.常见的元素属性操作
innerText、innerHTML 改变元素内容
src、href
id、alt、title
3.表单元素的属性操作
属性有type、value、checked、selected、disabled
input框里面的内容修改用value
4.样式属性操作
有两种，
（1）element.style 是给添加行内元素，
如
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<div class="one"></div>
<script>
var div = document.querySelector('div')
div.onclick = function (){
div.style.backgroundColor = 'skyblue' //是在行内添加的
}
</script>
//使用步骤就是先获得元素，再使用（2）element.className 类名样式操作
先写好css类
就是给标签添加类名，需要注意的是element.className会覆盖原来的类名，需要先获取原来的类名再加上新的类名
如
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<div class="one"></div>
<script>
// div.className = 'dome' //会覆盖原来的类
div.className = div.className + ' dome' //这样会保留原来的类
</script>