网站建设中模板下载,网站运营解决方案,房价下跌最惨10大城市,wordpress自定义参数查询1.声明变量const优先#xff08;补充#xff09;
2.WebAPI基本认知
作用和分类 DOM树和DOM对象
3.获取DOM元素
4.DOM修改元素内容
5.操作元素属性
6.定时器-间歇函数
一.声明变量const优先
① 变量声明有var let const
② 建议const优先#xff0c;尽量使用const…1.声明变量const优先补充
2.WebAPI基本认知
作用和分类 DOM树和DOM对象
3.获取DOM元素
4.DOM修改元素内容
5.操作元素属性
6.定时器-间歇函数
一.声明变量const优先
① 变量声明有var let const
② 建议const优先尽量使用const原因是
const语义化更好很多变量我们声明的时候就知道不会修改了就使用const实际开发中基本都使用const建议先给const如果发现后面是被修改的改为letconst声明的值不能更改const声明变量的时候需要进行初始化对于引用类型const声明的变量里面存的不是值是地址
③ const声明的对象为什么可以修改里面的属性
因为对象是引用类型里面存储的是地址只要地址不变就不会报错
二. WebAPI基本认知
① 作用和分类
作用就是使用JS去操作html和浏览器分类DOM文档对象模型 BOM(浏览器对象模型)
② DOM 概念文档对象模型是用来呈现以及与任意HTML或XML文档交互的API是浏览器提供一套专门用来操作网页内容的功能作用开发网页内容特效和实现用户交互
③ DOM树
将HTML文档以树的结构直观的表现出来我们称为文档树或者DOM树描述网页内容关系的名词作用文档树直观的体现了标签与标签之间的关系 ④ DOM对象浏览器根据html标签生成的JS对象
所有的标签属性都可以在这个对象上找到修改这个对象的属性会自动映射到标签身上
⑤ DOM的核心思想把网页内容当作对象处理
⑥ document 对象
是DOM里提供一个对象所以它提供的属性和方法都是用来访问和操作网页内容的网页所有内容都在document里面
三.获取DOM元素
① 两种方式
根据CSS选择器来获取DOM元素重点其他获取DOM元素方法了解
② 选择匹配的第一个元素 语法document.querySelector(css选择器) 参数包含一个或多个有效的CSS选择器 字符串 返回值CSS选择器匹配的第一个元素一个HTMLElement对象 如果没有匹配到则返回null
③ 选择匹配的多个元素 语法document.querySelectorAll(css选择器)
参数包含一个或多个有效的CSS选择器 字符串
返回值CSS选择器匹配到的NodeList 对象集合
举例
const lis document.querySelectorAll(ul li)
得到的是一个伪数组有长度有索引号但是没有push和pop方法
哪怕只有一个元素通过querySelectAll获取过来的也是一个伪数组里面只有一个元素
遍历
const lis document.querySelectorAll(.nav li)
for (let i 0; i lis.length; i) {console.log(lis[i]);
}
④ 其他方式 (了解) document.getElementById(nav) 通过id获取一个元素 document.getElementsByTagName(div) 根据标签获取一类元素获取页面所有div document.getElementsByClassName(w) 根据类名获取元素 获取页面所有类名为w的元素
四.DOM修改元素内容 DOM对象都是根据标签生成的所以操作标签本质上就是操作DOM对象就是操作对象使用的点语法如果想要修改标签元素的里面的内容可以使用以下方式 ① 对象.innerText属性 将文本内容添加/更新到任意标签位置显示纯文本不解析标签 ② 对象.innerHTML属性
将文本内容添加/更新到任意标签位置会解析标签多标签建议使用模板字符
const box document.querySelector(.box)
console.log(box.innerText) // 获取文字内容
box.innerText 我是一个盒子 // 修改文字内容
box.innerText strong我是一个盒子/strong // 不解析标签
// 解析标签
box.innerHTML strong我是一个盒子/strong
五.操作元素属性
1.操作元素常用属性
2.操作元素样式属性
3.操作表单元素属性
4.自定义属性
5.1 操作元素常用属性
可以通过JS设置/修改标签元素属性通过src更换图片常见的属性href title src语法对象.属性 值
const img document.querySelector(img)
img.src ./images/2.webp 5.2 操作元素样式属性
通过style 属性操作CSS通过类名className操作CSS通过classList操作类控制CSS
① 通过style属性操作CSS
语法对象.style.样式属性 值
// 1.获取元素
const box document.querySelector(.box)
// 2.修改样式属性, 多组单词采用小驼峰命名法
box.style.width 100px
box.style.backgroundColor hotpink
box.style.border 2px solid blue
注意
1.修改样式用过style属性引出
2.如果属性有-连接符需要转化成小驼峰命名法
3.在赋值的时候不要忘记加单位
② 通过类名className操作CSS
如果修改的样式比较多直接通过style属性修改比较繁琐可以借助css类名的形式语法元素.className active
const div document.querySelector(div)
// 多个类名
div.className box nav
注意
由于class是关键字所以使用className去代替className是使用新值换旧值如果需要添加一个类需要保留之前的类名
③ 通过classList 操作类控制CSS
为了解决className容易覆盖以前的类名可以通过classList的方式追加和删除类名 语法追加(add) 删除remove 有旧删除没有就增加toggle
// classList add 追加 类名不加点,并且是字符串
const box document.querySelector(.box)
box.classList.add(active)
// 删除类box.classList.remove(box)
// toggle 有就删除没有就增加
box.classList.toggle(box)
5.3 操作表单元素属性
表单很多情况也需要修改属性比如小眼睛可以看到密码本质就是把表单类型转换为文本框 获取DOM对象.属性名 表单.value 用户名 设置DOM对象.属性名 新值 表单.type password
const uname document.querySelector(input)
// 1.获取表单里面输入的数据innerHTML 得不到表单中输入的内容console.log(uname.value)
// 2.设置表单的值 innerHtml得不到表单的内容
uname.value kkkk
uname.type password
表单属性中添加就有效果移除就没有效果一律使用布尔值表示如果为true就表示添加了改属性如果为false就表示移除了该属性
const ipt document.querySelector(input)
console.log(ipt.checked)
// 只接受bool值
ipt.checked trueconst btn document.querySelector(button)
btn.disabled true
5.4 自定义属性
标准属性标签天生自带的比如class id titlt等可以直接使用点语法操作比如disabled, checked自定义属性 ① 在html5中推出专门的data-自定义属性 ② 在标签上一律以data-开头
div data-id1 data-spmhello1/div
div data-id22/div
div data-id33/div
div data-id44/div
div data-id55/div ③ 在DOM对象上一律以dataset对象方式获取
const one document.querySelector(div)
console.log(one.dataset.id)
console.log(one.dataset.spm)
六.定时器 -间歇函数
6.1 定时器函数介绍
① 每隔一段事件就需要自动执行一段代码不需要手动触发
② 定时器函数可以开启定时器和关闭定时器
1开启定时器 作用每隔一段时间调用一下这个函数 间隔时间单位是毫秒 定时器返回的是一个id数字
setInterval(函数间隔时间)setInterval(function () {console.log(一秒执行一次)
}, 1000)function fn () {console.log(一秒执行一次)
}// 调用的时候写的是函数名不要加小括号
// 不是立即执行是经过1000秒之后才执行
let n setInterval(fn, 1000)// 这样写也是可以的
// setInterval(fn(), 1000)
2关闭定时器
function fn () {console.log(一秒执行一次)
}
// 调用的时候写的是函数名不要加小括号
// 不是立即执行是经过1000秒之后才执行
let n setInterval(fn, 1000)
clearInterval(n)
