初识WEB api 和 倒计时
DOM（文档对象模型）
DOM 文档对象模型，是呈现以及任意HTML和XML文档交互的API DOM是一个对象，用来操作网页 例如改变网页内容，样式等
获取第一个文档对象的语法：document.querySelector
获取所有的文档对象的语法：document.querySelectorAll(`获取所有的li`) //获取所有的元素
使用id选择器获取一个文档：document.getElementById(`id选择器的名字`) //id选择器的名字
console.log(document) //最大的对象 console.dir(document) //最大的对象 console.log(document.hidden) console.log(document[`title`]) // document.querySelector(`快速获得第一个元素`) const div = document.querySelector(`.txt`) console.log(div) //会把div和123都获取过来 // document.querySelectorAll(`获取所有的li`) //获取所有的元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div class="div">abc</div> <div class="div">123</div> <p id="nav">456</p> <ul> <li>测试1</li> <li>测试2</li> <li>测试3</li> </ul> <center> const a = document.querySelector(`div`) //多个相同的只能获取第一个 <br> const c = document.querySelectorAll(`li`) //获取所有的li，但是他是一个伪数组 有序的储存 有索引，有length属性，没有真实数组的方法 pop <br> document.getElementById(`id选择器的名字`) //id选择器的名字 <br> document.getElementsByName(``)//根据标签名获取多个元素对象 <br> document.getElementsByClassName(``)//根据类型获取多个元素对象 <br> </center> <script> const a = document.querySelector(`div`) //只能获取第一个 console.log(a) a.style.color = `red` const b = document.querySelector(`#nav`) console.log(b) const c2 = document.querySelector(`ul li:nth-child(2)`) console.log(c2) const c = document.querySelectorAll(`li`) //获取所有的li，但是他是一个伪数组 有序的储存 有索引，有length属性，没有真实数组的方法 pop console.log(c) // c.push(1) // console.log(c) //报错 for (let i = 0; i < c.length; i++) { console.log(c[i]) c[i].style.color = `pink` //修改的时候，需要对每一项修改，不可以一下全部修改 } document.getElementById(`id选择器的名字`) //id选择器的名字 document.getElementById(`nav`) document.getElementsByName(``)//根据标签名获取多个元素对象 document.getElementsByClassName(``)//根据类型获取多个元素对象 </script> </body> </html>
操作元素文档属性
首先获取到对应的元素，然后对对应的元素进行修改
属性名称.修改语法
innerText 修改文字属性
innerHTML修改文字属性 / /我们使用innerHTML多一些，因为可以识别网页中的标签文档
innerText 修改文字属性 <br> innerHTML 修改页面属性 <br> <div class="box">我是文字内容</div> <script> const a = document.querySelector(`.box`) console.log(a) console.dir(a) a.innerText = `我要去干饭` console.log(a) a.innerHTML = `<h1>我不去干饭了</h1>`
</script>
操作图片属性
获取图片的额元素属性语法：获取的元素属性名称.src
<img src="./img/老八1.jpeg" alt=""> <script> const img = document.querySelector(`img`) // 修改图片src 重新给图片赋值 img.src = `./img/老八10.jpeg` img.title = `老八蜜汁小憨包` </script>
通过使用style操作元素样式的属性
使用style修改元素属性的语法是：属性名.style.需要修改的属性 = `需要修改的属性样式`
<div class="box">干饭了</div> <script> "use strict" const box = document.querySelector(`.box`) console.log(box) // 使用styler属性进行样式修改 // 多个单词采用驼峰命名法 box.style.color = `#ffffff` box.style.backgroundColor = `pink` box.style.border = `1px solid #999` </script>
修改元素的类名
覆盖元素当前类名的元素：className
元素名.className = `新的元素名` / / 这样使用的话，新的元素名会覆盖掉现在的元素名
元素名.className = `新的元素名 旧的元素名` / / 这样使用的话，新的元素名是添加在旧的元素名后边
对当前元素的类名进行深度修改：classList
增加一个新的类名：元素名称.classList.add（`需要添加的类名`）
删除一个存在的类名：元素名称.classList.remove（`需要删除的类名`）
切换一个类名：元素名称.classList.toogle（`需要切换的类名`） 这里的切换时，如果当前元素有这个类名就会删除，如果这个元素没有这个类名就会添加
<div class="nav sex">123</div> <script> const nav = document.querySelector(`.nav`) console.log(nav) //这里的className相当于class //覆盖之前的类名，如果不想覆盖掉之前的类名需要把之前的类名也加上 nav.className = `box` nav.className = `nav box` // 使用classList修改元素属性 const div = document.querySelector(`.nav`) console.log(div) // 添加类名 div.classList.add(`div2`) console.log(div) // 删除类名 div.classList.remove(`div2`) console.log(div) // 切换类名 如没有就添加类名，如果有就删除掉类名 div.classList.toggle(`sex`) // console.log(div) </script>
操作表单元素的属性
操作text文档元素：value
<!--<input type="text" name="" id="" value="睡觉,干饭,打豆豆">-->
<script>
// const ipt = document.querySelector(`input`)
// console.log(ipt)
// 修改表单内的内容
// value
// ipt.value = `敲代码`
</script>
操作check多选状态的语法：check = true（默认选中）/false（默认不选中）
<!--<input type="checkbox">--> // 选中状态 checked 属性是否选中 // const input = document.querySelector(`input`) // input.checked = true //选中 // input.checked = false //不选中
操作button按钮的语法：disabled = ture（默认选中不可以点击）/false（未选中可以点击）
<button>点击</button>
<script>
// button按钮
const btn = document.querySelector(`button`)
btn.innerHTML = `改变`
// button按钮是否可点击,disabled
btn.disabled = true //不可以点击
btn.disabled = false //可以点击
</script>
自定义属性
自定义属性：自己定义一个类名属性，标签中添加一个属性类名data - 名称 = `属性`，获取我们自定义的属性 获取元素，元素名称.datdaset.名称，获取我们定义的属性
<center> 当需求满足不了,然后会使用自定义属性 <br> data-开头,写一个自己定义的属性,可以让js识别 <br> 获取方法 <br> 首先获取元素,然后获取,获取语法dataset获取过来,获取一组对象集合 <br> 获取的元素的名称.dataset;这里会以对象的方式打印出来 <br> 获取的元素的名称.dataset.自己定义的属性名称 <br> </center> <div data-id="color">1</div> <div class="box" data-color="color">2</div> <div class="box1" data-height="高度">3</div> <div>4</div> <div>5</div> <div>6</div> <script> const div = document.querySelector(`div`) console.log(div.dataset) //获取所有的自定义属性 console.log(div.dataset.id) //获取自定义的id属性 const box = document.querySelector(`.box`) // console.log(box) console.log(box.dataset) console.log(box.dataset.color) const box1 = document.querySelector(`.box1`) console.log(box1.dataset) console.log(box1.dataset.height) </script>
重点计时器以及倒计时
开启计时器，计时器的作用，相隔相同的时间，执行函数事件
开启计时器有三种方法：
关闭计时器：clearInterval(定时器ID) 如果想关闭定时器，一定要给定时器加一个名字
setInterval(function () { <br>
代码体 <br>
},时间间隔) <br>
setInterval(fn,1000) 这里写函数名和时间间隔<br>
function fn() { <br>
console.log(`执行`) <br>
} <br>
setInterval(`fn()`,1000) //这样写每次打印的时候,会换行执行 如果加上小括号一定要用字符串给包裹起来 <br>
function fn() { <br>
console.log(`执行`) <br>
} <br>
关闭定时器 <br>
clearInterval(定时器ID)
<script>
// 代码结构
// setInterval(function () {
// 代码体
// },时间间隔)
// setInterval(function () {
// console.log(`每秒执行一次`)
// },1000 )
// setInterval(fn,1000) //单行循环
// function fn() {
// console.log(`执行`)
// }
// setInterval(`fn()`,1000) //这样写每次打印的时候,会换行执行
// function fn() {
// console.log(`执行`)
// }
// let i = 0
// let a = setInterval(function () {
// i++
// console.log(i)
// console.log(`每秒执行一次`)
// },1000 )
// clearInterval(a)
let i = 6
let a = setInterval(function () {
i--
if (i === 1) {
clearInterval(a)
}
console.log(`1`)
},1000)
</script>
浙公网安备 33010602011771号