一、获取元素的方法
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>