Web APl 基本认知
变量声明
const 优先，如果变量会改变，就用 let
const 声明的值 不能更改 ，而且const声明变量的时候需要里面进行 初始化 l 但是对于 引用数据类型 ，const声明的变量，里面存的不是 值，不是值，不是值，是 地址比如：
//错误写法
const girlfriend = []
girlfriend= [1,2,3]
const boy = {}
boy = {
uname: '小帅'
}
//正确写法
const girlfriend = []
girlfriend[0] = 1
girlfriend[1] = 2
girlfriend[2] = 3
const boy = {}
boy.uname = '小帅'建议： 数组 对象 用 const 声明
基本数据类型的值或者引用类型的地址发生变化的时候，需要用let
获取DOM元素
DOM 是文档对象模型 操作网页内容，可以开发网页内容特效和实现用户交 互根据CSS选择器来获取DOM元素 (重点)
注意：里面写 css选择器 必须是 字符串 ，那要加引号
1.选择匹配的第一个元素
document.querySelector('css选择器')document.querySelectorAll('css选择器')document.querySelectorAll('ul li')
//返回 ul 里面的所有 li得到的是一个 伪数组
- 有长度有索引号的数组
- 但是没有 pop() push() 等数组方法
- 想要得到里面的每一个对象，则需要遍历（for）的方式获得
操作元素内容
innerText 属性
将文本内容添加/更新到任意标签位置 显示纯文本，不解析标签<body>
<div class="money">我会月薪过万</div>
<script>
const money = document.querySelector('.money') //先获取
console.log(money.innerText)
//我会月薪过万
money.innerText = ('我会<strong>月薪过万</strong>')
</script>
</body>
innerHTML 属性
将文本内容添加/更新到任意标签位置 会解析标签，多标签建议使用模板字符money.innerHTML = (`我会<strong>月薪过万</strong>`)
操作元素属性
语法：
对象.属性 = 值
//1.获取元素
const pic = document.quertSelector('img')
//2.操作元素
pic.src = './images/01.ipj'
pic.title = '我的帅照'操作元素样式属性
1.通过 style 属性操作CSS 对象.style.样式属性 = 值 <style>
div{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<body>
<div>你好，前端，我会努力的</div>
</body>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<body>
<div>你好，前端，我会努力的</div>
<script>
const div = document.querySelector('div')
div.style.width = '200px'
div.style.backgroundColor = 'pink'
</script>
</body>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
}
.active {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid black;
font-size: 30px;
}
</style>
<body>
<div>你好，前端，我会努力的</div>
<script>
const div = document.querySelector('div')
div.className = 'active'
</script>
</body>
好处：可以同时修改多个样式
直接使用 className 赋值会覆盖以前的类名
3. 通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')操作表单元素 属性
课外知识：想要获取表单内容 用 input.value 不用 input.innerHTML
语法：表单.value = '用户名' 表单.type = 'password'<body>
<input type = 'text' value = '会赢吗'>
<script>
//老规矩，先获取
const uname = document.querySelector('input')
//设置表单的值
uname.type = 'password'
uname.value = '一定会的'
</script>
</body><input type="checkbox" checked> //默认为勾选的
<script>
const input = document.querySelector('input')
input.checked = false //现在变为不勾选了 只能用 true 或 false
input.checked = '' //空字符串 就是 false
</script><button disabled="disable">点击</button>
//当属性和值一样，就写 属性 就行
<button disabled>点击</button> //按钮被禁用了 ┭┮﹏┭┮
<script>
const button = document.querySelector('button')
console.log(button.disabled)
//true 这句话的意思是，button按钮要禁用吗？ true 对 被禁用了
button.disabled = false //放心，被我解除了，哈哈
</script>自定义属性
在html5中推出来了专门的 data-自定义属性 在标签上一律以 data-开头 在DOM对象上一律以 dataset 对象方式获取//先扩展一个开发常用的小知识
div{$}*5
//这段代码，会变成
<div data-id="520" data-ha="不知道">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<script>
const one = document.querySelector('div')
//注意，当有多个div 时，只能获得第一个，我笔记已经说了
console.log(one.dataset) //将 one 所有自定义属性 集合到一起 {id："520" ha:"不知道"}
cosole.log(one.dataset.id) //获取其中一个 结果为 520
</script>
定时器-间歇函数
作用：根据时间自动重复执行某些代码
1.开启定时器
setInterval(函数,间隔时间)function repeat() {
console.log('加油，我们会赢得，我们一起')
}
//每隔一秒调用 repeat 函数
setInterval(repeat,1000)
2. 关闭定时器
let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)//来个稍微复杂一点的，看看阁下如何应对
let timer = setInterval(function(){console.log('hi~~ 帅哥')},1000)
//有开启，一般也会 将他 关闭的
clearInterval(timer)第一天结束了，希望我们能一起走下去，
标签：Web,元素,const,APLs,javascript,div,document,类名,属性 From： https://blog.csdn.net/2301_80115241/article/details/142641949