获取元素，事件基础，操作元素
一. 获取元素
1.1根据ID获取
语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象 或 null
案例代码
<body>
<div id="time">2019-9-9</div>
<script>
// 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>
</body>
1.2根据标签名获取元素
语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）
案例代码
<body>
<ul>
<li>知否知否，应是等你好久11</li>
<li>知否知否，应是等你好久22</li>
<li>知否知否，应是等你好久33</li>
<li>知否知否，应是等你好久44</li>
<li>知否知否，应是等你好久55</li>
</ul>
<ul id="nav">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ul>
<script>
// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3. element.getElementsByTagName() 可以得到这个元素里面的某些标签
var nav = document.getElementById('nav'); // 这个获得nav 元素
var navLis = nav.getElementsByTagName('li');
console.log(navLis);
</script>
</body>
注意事项：
- 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
- 得到元素对象是动态的。
- getElementsByTagName()获取到是
动态集合，即：当页面增加了标签，这个集合中也就增加了元素。
1.3H5新增获取元素方式
1.document.getElementsByClassName('类名'); // 根据类名返回元素对象集合
2.document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
3.document.querySelectorAll('选择器'); // 根据指定选择器返回
注意事项：
- querySelector 和 querySelectorAll 里面的选择器需要加符号，例如：
document.querySelector('#nav');
案例代码
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3. querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
</body>
1.4 获取特殊元素（body，html）
获取body元素
document.body // 返回body元素对象
获取html元素
document.documentElement // 返回html元素对象
二.事件基础
2.1事件概述
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
2.2事件三要素
- 事件源（谁）：触发事件的元素
- 事件类型（什么事件）： 例如 click 点击事件
- 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数
案例代码
<body>
<button id="btn">AAA</button>
<script>
// 点击一个按钮，弹出对话框
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('BBB');
}
</script>
</body>
2.3.执行事件的步骤
第一步：获取事件源
第二步：注册事件（绑定事件）
第三步：添加事件处理程序（采取函数赋值形式）
案例代码
<body>
<div>123</div>
<script>
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1. 获取事件源
var div = document.querySelector('div');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
</script>
</body>
2.4常见的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
三. 操作元素
JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）
3.1改变元素内容（获取或设置）
element.innerText // 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
element.innerHTML // 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
innerText改变元素内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>重点案例</title>
<style>
div,
p {
width: 300px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: pink;
}
</style>
</head>
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1123</p>
<script>
// 当我们点击了按钮，div里面的文字会发生变化
// 1. 获取元素 var 谁 = document.querySelector()
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注册事件 谁.怎么做 = 效果 点击后再修改内容
btn.onclick = function () {
// div.innerText = '2019-6-6';
div.innerHTML = getDate();
}
// 无参数 必须有返回值
function getDate() {
var date = new Date();
console.log(date) // Tue Aug 25 2020 22:59:50 GMT+0800 (中国标准时间)
// 我们写一个 2019年 5月 1日 星期三
var year = date.getFullYear();
console.log('年', year) // 2020
var month = date.getMonth() + 1;
console.log('月', month) // 8
var dates = date.getDate();
console.log('日', dates) // 25
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
console.log('星期几', day) // 2
return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
// 我们元素可以不用添加事件；不用点击按钮刷新页面就可以修改内容 谁.innerHTML 修改谁里面的内容
var p = document.querySelector('p');
p.innerHTML = getDate();
</script>
</body>
</html>
innerText和innerHTML的区别
- 获取内容时的区别：
innerText会去除空格和换行，而innerHTML会保留空格和换行
- 设置内容时的区别：
innerText不会识别html，而innerHTML会识别
3.2常用元素的属性操作
- innerText、innerHTML 改变元素内容
- src、href
- id、alt、title
获取属性的值
元素对象.属性名
设置属性的值
元素对象.属性名 = 值
3.3 案例：分时问候
案例：分时显示不同图片，显示不同问候语
根据不同时间，页面显示不同图片，同时显示不同的问候语
- 如果上午时间打开页面：显示上午好，显示上午的图片
- 如果下午时间打开页面：显示下午好，显示下午的图片
- 如果晚上时间打开页面：显示晚上好，显示晚上的图片
案例分析：
- 根据系统不同的时间来判断，所以需要用到日期内置对象
- 利用多分支语句来设置不同的图片
- 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
- 需要一个div元素，显示不同问候语，修改元素内容即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3></h3>
<img src="" alt="">
<script>
var now = new Date()
var hours = now.getHours()
// console.log(hours);
if (hours < 12) {
setMsg('上午好', 'images/zao.jpg')
} else if (hours >= 12 && hours < 18) {
setMsg('下午好', 'images/xia.jpg')
} else {
setMsg('晚上好', 'images/wan.jpg')
}
function setMsg(msg, url) {
document.querySelector('h3').innerHTML = msg
document.querySelector('img').src = url
}
</script>
</body>
</html>
3.4 案例：仿京东显示密码
点击按钮将密码框切换为文本框，并可以查看密码明文
案例分析：
- 核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
- 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.div_top {
width: 300px;
height: 300px;
margin: 50px auto;
}
.password {
border: none;
border-bottom: 1px solid black;
outline: none;
}
.span {
display: inline-block;
width: 20px;
height: 20px;
background-image: url('./images/close.png');
background-size: 20px;
cursor: pointer;
margin-left: -25px;
}
</style>
</head>
<body>
<div class="div_top">
<input type="password" class="password">
<span class="span"></span>
</div>
<script>
var input = document.querySelector('.password')
var span = document.querySelector('.span')
console.log(input, span)
var flas = false
span.onclick = function() {
if (flas == false) {
input.type = 'text'
flas = true
span.style.backgroundImage = 'URL(./images/open.png)'
} else {
input.type = 'password'
flas = false
span.style.backgroundImage = 'URL(./images/close.png)'
}
}
</script>
</body>
</html>
3.5 样式属性操作
我们可以通过 JS 修改元素的大小、颜色、位置等样式。
常用方式
element.style // 行内样式操作
element.className // 类名样式操作
方式1：通过操作style属性
元素对象的style属性也是一个对象！
元素对象.style.样式属性 = 值;
注意：
- JS 里面的样式采取驼峰命名法，比如
fontSize、backgroundColor - JS 修改 style 样式操作，产生的是行内样式，css权重比较高
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 1. 获取元素
var div = document.querySelector('div');
// 2. 注册事件 处理程序
div.onclick = function() {
// div.style里面的属性 采取驼峰命名法 this.style.属性(属性采取驼峰命名法) = '';
this.style.backgroundColor = 'purple';
this.style.width = '250px';
}
</script>
</body>
</html>
案例：淘宝点击关闭二维码
案例分析：
- 核心思路：利用样式的显示和隐藏完成，display: none 隐藏元素；display: block 显示元素
- 点击按钮，就让这个二维码盒子隐藏起来即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#img1 {
margin-top: 5px;
width: 20px;
float: left;
}
#img2 {
width: 100px;
float: left;
}
</style>
</head>
<body>
<img src="./images/bb.png" id="img1"><img src="./images/AA.png" id="img2">
<script>
document.getElementById('img1').onclick = function() {
this.style.display = 'none';
document.getElementById('img2').style.display = 'none';
}
</script>
</body>
</html>
方式2：通过操作className属性
元素对象.className = 值;
注意事项：
- 如果样式修改较多，可以采取操作类名方式更改元素样式。
- class因为是个保留字，因此使用className来操作元素类名属性
- className 会直接更改元素的类名，会覆盖原先的类名。
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.change {
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="first">文本</div>
<script>
// 1. 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用
var test = document.querySelector('div');
test.onclick = function() {
// this.style.backgroundColor = 'purple';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';
// 让我们当前元素的类名改为了 change this.className = 'change';
// 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
// 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器 this.className = 'first change';
// this.className = 'change';
this.className = 'first change';
}
</script>
</body>
</html>