Web APIs第一天

let num = document.querySelector('.box li:last-child')
console.log(num)

let num = document.querySelectorAll('.box li')
console.log(num)

// 通过遍历方式 获取每一个dom对象/元素
let num1 = document.querySelectorAll('.box li')
for (let num1 = 0; num1 < num2.length; num1++) {
    console.log(num2[num1])
}

// 1. 根据id获取元素
let num1 = document.getElementById('num')
console.log(num1)
// 2. 根据标签获取页面所有div
let num2 = document.getElementsByTagName('a')
console.log(num2)
// 3. 根据类目获取页面所有类目
let num3 = document.getElementsByClassName('nav')
console.log(num3)

document.write('哈喽')

let num = document.querySelector('div')
num.innerText = '<h3>你好</h3>'
num.innerText = '你好呀'

let num = document.querySelector('div')
num.innerHTML = '<h3>您好啊</h3>'

// 随机名字显示标签内部
let num1 = ['赵云', '张飞', '马超', '曹操', '吕布']
let num2 = fn(0, num1.length - 1)
// 通过innerHTML写入元素内部
let num3 = document.querySelector('span')
num3.innerHTML = num1[num2]

let num = document.querySelector('img')
// 修改标签元素 图片src title href 等...
num.src = './images/1.webp'
num.title = '这是刘德华'

let num1 = document.querySelector('.img1')
let num2 = fn(1, 6)
num1.src = `./images/${num2}.webp`

// 如果有 - 连接符 转换为小驼峰命名法
let num = document.querySelector('.box')
num.style.backgroundColor = 'skyblue'
num.style.borderRadius = '10px'

// 使用ClassName修改样式 可修改多个样式 但会覆盖以前类名
let num = document.querySelector('.one')
num.className = 'one box1'

// 使用ClaaList修改样式 修改样式方便 追加删除不影响以前类名
let num1 = document.querySelector('.one1')
// add 是个方法 添加/追加
num1.classList.add('two')
// remove 移除
num1.classList.remove('two')
// toggle 切换 有就删 没有就加
num1.classList.toggle('two')

let num1 = document.querySelector('body')
let num2 = ['skyblue', 'green', 'pink']
let num3 = fn(0, num2.length - 1)
num1.style.backgroundColor = `${num2[num3]}`

<input type="text" value="请输入密码">
// 可取值/设置值 
num1.value = '请输入'
num1.type = 'password'

<button disabled>按钮</button>
<input type="checkbox" name="" class="box">
// 1. disabled/不可用
let num1 = document.querySelector('button')
num1.disabled = false 
// 2. checkbox 使用场景
let num2 = document.querySelector('.box')
num2.checked = true

setInterval(function () {
    document.write('前端')
}, 200)

function fn() {
    document.write('前端工程师<br>')
}
let num = setInterval(fn, 100)

clearInterval(num)

<textarea cols="30" rows="10">用户注册协议欢迎注册成为京东用户</textarea><br>
<button class="btn" disabled>我已阅读用户协议(6)</button>
// 1.获取 button 元素
let num1 = document.querySelector('.btn')
// 2.需要一个变量来计数
let num2 = 6
// 3.开启定时器 num3 序号id
let num3 = setInterval(function () {
    num2--
    num1.innerHTML = `我已阅读用户协议(${num2})`
    if (num2 === 0) {
        // 4.停止 清除定时器
        clearInterval(num3)
        // 5.开启 button 按钮
        num1.disabled = false
        // 6.开启后更换文字
        num1.innerHTML = '我同意用户协议'
    } 
}, 200)

<div class="box">
    <img class="img" src="images/b01.jpg">
    <div class="box1">
        <h3 class="text">挑战云歌单，欢迎你来</h3>
    </div>
</div>
let data = [
    {
      imgSrc: 'images/b01.jpg',
      title: '挑战云歌单，欢迎你来'
    }
]
// 1. 获取 图片/文字
let num1 = document.querySelector('.img')
let num2 = document.querySelector('.text')
// 2. 记录图片张数
let num3 = 0
let num4 = setInterval(function () {
    num3++
    // 3. 修改图片和文字属性
    num1.src = data[num3].imgSrc
    num2.innerHTML = data[num3].title
    // 无缝衔接 3种方法
    if (num3 === 8) {
        num3 = -1
    }
}, 200)