webapi
一，webapi基本认知
- 作用和分类
- 作用：就是使用js去操作html和浏览器
- 分类：DOM（文档对象模型），BOM（浏览器对象模型）
- 什么是DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API）也就是浏览器提供的一套专门用来操作网页内容的功能
- DOM树：将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
- 作用：文档树直观的体现了标签与标签之间的关系
- DOM对象：浏览器根据html标签生成的 JS对象（DOM对象） DOM的核心就是把内容当对象来处理 二，
- 获取DOM对象
- querySelector获取元素
<body>
<div>
<span>span</span>
<span>我也是span</span>
<a href="" class="mya">我是a</a>
<h2 id="myh2">我是h2</h2>
</div>
<script>
let mya = document.querySelector('a') //''里面是类名或者属性名或者标签('选择器')
let myh2 = document.querySelector('#myh2')
console.log(mya);
console.log(myh2);
let myspan = document.querySelector('span')
console.log(myspan); //同样的标签只能获取第一个
myspan.style.color = 'red'
//document.querySelector()只能获取一个dom元素，获取后可以直接修改
</script>
</body>
- 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>
//document.querySelectorAll()获取多个dom元素，获取到元素需要遍历才可以进行修改
let spans = document.querySelectorAll('span')
for (let i = 0; i < spans.length; i++) {
console.log(spans[i]);
spans[i].style.color = 'red'
console.log(spans);
}
</script>
</body>
- 其他获取元素的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>
<script>
//通过id获取元素,如果id重复了只会获取第一个满足条件的元素
let myh2 = document.querySelector('#myh2')
let myh2 = document.getElementById('myh2')
//通过标签获取元素
let spans = document.getElementsByTagName('span')
//通过类名获取元素
let mya = document.getElementsByClassName('mya')
//for遍历mya
for (let i = 0; i < mya.length; i++) {
console.log(mya[i]);
}
//forEach遍历mya
mya.forEach(function (v, i) {
console.log(v, i);
});
</script>
</body>
- 元素内容的操作
<body>
<div>
<h2>我是大广州<span>这里是王者荣耀</span></h2>
</div>
<script>
// let str='abc<hr>'
// document.write(str)
//1. 获取span元素
let span = document.querySelector('span')
console.log(span);
// 2，innerText：为元素设置标签之间的文本内容
// 特点：innerText不能对内容中的html标签结构进行解析，而是会原样输出
span.innerText = 'abc<hr>' //abc<hr>
// 3.innerHTML:为元素设置标签之间的文本内容,如果内容中有html结构，会进行解析
span.innerHTML='abc<hr>' //abc下面一条横线
</script>
</body>
- 案例 随机点名并渲染在页面的某个位置
<style>
span {
display: block;
width: 100px;
margin-top: 100px;
padding: 10px 20px;
border: solid #f00 1px;
text-align: center;
}
</style>
<body>
<button>随机抽取</button>
<span>这是渲染位置</span>
<script>
// let names = ['张三', '赵铁柱', '李狗蛋', '张翠花'] //定义一个数组
// let btn = document.querySelector('button') //获取buton
// let span = document.querySelector('span') //获取span
// btn.addEventListener('click', function () { //为button添加一个监听事件，在点击之后
// let index = parseInt(Math.random() * names.length) //生成随机索引
// let name = names[index] //将生成的随机数的值给name，根据索引获取姓名
// span.innerHTML = name //修改span里面的值，将姓名渲染到指定的元素中
// })
</script>
</body>
- 元素的属性赋值
<body>
<P style="color:red">我要好好学习</P>
<img src="" alt="" />
<input type="text" />
<script>
let input = document.querySelector('input')
let img = document.querySelector('img')
input.innerHTML = 'abc' //不显示
input.value = '1234' //输入框内容为1234
// img.src='./images/1.jpg' //显示图片
input.style.color = 'red' //输入框字体变红
// 点语法只能操作内置属性，对自定义属性的操作忽略
img.alt = '我是一张图片' //图片显示不出来的时候显示字体
img.myname = '我是李狗蛋' //没有效果，因 myname是非内置属性
</script>
</body>
- 案例 单机显示不同的图片
//第一种方式
//1.获取元素
let button = document.querySelector('button')
let img = document.querySelector('img')
//2.单击事件
button.addEventListener('click', function () {
//3.生成随机数1-4
let index = parseInt(Math.random() * 4 + 1) //Math.random()*(max-min+1)+min
//4.生成图片路径
let path = `./images/${index}.jpg`
img.src = path
// img.src=`./images/${index}.jpg`
})
//第二种方式
let arr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'] //将没有规律的图片放入数组当中
let button = document.querySelector('button') //获取button元素
let img = document.querySelector('img') //获取img元素
button.addEventListener('click', function () { //给button一个单击事件
let index = parseInt(Math.random() * arr.length) //生成随机数
let path = `./images/${arr[index]}` //生成图片路径
img.src = path
})
- 元素的操作样式-style
<body>
<button>加啊</button>
<p>我是p元素，我可以动态添加样式</p>
<span>我也想和p元素一样</span>
<script>
let button = document.querySelector('button')
let p = document.querySelector('p')
let span = document.querySelector('span')
button.addEventListener('click', function () {
p.style.color='red'
p.style.textDecoration='underline'
p.style.background='yellow'
p.style.width='300px'
span.style.color='red'
span.style.textDecoration='underline'
span.style.background='yellow'
span.style.width='300px'
})
</script>
</body>
- 案例 随机切换元素的背景
<body>
<div></div>
<button>点击更换图片</button>
<script>
// //1.获取button
// let button = document.querySelector('button')
// //2.模拟数据，把图片放进去
// let arr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']
// //3.给button添加单击事件
// button.addEventListener('click', function () {
// //4.生成随机数index是0-3的索引
// let index = parseInt(Math.random() * arr.length)
// //5.生成图片路径
// let path = arr[index]
// console.log(path);
// document.body.style.backgroundImage = `url(./images/${arr[index]})`
// })
</script>
</body>
- 元素的样式类名操作
<style>
.divborder {
border: 1px solid #ccc;
}
.mydiv {
width: 400px;
height: 400px;
background-image: url(./images/1.jpg);
background-size: contain;
background-repeat: no-repeat;
}
</style>
<body>
<button>改背景</button>
<div class="divborder">我是内容</div>
<script>
//获取元素
let button = document.querySelector('button')
let divborder = document.querySelector('.divborder')
// className:就是相当于设置元素的class属性，只不过class在js中是关键字，所以使用className进行替代
// 元素.className = '样式名称'
button.addEventListener('click', function () {
divborder.className = 'mydiv'
})
</script>
</body>
- classList操作类名样式
<style>
.red {color: red;}
.size50 { font-size: 50px;}
.underline {text-decoration: underline;}
</style>
<body>
<button>添加一个字体大小样式</button>
<button class="second">移除一个字体大小样式</button>
<button>切换一个字体大小样式</button>
<button>判断元素是否有某个样式</button>
<p class="red">我是百变p元素</p>
<script>
let p = document.querySelector('.red')
let btn1 = document.querySelector('button')
let btn2 = document.querySelector('.second')
let btn3 = document.querySelector('button:nth-of-type(3)')
let btn4 = document.querySelectorAll('button')[3]
btn1.addEventListener('click', function () {
p.classList.add('size50', 'underline')
})
btn2.addEventListener('click', function () {
p.classList.remove('size50')
})
btn3.addEventListener('click', function () {
p.classList.toggle('size50')
})
btn4.addEventListener('click', function () {
let flag = p.classList.contains('size50')
console.log(flag)
})
</script>
</body>
- 表单元素的属性操作
<body>
<input type="text" class="username" /> <button class="changeType">变</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 username = document.querySelector('.username')
let changeType = document.querySelector('.changeType')
//给button属性设置点击事件
changeType.addEventListener('click', function () {
//声明一个type变量存储username的文本类型
let type = username.type
if (type === 'password') {
username.type = 'text'
} else {
username.type = 'password'
}
// username.type = username.type === 'password' ? 'text' : 'password'
})
</script>
</body>
二，定时器
- 开启定时器
2. 关闭定时器
- 案例
- 添加定时器
<body>
<button>获取验证码</button>
<script>
let btn = document.querySelector('button')
btn.addEventListener('click', function () {
let time = 5
//开启定时器
let timeId = setInterval(function () {
time--
btn.innerHTML = `倒计时${time}s`
//点击前
btn.disabled = true
if (time == -1) {
//关闭定时器
clearInterval(timeId)
btn.disabled = false
btn.innerHTML = `获取验证码`
}
}, 1000)
})
</script>
</body>
- 自动切换图片添加鼠标进入和移出效果
<body>
<div>
<img src="./images/b01.jpg" alt="" />
<p>第1张图片</p>
</div>
<script>
let div = document.querySelector('div')
let img = document.querySelector('img')
let p = document.querySelector('p')
let index = 1
//定义全局变量
let timeId
//封装定时器后面直接调用
function starTime() {
timeId = setInterval(function () {
index++
img.src = `./images/b0${index}.jpg`
if (index == 10) {
index = 1
}
p.innerHTML = `第${index}张图片`
}, 1000)
}
starTime()
//鼠标移入
div.addEventListener('mouseenter', function () {
clearInterval(timeId)
})
//鼠标移出
div.addEventListener('mouseleave', function () {
starTime()
})
</script>
</body>
