介绍

严格意义上讲，我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系，ECMAScript 简称 ES 它提供了一套语言标准规范，如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现，并且在此基础上又扩展一些实用的功能，这些被扩展出来的内容我们称为 Web APIs。

ECMAScript 运行在浏览器中然后再结合 Web APIs 才是真正的 JavaScript，Web APIs 的核心是 DOM 和 BOM。

BOM树

声明dom对象

<body><a href="http://www.baidu.com">百度</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 = 'https://www.csdn.net/?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的使用相关推荐

JS对象迭代、事件处理器、表单控件绑定、表单复选框、表单单选按钮
JS对象迭代知识点 v-for v-for 循环JS对象,把对象内容循环显示到页面上. <div id="myApp"><h1>JS对象迭代</h1 ...
前端：JS/32/form对象（表单）（form对象的属性，方法和事件），受返回值影响的两个事件（onclick事件，onsubmit事件），获取表单的元素对象的三种方式，表单的提交和验证方法总结
form 对象(表单) 一个<form>标记,就是一个<form>对象: 1,form对象的属性 name :表单的名称,主要用来让JS来控制表单: action :表单的数据 ...
响应式web开发网页案例 ——29款表单模板
如果你正在寻找有趣的响应式web开发网页案例,那你找对地方了.本文与大家分享一下,点击图片即可下载. 1. [网页响应式开发]粉红简洁登录框表单模板大小:124 KB 下载地址:http://www ...
Web APIs --JavaScript学习笔记（总）（包括DOM、BOM）
DOM 1 基本语句获取元素: getElementByld:获取带有ID的元素对象 getElementByTagName():获取某类标签元素 getElementsByClassName('类 ...
Web APIs 简介、DOM
文章目录一.Web APIs 简介 1.Web APIs 和 JS 基础关联性 2.API 和 Web API 二.DOM 1.DOM简介 2.获取元素 (1)根据ID获取 (2)根据标签名获取 ( ...
小白JavaScript学习笔记----web APIs
目录 web API 操作DOM BOM,比如控制网页元素交互等各种网页交互效果一.web APIs第一天(DOM-获取元素) 1.1变量声明 1.2Web API 基本认知 1.2.1作用和分类 ...
JavaScript核心Web APIs
目录一.Web APIs简介 1 Web APIs和JS基础的关联性 2 MDN详细API 网址二.DOM 1 什么是DOM 1.1 DOM树 2 获取页面元素 2.1 根据ID获取 2.2 根据 ...
js Web APIs
js Web APIs DOM 获取元素获取页面元素的方法:1.根据ID获取 2.根据标签名获取 3.通过HTML5新增的方法获取 4.特殊元素获取根据ID获取使用getElemen ...
Web APIs 简介
Web APIs 简介 1 Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 JS 基础阶段我们学习的是 ECMAScript 标准规 ...

Web APIs，BOM树，声明dom对象，年会抽奖案例，随机图片，表单，用户注册倒计时，innerHTNL，classList的使用

介绍

BOM树

Web APIs，BOM树，声明dom对象，年会抽奖案例，随机图片，表单，用户注册倒计时，innerHTNL，classList的使用相关推荐

最新文章

热门文章