1、作用:使用JS去操作html和浏览器
2、分类:
1、DOM:Document Object Model,即文档对象模型,用来呈现以及与任意html或xml文档交互的API,DOM是浏览器提供的一套专门用来操作网页内容的功能。
2、DOM作用:开发网页内容特效、实现用户交互。
1、DOM树:将HTML文档以树状结构直观的表现出来,称之为文档树或者DOM树。
2、作用:文档树直观的体现了标签与标签之间的关系。
1、DOM对象:浏览器根据html标签生成的JS对象
2、DOM的核心思想:把网页内容当做对象来处理
3、document对象:
1、语法:document.querySelector(‘css选择器’)
2、参数:包含一个或多个有效的CSS选择器字符串
3、返回值:CSS选择器匹配的第一个元素,一个HTMLElement对象,如果没有匹配到,则返回null。
4、参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
5、示例代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div>111div>
<div>222div>
<div class="three">333div>
<script>
var dom1 = document.querySelector('div');//111
console.log(dom1);
var dom2 = document.querySelector('.three');//333
console.log(dom2);
script>
body>
html>
1、语法:document.querySelectorAll(‘css选择器’)
2、参数:一个或多个有效的CSS选择器字符串
3、返回值:CSS选择器匹配的NodeList对象集合,是一个伪数组,有length属性,可以通过下标索引获取元素,但是没有pop()、push()等数组的方法。就算只有一个元素,获取到的也是一个伪数组,里面只有一个元素而已。
4、示例代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div>111div>
<div>222div>
<div class="three">333div>
<script>
// 获取多个元素,得到的是一个伪数组
var doms = document.querySelectorAll('div');
for(let i = 0;i < doms.length;i++) {
console.log(doms[i]);
}
script>
body>
html>
1、其他方法
方法 | 说明 |
---|---|
document.getElementById(‘btn’) | 通过元素id值获取元素 |
document.getElementsByTagName(‘div’) | 通过标签名获取页面中所有div元素 |
document.getElementsByClassName(‘box’) | 通过类名获取所有类名为box的元素 |
1、只能将文本内容追加到前面的位置
2、文本包含的标签会被解析
3、代码示例:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
// 追加文本内容
document.write('好好学习,天天向上');
// 里面的标签会被解析
document.write('学习令人兴奋
');
script>
body>
html>
1、将文本内容添加或者更新到任意标签的位置
2、文本包含的标签不会被解析
3、示例代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="box1">div>
<div id="box2">这里的值会更新div>
<div id="box3">这里的标签不会被解析div>
<script>
// 为id为box1的div添加内容
var box1 = document.getElementById('box1');
box1.innerText = '这是添加到div1的文字';
// 为id为box2的div更新内容
var box2 = document.getElementById('box2');
box2.innerText = '这是更新到div2的文字';
// 里面的标签不会被解析
var box3 = document.getElementById('box3');
box3.innerText = '不会被解析的标签
';
script>
body>
html>
1、将文本内容添加/更新到任意标签位置
2、文本包含的标签会被解析
3、示例代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="box1">div>
<div id="box2">这里的值会更新div>
<div id="box3">这里的标签会被解析div>
<script>
// 为id为box1的div添加内容
var box1 = document.getElementById('box1');
box1.innerHTML = '这是添加到div1的文字';
// 为id为box2的div更新内容
var box2 = document.getElementById('box2');
box2.innerHTML = '这是更新到div2的文字';
// 里面的标签不会被解析
var box3 = document.getElementById('box3');
box3.innerHTML = '不会被解析的标签
';
script>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div {
display: inline-block;
width: 150px;
height: 30px;
border: 1px solid pink;
vertical-align: middle;
text-align: center;
line-height: 30px;
}
style>
head>
<body>
抽中的选手:<div>div>
<script>
// 获取元素
var box = document.querySelector('div');
// 得到随机名字
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
// 声明一个数组
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操'];
// 生成一个随机数,作为数组索引号
let random = getRandom(0, arr.length - 1);
// 写入标签内部
box.innerHTML = arr[random];
// 删除这个人名,arr.splice(从哪里开始删, 删几个)
arr.splice(random, 1);
script>
body>
html>
1、可以通过JS设置和修改标签元素的属性
2、常见属性:href、title、src
3、语法:对象.属性 = 值
4、示例代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<img src="./img/a.png" alt="测试图片" />
<script>
// 获取图片元素
let imgs = document.querySelector('img');
//修改元素的src属性
imgs.src = './img/b.png';
imgs.title = '我是风景图片';
script>
body>
html>
1、可以通过JS设置修改元素的样式属性
2、比如轮播图小圆点自动更换颜色样式
3、点击按钮可以滚动图片,是通过移动图片的位置left实现的
4、语法:对象.style.样式属性 = 值
5、示例代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div>div>
<script>
// 获取元素
let box = document.querySelector('div');
//设置样式属性
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'pink'
script>
body>
html>
1、 操作类名(className) 操作CSS:如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式。
2、语法:元素.className = ‘类名’
3、注意点:
4、示例代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.new {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 0 auto;
}
style>
head>
<body>
<div class="one">div>
<script>
// 获取元素
let box = document.querySelector('.one');
// 设置样式,保留之前的类名
box.className = 'one new';
script>
body>
html>
1、为了解决className容易覆盖以前的类名,我们可以通过classList方式追加和删除类名
2、语法:
语法 | 说明 |
---|---|
元素.classList.add(‘类名’) | 追加一个类 |
元素.classList.remove(‘类名’) | 删除一个类 |
元素.classList.toggle(‘类名’) | 切换一个类 |
3、示例代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.one {
width: 100px;
height: 100px;
background-color: pink;
}
.new {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 0 auto;
}
style>
head>
<body>
<div class="one">div>
<script>
// 获取元素
let box = document.querySelector('.one');
// 追加一个类
box.classList.add('new');
// 删除一个类
box.classList.remove('one');
// 切换一个类
box.classList.toggle('one');
script>
body>
html>
1、表单在很多情况下,也需要修改属性,比如点击眼睛可以看到密码,本质就是把表单类型转换为文本框。
2、获取表单属性:DOM对象.属性名
3、设置表单属性:DOM对象.属性名 = 新值
4、表单属性中添加就有效果,移出就没有效果,一律使用布尔值表示,如果为true代表添加了该属性,如果为false代表移出了该属性,比如:disabled、checked、selected
5、示例代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<input type="text" placeholder="请输入" />
<button disabled>按钮button>
<input type="checkbox" class="box" />
<script>
// 获取元素
let input = document.querySelector('input');
// 取值
console.log(input.value);
// 设置值
input.value = '这是设置的值';
input.type = 'password';
// 启用按钮
let btn = document.querySelector('button');
btn.disabled = false;
// 勾选复选框
let checkbox1 = document.querySelector('.box');
checkbox1.checked = true;
script>
body>
html>
1、开启定时器:setInterval(函数,间隔时间)
2、作用:每隔一段时间调用这个函数,间隔时间单位是毫秒
1、语法:
let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)
2、注意:函数名不需要加括号,定时器返回的是一个id数字
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
function show() {
console.log('好好学习,每天坚持');
}
// 设置定时器,每隔1秒就调用一次show函数,show函数不需要加括号
let timer = setInterval(show, 1000);
// 清除定时器
clearInterval(timer);
script>
body>
html>