一、Web API 基本认知
1. 作用和分类
- 作用: 就是使用 JS 去操作 html 和浏览器
- 分类：DOM (文档对象模型)、BOM（浏览器对象模型）
2. 什么是DOM
-
DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
-
白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能
-
DOM作用
- 开发网页内容特效和实现用户交互
3. DOM树
-
DOM树是什么
- 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
- 描述网页内容关系的名词
- 作用：文档树直观的体现了标签与标签之间的关系
4. DOM对象（重要）
-
DOM对象：浏览器根据html标签生成的 JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
-
DOM的核心思想
- 把网页内容当做对象来处理
-
document 对象
-
是 DOM 里提供的一个对象
-
所以它提供的属性和方法都是用来访问和操作网页内容的
- 例：document.write()
-
网页所有内容都在document里面
-
二、获取DOM对象
01-获取元素-querySelector
<body>
<div>
<span>span</span>
<span>我也是span</span>
<a href="" class="mya">我是a</a>
<h2 id="myh2">我是h2</h2>
</div>
<script>
// 获取满足条件的第一个元素
// 选择器：以前怎么写现在也怎么写：id,类，标签，属性选择，伪类选择器.....
// let 元素对象 = document.querySelector('选择器')
// 1.只能获取满足条件的第一个元素
// 2.如果能够获取到则返回当前元素对象,这个对象可以直接进行dom对象,如果没有获取成功则返回null
let span = document.querySelector('span')
span.style.color = 'red'
let a = document.querySelector('.mya')
let myh2 = document.querySelector('#myh2')
console.log(a)
console.log(span)
console.log(myh2)
</script>
</body>
复制代码
02-获取元素-querySelectorAll
<body>
<div>
<span>span</span>
<span>我也是span</span>
<a href="" class="mya">我是a <span>广州黑马程序员中心</span></a>
<h2 id="myh2">我是h2</h2>
</div>
<span>我还是span</span>
<script>
// 获取页面中的所有的span
// querySelectorAll：可以获取满足条件的所有元素，返回一个伪数组
// 这种伪数组不能做为dom元素直接操作
// 伪数组中的每一个成员都是dom元素
// 所有伪数组一般需要先遍历再使用
// 如果获取失败，返回一个空的伪数组
let spans = document.querySelectorAll('span')
console.log(spans) // NodeList(4) [span, span, span, span]
spans.forEach(function(ele, index) {
console.log(ele, index)
ele.style.color = 'red'
})
</script>
</body>
复制代码
03 获取元素补充说明
<body>
<ul class="nav">
<li>我的首页</li>
<li>产品介绍</li>
<li>联系方式</li>
</ul>
<ul class="nav2">
<li>我的首页2</li>
<li>产品介绍3</li>
<li>联系方式4</li>
</ul>
<script>
// 获取nav2下面的所有的li元素
// let lis = document.querySelectorAll('.nav2 li')
// console.log(lis)
// 先获取nav2元素，再获取它的li元素
let nav2 = document.querySelector('.nav2')
console.log(nav2)
// 结论：也可以通过某个dom元素对象调用query....方法
let lis = nav2.querySelectorAll('li')
console.log(lis)
</script>
</body>
复制代码
04-其它获取元素的api
<body>
<span class="mya">span</span>
<span>我也是span</span>
<a href="" class="mya">我是a</a>
<a href="" class="mya">我也是a</a>
<h2 id="myh2">我是h2</h2>
<h2 id="myh2">我也是h2</h2>
<input type="text" value="内容" />
<script>
// 获取所有拥有类样式名称为mya的元素
let allA = document.getElementsByClassName('mya')
console.log(allA)
let allSpan = document.getElementsByTagName('span')
console.log(allSpan)
// 如果id重复也只能获取到第一个
let myh2 = document.getElementById('myh2')
console.log(myh2)
</script>
</body>
复制代码
三、设置/修改DOM元素内容
05-元素内容的操作
<body>
<div>
<button>点我啊</button>
<h2>
我是DOM
<span>修改DOM元素内容</span>
</h2>
</div>
<script>
// 为span元素赋值
// 1。获取元素
let button = document.querySelector('button')
let span = document.querySelector('span')
button.addEventListener('click', function() {
// 2 innerText操作
// 元素.innerText = '值'
// 2.1.会覆盖元素之间的所有内容
span.innerText = 'abc'
// 2.2 它会不会解析标签结构，会将标签结构原样输出
span.innerText = 'abc<hr>'
// 3.innerHTML操作
// 元素.innerHTML = '值'
// 2.1.会覆盖元素之间的所有内容
span.innerHTML = 'abc'
// 2.2 它会解析网页标签
span.innerHTML = 'abc<hr>'
})
// 使用选择
// 1.如果没有网页结构，你随意
// 2.如果有网页结构，且要解析网页结构，只能使用innerHTML
</script>
</body>
复制代码
06-随机点名并渲染在页面的某个位置
<body>
<button>随机抽取</button>
<span>这是渲染位置</span>
<script>
let names = ['张三', '张四', '张六', '张降']
let btn = document.querySelector('button')
let span = document.querySelector('span')
btn.addEventListener('click', function() {
// 生成随机数
let index = parseInt(Math.random() * names.length)
// 获取一个名字
let name = names[index]
// 给元素赋值
span.innerHTML = name
})
</script>
</body>
复制代码
06-元素的内容的获取
<body>
<div>
<button>点我啊</button>
<h2>
我是DOM
<span>aa</span>
</h2>
</div>
<script>
// let age = 20
// age = 30 // 赋值
// console.log(age); // 获取age的值进行打印输出
// 为span元素赋值
// 1。获取元素
let button = document.querySelector('button')
let h2 = document.querySelector('h2')
button.addEventListener('click', function() {
// 修改内容，设置内容和删除内容都是相同的操作
// span.innerHTML = ''
// 获取标签之间的内容
// 在js中，对于属性的使用，没有赋值就是取值
// innerText在获取标签之间的内容时，只能获取到文本内容，过滤掉标签结构
console.log(h2.innerText)
// innerHTML在获取标签之间内容的时候，可以获取到完整的html结构
console.log(h2.innerHTML)
})
</script>
</body>
复制代码
四、设置/修改DOM元素属性
07-元素的属性赋值
<body>
<button>点我啊</button>
<p style="color:red">我是p标签</p>
<img src="" alt="" />
<input type="text" value="aaa" />
<script>
// 获取元素
let button = document.querySelector('button')
let p = document.querySelector('p')
let img = document.querySelector('img')
let input = document.querySelector('input')
button.addEventListener('click', function() {
// 元素.属性的操作方式只适用于 内置属性
// 内置属性:元素本身拥有的属性
// p.idd = '我是p元素'
// img.src = './images/1.jpg'
input.value = '这是默认值'
})
</script>
</body>
复制代码
08-单击显示不同的图片
<body>
<button>单击随机显示图片</button>
<img src="" alt="" />
<script>
// 1.获取元素
let button = document.querySelector('button')
let img = document.querySelector('img')
// 2.为按钮绑定单击事件
button.addEventListener('click', function() {
// 每次单击按钮,都要重新生成随机数,生成一个 1-4之间的随机数,包含1也包含4
let index = parseInt(Math.random() * 4) + 1
img.src = `./images/${index}.jpg`
})
</script>
</body>
复制代码
09-元素的样式操作-style
<body>
<button>加啊</button>
<p>我是p元素，我可以动态添加样式</p>
<script>
let button = document.querySelector('button')
let p = document.querySelector('p')
button.addEventListener('click', function() {
// 元素的style是用于设置行内样式
// 我们可以设置多个样式属性
// style是所有样式集合,它是一个对象,所以我们是为style对象中的某个样式属性进行赋值
// 语法: 元素.style.样式属性 = '样式值 '
// console.log(p.style)
p.style.color = 'red'
// 如果样式属性值需要单位,那么在设置的时候也要带单位
// p.style.fontSize = '40px'
p.style['font-size'] = '40px'
p.style.textDecoration = 'line-through'
})
</script>
</body>
复制代码
10-随机切换元素的背景
<!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: 400px;
height: 400px;
border: 1px solid #ccc;
background-image: url(./images/1.jpg);
background-size: contain;
}
</style>
</head>
<body>
<button>点我啊</button>
<div></div>
<script>
let btn = document.querySelector('button')
let div = document.querySelector('div')
btn.addEventListener('click', function() {
let index = parseInt(Math.random() * 4) + 1
div.style.backgroundImage = `url(./images/${index}.jpg)`
})
</script>
</body>
</html>
复制代码
11-元素的样式类名操作
<body>
<button>改背景</button>
<div class="mydiv">我是内容</div>
<script>
// 获取元素
let btn = document.querySelector('button')
let div = document.querySelector('div')
btn.addEventListener('click', function() {
// 为div元素设置类名样式
// 语法：元素.className = '类名'
div.className = 'mydiv divborder'
})
</script>
</body>
复制代码
12-classList操作类名样式
<body>
<button class="add">添加一个字体大小样式</button>
<button class="remove">移除一个字体大小样式</button>
<button class="toggle">切换一个字体大小样式</button>
<button class="contains">判断元素是否有某个样式</button>
<p class="red">我是百变p元素</p>
<script>
let add = document.querySelector('.add')
let remove = document.querySelector('.remove')
let toggle = document.querySelector('.toggle')
let contains = document.querySelector('.contains')
let p = document.querySelector('p')
add.addEventListener('click', function() {
// 语法：元素.classList.add('样式类名1','样式类名2'...)：在元素之前的类样式的基础上添加一个新的样式
p.classList.add('size50', 'underline')
})
remove.addEventListener('click', function() {
// 语法：元素.classList.remove('样式类名1','样式类名2'...)：在元素之前的类样式的基础上移除一个样式
p.classList.remove('size50', 'underline')
})
toggle.addEventListener('click', function() {
// 语法：元素.classList.toggle('样式类名')：如果元素已有这个样式则移除，否则添加
p.classList.toggle('size50')
})
contains.addEventListener('click', function() {
// 语法：元素.classList.contains('样式类名')：判断元素是否包含某个样式，如果包含则返回true
let isHas = p.classList.contains('size50')
console.log(isHas)
})
</script>
</body>
复制代码
13-表单元素属性操作
<body>
<input type="text" class="pass" /> <button class="change">变</button>
<br />
<input type="checkbox" class="chkAll" />全选
<div>
<input type="checkbox" />写代码 <input type="checkbox" />调bug
<input type="checkbox" />写文档
</div>
<button class="getChioce">获取用户选择</button>
<script>
let pass = document.querySelector('.pass')
let change = document.querySelector('.change')
change.addEventListener('click', function() {
if (pass.type == 'text') {
pass.type = 'password'
} else {
pass.type = 'text'
}
})
// 实现全选和全不选
let chkAll = document.querySelector('.chkAll')
let chks = document.querySelectorAll('div > input')
chkAll.addEventListener('click', function() {
// 获取当前全选复选框的状态
let state = chkAll.checked
// 为下面三个复选框设置状态 为 全选复选框的状态
chks.forEach(function(ele) {
// 为复选框设置checked属性值
ele.checked = state
})
})
</script>
</body>
复制代码
五、定时器
14-添加定时器
<script>
// 每隔1s钟打印出一句话
// setInterval(需要执行的函数，间隔时间)：可以每间隔指定的时间重复执行指定的函数
// 特点：定时器的函数不会立刻执行，而是间隔时间之后再执行第一次，时间以豪秒做为单位
setInterval(function() {
console.log('还早')
}, 5000)
</script>
复制代码
15-关闭定时器
<body>
<button class="no">别说了</button>
<button class="go">继续说</button>
<span>5</span>
<script>
let go = document.querySelector('.go')
let no = document.querySelector('.no')
let span = document.querySelector('span')
let count = 10
// 接收定时器的标识--句柄
let timeId = setInterval(function() {
span.innerText = count + '秒'
count--
}, 1000)
// 停止定时器
no.addEventListener('click', function() {
// 停止定时器
// clearInterval(标识)
clearInterval(timeId)
})
// 重新开户定时器
// 定时器不能暂停，只有开户和停止
go.addEventListener('click', function() {
timeId = setInterval(function() {
span.innerText = count + '秒'
count--
}, 1000)
})
</script>
</body>
复制代码
16-倒计时
<body>
<input type="button" value="发送验证码" />
<script>
let btn = document.querySelector('input')
btn.addEventListener('click', function() {
let count = 5
// 禁用按钮
btn.disabled = true
let timeId = setInterval(function() {
btn.value = count + '秒之后重新发送'
count--
if (count < 0) {
// 停止定时器
clearInterval(timeId)
// 将按钮的文本修改回来
btn.value = '发送验证码'
// 重新启用按钮
btn.disabled = false
}
}, 1000)
})
</script>
复制代码
17-自动切换图片
<!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>
* {
padding: 0;
margin: 0;
}
div {
width: 700px;
height: 320px;
margin: 100px auto;
position: relative;
}
p {
position: absolute;
left: 0;
bottom: 0;
line-height: 50px;
background-color: #666;
color: #fff;
width: 100%;
padding-left: 10px;
font-size: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<img src="./images/b01.jpg" alt="" />
<p>第1张图片</p>
</div>
<script>
// 1.获取元素
let img = document.querySelector('img')
let p = document.querySelector('p')
let index = 1
setInterval(function() {
index++
if (index > 9) {
index = 1
}
img.src = `./images/b0${index}.jpg`
p.innerHTML = `第${index}张图片`
}, 1000)
</script>
</body>
</html>
