web API基本认识
Web API基本认知
1.作用和分类
作用: 就是使用JS去操作html和浏览器。
分类： DOM (文档对象模型)、BOM（浏览器对象模型）。
DOM数
DOM树
- 将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树。
- 描述网页内容关系的名词。
- 作用：文档树直观的体现了标签与标签之间的关系 。
DOM对象（重要）
DOM对象 是浏览器根据html标签生成的 js 对象。
- 所有的标签属性都可以在这个对象上面找到。
- 修改这个对象的属性会自动映射到标签身上。
DOM的核心思想
- DOM的核心思想 是 把网页内容当做对象来处理。
document对象
- 是DOM里提供的一个对象。
- 所以它提供的属性和方法都是用来访问和操作网页内容的。
- 例：document.write() 。
- 网页所有内容都在document里面 。
获取dom元素
根据css选择器来获取DOM对象。
-
querySelector ：只能获取第一个符合要求的标签。能找到返回dom元素， dom对象。找不到对应的元素 返回null。（常用）
-
querySelectorAll：不管你的选择器对与否，返回值都是数组。（常用）
-
getElementById：根据id来获取 一个dom元素。
-
getElementsByTagName：根据标签名称来获取dom 元素 一组dom元素。
-
getElementsByClassName：根据类名获取元素 一组元素。
小结 1 . 想要获取页面的标签 可以通过 document.querySelector(选择器)。 2 . querySelector 只能够获取第一个满足条件的标签。 3 . 如果选择器找不到元素 querySelector 只会返回 null 。 4 . 如果我们想要输出和打印 dom元素。 不要再使用 console.log 改为 使用 console.dir
<body>
<div>123</div>
<div>456</div>
<input type="text">
<script>
// dom对象 是浏览器自动帮我们创建好了
// 1.div标签也会被 浏览器自动生成一个dom对象
// 2.input标签也会被 浏览器自动生成一个dom对象
//document.querySelector("css选择器")
// 我们需要做的是 获取dom对象
let divDom = document.querySelector("div")
//只能获取满足条件的第一个元素
//console.log(divDom) //打印显示<div>123</div>，我们在输出打印 dom对象的时候 不再使用 console.log , console.dir()
//console.dir(divDom) //打印显示div
//我想要获取一下 input标签的 dom对象
let inputDom = document.querySelector('div');// 找不到元素 输出 null
console.dir(inputDom);
</script>
</body>
其他获取dom元素的方法（了解）
<script>
//根据id来获取 一个dom元素
let nav = document.getElementById('nav')
console.log(nav)
// 根据标签名称来获取dom 元素 一组dom元素
let ps = document.getElementsByTagName('p')
console.log(ps)
//根据类名获取元素 一组元素
let divs = document.getElementsByClassName('box')
console.log(divs)
// 常用和方便 获取一个
document.querySelector
// 获取一组
document.querySelectorAll
</script>
设置dom元素文本内容
3种实现在标签中写 动态设置文本
1. document.write 因为功能比较弱 只能把标签写在/body上面
2. innerHTML 可以设备文本，也可以解析html字符串
3. innerText 只能设置文本，不能解析html字符串。
**innerText **
示例
<body>
<h1>哈哈哈哈哈哈</h1>
<h2></h2>
<script>
/*
1 获取 输入框输入的内容
2 把名字 显示到 h2标签中
1 先获取h2标签对应的dom元素
2 使用代码修改文本内容
dom元素.innerText = "修改的内容 "
*/
let userName = +prompt('请输入')
let h2Dom = document.querySelector('h2')
//设置h1标签中的文字 等于 username
h2Dom.innerText = userName
</script>
</body>
innerHTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
//innerHTML 可以设备文本，也可以解析html字符串
document.querySelector('li:nth-child(2) ').innerHTML = '<button>变成按钮</button>' //可直接显示一个按钮
document.querySelector('li:nth-child(3) ').innerText = '<button>变成按钮</button>'
</script>
设置修改dom元素属性
可以通过js 修改其属性 1 . 获取标签对应的dom元素。 2 . dom对象.属性名=属性值。
示例：
<body>
<!-- a 标签身上的 href 图片 src alt id type 这些都是属性 -->
<!-- 可以通过js 修改其属性
1. 获取标签对应的dom元素
2.dom.属性名=属性值
-->
<a href="https://www.baidu.com/">跳转</a>
<script>
let adom = document.querySelector('a')
//修改a标签属性href 给他换跳转的链接地址
dom.href = 'https://gitee.com/ukSir/front-end-75-web-api'
</script>
</body>
多张图片刷新随机显示一张 案例：
<body>
<img src="" alt="">
<script>
//定义一个数组 把所有的图片装到一个数组里面
let arr = ['./xuan.jpg', './wen.jpg', './dog.jpg', './pic2.png',]
//定义一个0~3 随机数
let index = Math.round(Math.random() * 3);
//获取dom元素
let img = document.querySelector('img')
//修改dom元素 img图片为数组[索引号随机数] 图片就随机变化了
img.src = arr[index]
</script>
</body>
设置元素样式
写法:
对象.style.样式属性 = 值
注意：
-
修改样式通过style属性引出。
-
如果属性有-连接符，需要转换为小驼峰命名法。
-
赋值的时候，需要的时候不要忘记加css单位 。
示例：
<body>
<div>普通的元素</div>
<script>
//获取dom元素
let div = document.querySelector('div')
//开始修改
div.style.fontSize="50px";
div.style.color="pink";
div.style.backgroundColor="skyblue";
div.style.height="200px";
div.style.width="400px"
div.style.textAlign="center"
div.style.lineHeight="200px"
</script>
</body>
随机显示背景颜色案例
<body>
<script>
/* 定义个数组放颜色
let color = ['pink','skyblue','red','yellow']
定义一个来放索引号随机数
let index = Math.round(Math.random ()* (color.length - 1));
获取dom元素
let body = document.querySelector('body');
设置dom元素样式
body.style.backgroundColor = color[index]; */
//上面的方法 颜色有限
//方法2 背景颜色 用rgb（0-255，0-255，0-255）随机的颜色可以有很多组合
//定义个函数
function getBackgroundColor(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
let color1 = getBackgroundColor(0, 255);
let color2 = getBackgroundColor(0, 255);
let color3 = getBackgroundColor(0, 255);
document.body.style.backgroundColor = `rgb(${color1},${color2},${color3})`
</script>
</body>
calssname
操作类名(className)
- 操作CSS如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
- 直接给想要的元素加上这个类名，获取类选择器的css样式。
- 由于class是关键字,所以使用className去代替。
- className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名
- 可以同时给设置两个类名，以空格做分割即可；不过要注意样式重复的会层叠。
写法：
元素.className = '类名'
示例：
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
width: 500px;
height: 500px;
background-color: pink;
padding: 100px;
}
.one{
height: 100px;
width: 500px;
background-color: red;
margin: 200px,auto;
}
</style>
</head>
<body>
<div class>1</div>
<script>
/*
classname 会先清空这个dom元素 旧的所有类，然后再单独添加上 新的样式
如果想要设置多个class 以空格做分割即可。
如果两个类样式有重复，会层叠
*/
//js的方式 来动态添加上样式
let div = document.querySelector('div');
//通过classname 来设置类名 可以同时设置两个类上去
div.className = 'box '
</script>
classList
- 通过 classList 操作类控制CSS为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类 。
写法：
追加一个类
元素.classlist.add('类名')
删除一个类
元素.classlist.remove('类名')
切换一个类(本来有的就移除，没有的就添加)
元素.classlist.toggle('类名')
示例：
<body>
<div class="d1">111</div>
<script>
//添加一个class
let div = document.querySelector('div');
//classlist 添加类
// div.classList.add("d2")
div.classList.add("d2", "d3")
// 单独来指定移除class
div.classList.remove("d2")
// div.classList.remove("d2","d3")
// 切换（本来有的就移除，没有的就添加）
div.classList.toggle("d4")
// div.classList.toggle("d3")
</script>
</body>
定时器-间歇函数
网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发 。
要实现这种需求，需要定时器函数 。
定时器函数有两种。
开启定时器
setInterval（函数，间隔时间） 开启定时器
-
作用：每隔一段时间调用这个函数。
-
间隔时间单位是毫秒 ；1000毫秒 = 1秒。
示例：
<script>
// setInterval（函数，间隔时间） 开启定时器
// 间隔时间单位是毫秒 1000毫秒=1秒
//函数 负责 定时执行的业务
function repeat(){
document.write('hhhhhhhhh')
}
//每隔1秒执行一次
setInterval(repeat,1000)
//其他写法 setInterval（匿名函数，间隔时间
// setInterval(function(){} , 1000)
setInterval(function(){
console.log('wwwww')
},1000)
</script>
清除定时器
清除定时器 一般不会刚创建就停止，都是要根据满足某个条件了再来清除。
注意：
- 函数名字不需要加括号。
- 定时器返回的是一个id数字 。
写法：
let 变量名 = setInterval（函数，间隔时间）
clearInterval(变量名)
示例：
<script>
// 开启了一个定时器 会返回 定时器id
// 不需要关心 这个定时器的id 等于多少， 有id
// let timeId = setInterval(function () {
// console.log('准备吃晚饭');
// }, 1000);
// // console.log(timeId);
// // 清除定时器 一般都是要根据某个条件来清除
// clearInterval(timeId);
// 跑到第30次就清除定时器
let index = 0;
// 创建定时器的同时 返回了定时器id
let timeId = setInterval(function () {
index++;
console.log('开始', index);
// 判断是否满足条件了
if (index === 30) {
// 到30次了 清除定时器
clearInterval(timeId);
}
}, 100);
</script>
