介绍
严格意义上讲，我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系，ECMAScript 简称 ES 它提供了一套语言标准规范，如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现，并且在此基础上又扩展一些实用的功能，这些被扩展出来的内容我们称为 Web APIs。
ECMAScript 运行在浏览器中然后再结合 Web APIs 才是真正的 JavaScript，Web APIs 的核心是 DOM 和 BOM。
BOM树
声明dom对象
<body><a href="">百度</a><script>// DOM 用于操作 html 文档 // 对 html 标签 进行 增删改查 // 对 html 标签属性 进行 增删改查 // 前提条件：需要先通过 js 的语法 获取到 对应的 html 标签 对于js来说 就是一个对象 这个对象 DOM对象 // 对象是由 属性和方法组成 // 这个标签身上 拥有什么属性 就会被 映射到 当前的 DOM 对象身上// dom对象.属性名 // 1. 需要通过 js 获取到 a标签 对于js来说 就是一个 dom 对象const a = document.querySelector('a')// console.log(typeof a)a.href = '/?spm=1011.2266.3001.4476'a.title = 'hello'</script>
年会抽奖案例
<title>年会抽奖</title><style>.wrapper {width: 840px;height: 420px;background: url(./images/bg01.jpg) no-repeat center / cover;padding: 100px 250px;box-sizing: border-box;}</style></head><body><div class="wrapper"><strong>年会抽奖</strong><h1>一等奖：<span id="one">???</span></h1><h3>二等奖：<span id="two">???</span></h3><h5>三等奖：<span id="three">???</span></h5></div><script src="./js/index.js"></script><script>const arr = ['周杰伦', '刘德华', '周星驰', 'pink老师', '张学友', '张三', '李四']const spans = document.querySelectorAll('.wrapper span')for (let i = 0; i < spans.length; i++) {const index = getRandom(0, arr.length - 1)// const a = arr[index]spans[i].innerHTML = arr[index]arr.splice(index, 1)}</script>
随机图片
<img src="./images/1.webp" alt=""><script src="./js/index.js"></script><script>// 获取1~6的随机数const sui = getRandom(1, 6)// console.log(sui);const img = document.querySelector('img')// 操作标签的 src 属性 赋值img.src = `./images/${sui}.webp`</script>
表单
<!-- <input type="text" value="李四"> --><input type="radio" checked><script>// const input = document.querySelector('input')// const value = input.value// input.value = '五五'const input = document.querySelector('input')input.checked = false
用户注册倒计时
<body><textarea name="" id="" cols="30" rows="10">用户注册协议欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看</textarea><br><button class="btn" disabled>我已经阅读用户协议(5)</button><script>const btn = document.querySelector('button')let i = 5const id = setInterval(function fn() {i--btn.innerHTML = `我已经阅读用户协议(${i})`if (i <= 0) {btn.disabled = falsebtn.innerHTML = '我同意'clearInterval(id)}
innerHTNL
<div class="box">张三</div><script>// 语法：// dom对象 innerHTML// 作用： 可以获取标签中间的内容 也可以写入内容const div = document.querySelector('.box')div.innerHTML = '李四'const str = div.innerHTMLconsole.log(str);
classList的使用
.box {width: 100px;height: 100px;background-color: pink;}.box1 {color: red;}</style></head><body><div>Hello</div><script>const div = document.querySelector('div')// 添加div.classList.add('box')// 删除div.classList.remove('box')//切换 有就删除 没有就添加div.classList.toggle('box')
Web APIs BOM树 声明dom对象 年会抽奖案例 随机图片 表单 用户注册倒计时 innerHTNL classList的使用
