这篇教程介绍了APIs的基础知识，特别是关于DOM元素的操作，包括声明变量（const和let）、获取和修改DOM元素、修改表单属性、自定义属性以及使用定时器。重点讲解了DOM选择器如querySelector和querySelectorAll，以及如何修改元素内容、样式和属性。还涉及到了类名管理和表单元素的value和type属性的修改。
APIs教程第一天，DOM元素pink老师版
一、声明变量
1.let or const
const优先使用，const在后续开发中使用场景更多比如react框架。
建议:有变量先给const 如果后续发现要修改，再改为let
语法规则如下：
//相当于给arr 套了一个新的马甲，核心没变
const arr = ['red', 'pink']
// arr.push('blue')
// console.log(arr);//√
//这里直接把核心给换了
arr = [1, 2, 3]
console.log(arr);//结果报错
二、DOM操作
1.获取DOM元素、对象
<script>
const div = document.querySelector('div')
//打印对象
console.dir(div); //dom对象
</script>
注意：querySelector获取第一个元素，querySelectorAll获取全部元素(返回的是伪数组,有长度和索引号,但是没有push等方法)
<style>
.box {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box">123</div>
<div class="box">abc </div>
<p id="nav">导航栏</p>
<ul class="nav">
<li>我的首页</li>
<li>产品介绍</li>
<li>联系方式</li>
</ul>
<script>
//获取匹配的第一个元素
// const box = document.querySelector('.box')
// console.log(box);
// const nav = document.querySelector('#nav')
// console.log(nav)
// nav.style.color = 'red'
//获取第一个小li
// const li = document.querySelector('ul li:first-child')
// console.log(li);
//获取所有的小li
// const lis = document.querySelectorAll('ul li')
// console.log(lis);
//获取元素
const lis = document.querySelectorAll('.nav li')
for (let i = 0; i < lis.length; i++) {
console.log(lis[i]) //每一个小li对象
}
const p = document.querySelectorAll('#nav')
// console.log(p);
// p[0].style.color = 'red'
</script>
</body>
二.DOM操作
1.修改对象内容
建议：使用innerText既能修改内容也能解析标签
<div class="box">我是文字的内容</div>
<script>
//获取元素
const box = document.querySelector('.box')
//修改文字内容 对象innerText属性
// console.log(box.innerText); //获取文字内容
// box.innerText = '我是一个盒子'//修改文字内容 不能解析标签！！！
console.log(box.innerHTML);
box.innerHTML = '<strong>修改内容</strong>' //能解析标签！！！一般只用innerHTML
</script>
2.修改图片元素属性
<body>
<img src="./images/1.webp" alt="">
<script>
//获取图片元素
const img = document.querySelector('img')
//修改图片对象属性 对象.属性=值
img.src = './images/2.webp'
img.title = '邓松的艺术照'
</script>
</body>
3.通过style样式修改属性
补充：
- 生成的是行内样式表，权重比较高
- 修改样式比较少的情况下有优势
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<div class="box"></div>
<script>
//获取元素
const box = document.querySelector('.box')
box.style.width = '400px' //千万要记得加单位！！！
box.style.backgroundColor = 'hotpink' //小驼峰命名法
box.style.border = '2px soild red'
box.style.borderTop = '2px soild blue'
</script>
4.通过类名修改样式
- DOM对象的className属性可控制标签class属性，操作的方式：覆盖原来类名
- 缺点：多个类名操作麻烦
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.nav {
color: red;
}
.box {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 100px auto;
padding: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="nav">123</div>
<script>
// 1. 获取元素
const div = document.querySelector('div')
// 2.添加类名 class 是个关键字 我们用 className
div.className = 'nav box'
</script>
</body>
</html>
5.通过classList属性控制样式（推荐使用）
注意：方法都要加（）且不替换原来的类名
<style>
.box {
width: 200px;
height: 200px;
color: #333;
}
.active {
color: red;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">文字</div>
<!-- 通过classList添加 -->
<script>
//获取元素
const box = document.querySelector('.box') //box是对象
//修改样式
//追加类add（）类名不加点，并且是字符串
// box.classList.add('active')
//删除类类remove（）类名不加点，并且是字符串
// box.classList.remove('box')
//切换类 toggle() 有就删掉，没有就加上
box.classList.toggle('active')
</script>
</body>
</html>
三、修改表单属性
1.修改表单属性
注意：innerHTML在这里得不到内容，只能用value
unname.type = 'password’的样式为
<body>
<!-- <input type="checkbox" name="" id="">
<button>按钮</button> -->
<input type="text" value="电脑">
<script>
// 获取元素
const unname = document.querySelector('input')
// 获取值
console.log(unname.value);
// console.log(unname.innerHTML); //innerHTML 得不到表单内容
// 设置表单的值
unname.value = '我要买电脑'
console.log(unname.type);
unname.type = 'password'
// //获取
// const ipt = document.querySelector('input')
// // console.log(ipt.checked);//false 只接受布尔值
// ipt.checked = true
// // ipt.checked = 'true'会选中，不提倡， 有隐式转换
// //获取
// const button = document.querySelector('button')
// // console.log(button.disabled);//默认不禁用
// button.disabled = true //禁用按钮
</script>
</body>
</html>
另一部分
disabled的意思是：禁止吗，需要你输入true/flase
<input type="checkbox" name="" id="">
<button>按钮</button>
<!-- <input type="text" value="电脑"> -->
<script>
// 获取元素
// const unname = document.querySelector('input')
// 获取值
// console.log(unname.value);
// console.log(unname.innerHTML); //innerHTML 得不到表单内容
// 设置表单的值
// unname.value = '我要买电脑'
// console.log(unname.type);
// unname.type = 'password'
//获取
const ipt = document.querySelector('input')
// console.log(ipt.checked);//false 只接受布尔值
ipt.checked = true
// ipt.checked = 'true'会选中，不提倡， 有隐式转换
//获取
const button = document.querySelector('button')
// console.log(button.disabled);//默认不禁用
button.disabled = true //禁用按钮
</script>
</body>
</html>
这部分的样式
2.自定义属性
注意：
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取
<body>
<div data-id="1" data-spm="不知道">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>
const one = document.querySelector('div')
console.log(one.dataset.id); //1
console.log(one.dataset.spm); //不知道
</script>
</body>
3.定时器（间歇函数）
<script>
// 1.setInterval(函数，时间间隔)
// setInterval(function () {
// console.log('一秒钟执行一次');
// }, 1000)
function fn() {
console.log('一秒钟执行一次');
}
// 2.setInterval(函数，时间间隔)函数名不要加小括号
let n = setInterval(fn, 1000)
console.log(n);
//关闭定时器
clearInterval(n)
最后一个定时器小案例
<body>
<textarea name="" id="" cols="30" rows="10">
用户注册协议
欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
</textarea>
<br>
<button class="btn" disabled>我已经阅读用户协议(5)</button>
<script>
//获取元素
const btn = document.querySelector('.btn')
//倒计时
let i = 5
//开启计时器
let n = setInterval(function () {
i--
btn.innerHTML = `我已经阅读用户协议(${i})`
if (i === 0) {
clearInterval(n)
//计时器停了 可以打开按钮
btn.disabled = false
btn.innerHTML = '同意'
}
}, 1000)
</script>
</body>
扫一扫
1940
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
