Web API基本认知
作用和分类
作用:
就是使用JS去操作html和浏览器
分类:
DOM(文档对象模型),BOM(浏览器对象模型)
什么是DOM
DOM(Document Object Model------文档对象模型)是用来呈现以及任意HTML或XML文档交互的API
白话文:DOM是浏览器提供的一套专门用来操作网页内容的功能
DOM作用:开发网页内容特效和实现用户交互
DOM树
DOM数是什么:
将HTML文档以树状结构直观的表现出来,我们称之为文档树或者DOM树
描述网页内容关系的名词
作用:文档树直观的体现了标签与标签之间的关系
DOM对象(重要)
DOM对象:浏览器根据html标签生成的JS对象
所有是标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上
DOM的核心思想
把网页内容当作对象来处理
document对象
是DOM里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的 例:document.write()
网页所有内容都在document里面
获取DOM对象
选择匹配的第一个元素document.querySelector('css选择器')
注意:括号里必须是字符串,必须加引号
作用:选择匹配的第一个元素
语法:document.querySelector('css选择器')
参数:包含一个或多个有效的css选择器 字符串
返回值:css选择器匹配的第一个元素,一个HTMLElement对象,如果没有匹配到,则返回null
<body>
<div>1234556</div>
<script>
let inpuDom = document.querySelector('div')
console.dir(inpuDom)
</script>
</body>
选择匹配的多个元素document.querySelectorAll('选择器')
作用:选择匹配的多个元素
语法:document.querySelectorAll('选择器')
参数:包含一个或多个有效的css选择器 字符串
返回值:css选择器匹配的NodeList对象集合,伪数组
伪数组:
有长度有索引号的数组
但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（如for)的方法获得
没有获取到对象会返回一个空伪数组
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
let lis = document.querySelectorAll('li')
//获取多个元素的使用,lis是一个伪数组
for (let index = 0; index < lis.length; index++) {
lis[index].innerText = `这是第${index}个`
}
console.log(lis);
//没有获取到对象会返回一个空伪数组
let lis1 = document.querySelectorAll('div')
console.log(lis1);
</script>
</body>
其他方式获取DOM元素的方法
设置修改DOM元素内容
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。
就是操作对象使用的点语法。
document.write()
只能将文本内容追加到前面的位置,文本中包含的标签会被解析
元素innerText属性
将文本内容添加/更新到任意标签位置,文本中包含的标签不会被解析
元素.innerHTML属性
将文本内容添加/更新到任意标签位置,文本中包含的标签会被解析
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script>
//以后用的少,只能把标签写在/body 标签上面
document.write(`<button>1</botton>`)
//只能设置文本不能解析字符串
document.querySelector('li:nth-child(2)').innerText = `<button>随便</button>`
//**可以设置文本,也可以解析字符串
document.querySelector('li:nth-child(3)').innerHTML = `<button>随便</button>`
</script>
</body>
设置修改元素常用属性
l还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
最常见的属性比如： href title src等
语法:对象.属性 = 值
设置修改元素样式属性
通过style属性操作css
语法:对象.style.样式属性 = 值
<body>
<div>12124234</div>
<script>
//1获取元素
let div = document.querySelector('div')
//2开始修改
div.style.fontSize='100px'
div.style.color='yellow'
div.style.backgroundColor='pink'
div.style.height='200px'
</script>
</body>
注意：
1.修改样式通过style属性引出
2.如果属性有-连接符，需要转换为小驼峰命名法
3.赋值的时候，需要的时候不要忘记加css单位
操作类名(className)操作css
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
语法: 元素.className = 'active' //active是一个css类名
注意
1.由于class是关键字, 所以使用className去代替
2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
<style>
.x {
height: 200px;
background-color: aqua;
}
.y {
color: #986;
font-size: 60px;
}
</style>
</head>
<body>
<div>1232114</div>
<script>
//获取div
let div = document.querySelector('div')
//通过.className来设置类名
//同时设置两类上去拿空格隔开
div.className = 'x y'
</script>
</body>
通过classList操作类控制css
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
<style>
.di {
color: #666;
}
.d2 {
background-color: #346;
}
.d3 {
font-size: 60px;
}
.d4 {
height: 100px;
width: 200px;
border: 3px solid #985;
}
</style>
</head>
<body>
<div class="d4">112214</div>
<script>
let div = document.querySelector('div')
//添加 一个类,可以一次添加多个,用逗号隔开
div.classList.add('di','d2','d3')
//指定移除一个类
div.classList.remove('di','d2')
//切换(如果本来有就移除,没有就添加)
div.classList.toggle('d2')
</script>
</body>
设置修改表单元素属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别
获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值
1 设置普通的输入框 input.value ="表单的值"
2 设置 按钮的禁用
button.disabled=true 禁用
button.disabled=false 启用
3 设置单选框或者复选框
radio.checked=true 选中
checkbox.checked=false 取消选中
4 设置下拉列表 select
option.selected=true 选中
<body>
<input type="text" class="username" />
是否同意协定
<input type="checkbox" class="isarg" checked />
<button class="code" disabled>发送验证码</button>
<select class="sel">
<option>去泰国</option>
<option>去非洲</option>
<option>去印度</option>
<option>去啊富汗</option>
</select>
<script>
/*
innerText innerHTML 主要是用来设置 双标签的文本内容的
*/
// 获取一下表单 dom元素
let username = document.querySelector('.username');
let isarg = document.querySelector('.isarg');
let code = document.querySelector('.code');
// 设置文本内容
// username.innerText = '我的用户名';
// 设置输入框的文本内容
username.value = '我的用户名';
code.disabled = false; // 启用
let option = document.querySelector('option:nth-child(4)');
// option.select = true; // 错误的单词不会报错
option.selected = true; // 正确的单词
</script>
</body>
文本域标签
<body>
<textarea name="" id="" cols="30" rows="10"><h1>你好</h1></textarea>
<script>
// 获取 文本域标签
// 属于表单元素 又是双标签
let textarea = document.querySelector('textarea');
// 在html想要设置 文本域的内容 直接在标签内写即可
// <textarea> 你好 </textarea>
// 获取文本域中的值
// console.log(textarea.value); // 获取 OK <h1>你好</h1>
// console.log(textarea.innerText); // 获取 不OK
// console.log(textarea.innerHTML); // 获取 OK <h1>你好</h1>
// value 有区别 innerHTML
// 设置 textarea 里面文本的内容的时候
// 可以选择 在标签内写文本即可
// 想要获取 内容
// .value 原样获取内容
// .innerHTML 获取的内容如果包含html 会转移
// 通过js的方式来设置内容
//textarea.value=`<h1>标题</h1>`; // ok
// textarea.innerText=`<h1>标题</h1>`; // ok
// textarea.innerHTML=`<h1>标题</h1>`; // ok
</script>
</body>
定时器
网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
例如：网页中的倒计时
要实现这种需求，需要定时器函数
开启定时器
关闭定时器
<script>
let index = 0
//创建定时器的同时.返回了定时器id
let timeId = setInterval(function () {
index++
console.log('开始追了',index);
//判断是否满足条件
if (index===30) {
//结束(定时器的变量名)
clearInterval(timeId)
}
},100)//这里是毫秒,1000毫秒等于一秒
</script>
