WebApis学习笔记 更新完毕 2022最新黑马程序员
Web Apis第一天
Dom获取&属性操作
WebAPi基本认知
作用和分类
作用:使用JS去操作html和浏览器
分类:DOM(文档对象模型) BOM(浏览器对象模型)
什么是DOM
用来呈现以及与任意HTML或XML文档交互的API
DOM是浏览器提供的一套专门用来操作网页内容的功能
DOM作用:开发网页内容特效和实现用户交互
DOM树
将HTML文档以树状结构直观的表现出来,称为文档树或DOM 描述网页内容关系的名词
作用:文档树直观的体现了标签与标签之间的关系
DOM对象 重
浏览器根据html标签生成的Js对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上
DOM的核心思想 ==> 把网页内容当作 对象 来处理
document对象 ==> 是DOM里提供的一个对象 所以它提供的属性 和方法都是 用来访问和操作网页内容的 如 document.write()
网页所有内容都在document 里面
获取DOM对象 重
根据CSS选择器来获取DOM元素(重点)
查找元素DOM元素就是利用Js选择页面中标签元素.
1.选择匹配的第一个元素
document.querySelector('css选择器')
query ==>查询 Selector选择
参数 包含一个或多个有效的CSS选择器 字符串
返回值 CSS选择器匹配的 第一个元素 一个HTML Element对象 没匹配到返回null
选择匹配的多个元素:
document.querySelectorAll('css选择器')
参数 包含一个或多个有效的CSS选择器 字符串
返回值 CSS选择器匹配的 NodeList对象集合
得到的是一个 伪数组: ==>又长度又索引号的数组 但是没有pop() push()等数组方法
想要得到里面的每一个对象, 需遍历(for)的方式获得
其他获取DOM元素方法(了解)
// 根据id获取一个元素
document.getElementById('nav')
// 根据 标签获取 一类元素 获取页面 所有div
document.getElementsByTagName('div')
// 根据 类名获取元素 获取页面 所有类名为 w的
document.getElementsByClassName('w')
操作元素内容
对象 .innerText属性
元素 innerText属性 ==> 将文本内容添加/更新到任意标签位置 == 显示纯文本 不解析标签
对象innerHTML属性
将文本内容添加/更新到任意标签位置 == 会解析标签 多标签建议使用模板字符
操作元素属性
操作元素常用属性
可以通过JS设置/修改 标签元素属性 比如通过 src更换 图片
最常见的属性比睿:href title src等
语法:
对象.属性 = 值
举例说明:
// 1 获取元素
const pic = document.querySelector('img')
// 2 操作元素
pic.src = './images/b01.jpg'
[ic.title = '刘德华黑马演唱会'
操作元素样式属性
通过JS设置 / 修改标签元素的样式属性
==> 通过 轮播图小圆点自动更换颜色样式
==> 点击按钮可以滚动图片 这是移动的图片位置left等等
通过style属性操作CSS
语法:
对象.style.样式属性 = 值
通过类名操作CSS
如果修改的样式比较多,直接通过style属性修改比较繁琐 我们可以通过借助于css类名的形式
// 语法:
// active 是一个css类名
元素.className = 'active'
注: 由于class是关键字 所以使用className代替 == className是使用新值换旧值 如需添加一个类 要保留之前的类名
通过classList操作类控制CSS 常用
为了解决className 容易覆盖以前的类名,我们可以通过calssList方式追加和删除类名
// 语法:
// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')
操作表单元素 属性
表单很多情况 需要修改属性 比如点击眼睛可以看到密码 本质是把表单类型转为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别
获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值
表单.value = '用户名'
表单.type = 'password'
表单属性中添加就有效果 移除就没效果 一律使用布尔值表示 如果为true 代表添加了该属性 如果是false代表移除了该属性
比如 disabled ==> 禁用吗?
checked ==> 勾选
selected ==> 下拉菜单
<script>
// 接收布尔值
// 1 获取
const input = document.querySelector("input");
// console.log(input.checked); // false 只接收布尔值
input.checked = true; // 勾选
// input.checked = "true"; // 会选中 不提倡 有隐式转换
// 1 获取
const button = document.querySelector("button");
// 默认false 不禁用 disabled ==> 禁用吗?
// console.log(button.disabled);
button.disabled = true; // 禁用按钮
</script>
自定义属性
标准属性: 标签天生自带的属性 比如 class id title 等 可以直接使用点语法操作 比如 disabled checked selected
自定义属性:
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
<body>
<div class="box" data-id="10">盒子</div>
<script>
const box = document.querySelector('.box')
console.log(bix.dataset.id)
</script>
</body>
<script>
// 自定义属性
const one = document.querySelector("div");
// 怎么拿到自定义属性
console.log(one.dataset.id); // 想获取里面的1 加一个.id
console.log(one.dataset.sm); // 打印出什么
</script>
定时器-间歇函数
定时器函数可以开启和关闭定时器
1 开启定时器
setInterval(函数,间隔时间)
作用:每间隔多少时间 调用这个函数 ==> 间隔时间单位是毫秒 ms
定时器返回的是一个id数字
2 关闭定时器