开始进入JS的API学习。
Web API基本认知
API作用和分类
作用:使用JS去操作html和浏览器
分类:DOM(文档对象模型)、BOM(浏览器对象模型)
DOM:用于操作网页的内容,可以开发网页内容特效和实现用户交互
DOM树:用文档树的形式直观的体现了标签与标签之间的关系
DOM对象:js中的DOM对象即是html中的标签。标签中所有属性都可以在这个对象中找到,修改这个对象的属性会自动映射到标签身上。
获取DOM对象
根据CSS选择器获取DOM对象(重点)
使用document.querySeletor或document.querySeletorAll
<script>
// 获取匹配的第一个元素 参数是一个或多个有效的CSS选择器字符串
const box = document.querySelector('.box')
console.dir(box)
// 能够直接进行修改
box.style.color = 'red'
// 选择匹配多个元素 参数是一个或多个有效的CSS选择器字符串 返回是NodeList对象集合
const box2 = document.querySelectorAll('.box')
console.dir(box2)
// 不能直接修改 只能通过遍历的方式一次给里面的元素做修改
</script> -->
根据CSS选择器获取DOM对象(了解)
修改元素内容
1.元素innerText属性
将文本内容添加/更新到任意标签位置
显示纯文本,不解析标签
<div class="box">我是文字内容</div>
<script>
// 获取元素
const box = document.querySelector('.box')
console.log(box.innerText)//获取文字内容
box.innerText = '我是一个新的内容'// 修改文字内容
</script>
2.元素innerHTML属性
将文本内容添加/更新到任意标签位置
会解析标签,多标签建议使用模板字符
<div class="box">我是文字内容</div>
<script>
// 获取元素
const box = document.querySelector('.box')
box.innerHTML = '<strong>我是一个新新的内容</strong>'// 修改文字内容
</script>
修改元素属性
常用属性修改
最常用的属性比如href、title、src等
<img src="./images/1.webp" alt="">
<script>
// 1.获取图片元素
const pic = document.querySelector('img')
//2.修改元素的属性
pic.src = "./images/2.webp"
</script>
控制样式属性
通过style属性操作CSS
修改样式属性 对象.style.样式属性='值'。
适合修改样式比较少的情况。且生成的是行内样式,权重比较高。
<div></div>
<script>
// 1.获取元素
const div = document.querySelector('div')
// 2.修改样式属性 对象.style.样式属性='值'
div.style.width = '1000px'
div.style.backgroundColor = 'gray'//CSS中的background-color在js中写成backgroundColor
</script>
通过类名(className)操作CSS
当需要修改的样式比较多时,直接用style修改会比较繁琐,故可以借助CSS类名的形式修改。
使用CSS和JS搭配去修改样式。在JS中通过className方式将旧值修改成新值。若原本这个标签有类名,在添加新类名时,注意将原来类名也给带上。
<style>
/* 旧值 */
div {
height: 300px;
width: 300px;
background-color: aqua;
}
/* 新值 */
.box {
height: 500px;
width: 500px;
background-color: red;
}
</style>
</head>
<body>
<div class="nav"></div>
<script>
// 获取元素
const div = document.querySelector('div')
// 添加类名 使用className关键字
// 注意:原来div已有类名nav,className时也得带上原来div上的类名,不然会被覆盖,会导致
// 原来div中的类名失效
div.className = 'nav box'
</script>
通过classList操作类控制CSS【最常用】
为了解决className容易覆盖以前的类名,可以使用classList方式追加和删除类名。此方法原先的类名还存在,只是在后面追加了新的类名。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 300px;
width: 300px;
background-color: rebeccapurple;
}
.active {
background-color: aqua;
}
</style>
</head>
<body>
<div class="box">文字</div>
<script>
//通过classList去添加
// 1.获取元素
const box = document.querySelector('.box')
// 2.修改样式
// 2.1追加类add() 类名不加点,并且是字符串
box.classList.add('active')
// 2.2删除类remove() 类名不加点,并且是字符串
box.classList.remove('box')
//2.3切换类toggle() 之前有这个类就删除,之前没有这个类就加上
box.classList.toggle('box')
</script>
</body>
操作表单元素属性
1.文本框
<body>
<input type="text" value="输入">
<script>
// 1.获取元素
const uname = document.querySelector('input')
// 2.获取值 使用表单.value
console.log(uname.value)
// 3.修改值
uname.value = '修改输入'
// 4.将文本框变成密码框(输入密码时小眼睛功能)
uname.type = 'password'
</script>
</body>
2.复选框
<input type="checkbox">
<script>
// 1.获取元素
const ipt = document.querySelector('input')
// 2.勾选勾选框
ipt.checked = true
</script>
自定义属性
在H5中推出用data-自定义属性的格式去声明自定义属性。
在DOM对象中用dataset对象方式获取。
<body>
<!-- 自定义属性 data开头 -->
<div data-id="1" data-idd="11">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<script>
// 获取第一个div对象
const one = document.querySelector('div')
// 打印自定义属性的集合, 此处打印出来的是对象data-id="1" data-idd="11"
console.log(one.dataset)
// 打印某一个自定义属性,此处打印出来的是1
console.log(one.dataset.id)
</script>
</body>