2021-09-02 Day17-JS-第七天 Web APIs和DOM
一、Web APIs
1、Web APIs 和 JS 的关联
1.1 JS的组成
1.2 JS 基础阶段以及 Web APIs 阶段
JS基础阶段：
- ECMAScript 标准规定的基本语法
- 基础语法做不了常用的网页交互效果
Web APIs 阶段：
- Web APIs 是W3C组织的标准
- Web APIs 是JS 所独有的
- 主要就是页面交互效果
2、API 和 Web API
2.1 API
API（Application Programming Interface,应用程序编程接口是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
简单理解： API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
比如手机充电的接口：
- 不需要关心手机内部变压器，内部怎么存储电等
- 不需要关心这个充电线怎么制作的
- 只需要知道拿着充电线插进充电接口就可以充电
- 这个充电接口就是一个 API
2.2 Web API
Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。
MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API
二、 DOM
1、DOM 简介
1.1 什么是DOM
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
1.2 DOM 树
- 文档：一个页面就是一个文档，DOM 中使用 document 表示
- 元素：页面中的所有标签都是元素，DOM 中使用 element 表示
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
DOM 把以上内容都看做是对象。
2、获取元素
2.1 如何获取页面元素
DOM在实际开发中主要用来操作元素。
获取页面中的元素可以使用以下几种方式：
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方法获取
- 特殊元素获取
2.2 通过ID获取
使用 getElementById() 方法可以获取带有ID的元素对象。
document.getElementById('id');
使用 console.dir() 可以打印获取的元素对象，更好的查看对象里面的属性和方法。
2.3 通过标签名获取
使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合 (伪数组) 。
document.getElementByTagName('标签名');
注意：
- 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
- 得到元素对象是动态的
- 如果获取不到元素,则返回为空的伪数组(因为获取不到对象)
还可以获取某个元素(父元素)内部所有指定标签名的子元素。
element.getElementByTagName('标签名');
注意：父元素必须是单个对象(必须指明是哪一个元素对象)，获取的时候不包括父元素自己。
2.4 通过HTML5新增的方法获取
1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
3. document.querySelectorAll('选择器'); // 根据指定选择器返回
注意：
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’#nav’);
2.5 获取特殊元素(body，html)
2.5.1 获取body
doucumnet.body // 返回body元素对象
2.5.2 获取html
document.documentElement // 返回html元素对象
3、事件基础
3.1 事件概述
JavaScript 使程序员有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解： 触发— 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
3.2 事件三要素
- 事件源(谁)
- 事件类型(什么事件)
- 事件处理程序(做什么)
例如：
<body><button id='btn'>唐伯虎</button><script>let btn = document.getElementById('btn');btn.onclick = function() {alert('秋香来了');}</script>
</body>
3.3 执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采取函数赋值形式)
3.4 常见的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标左键点击触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
4、 操作元素
JavaScript 的 DOM 操作可以改变网页内容、结构和样式，程序员可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性
4.1 改变元素内容
element.innerText
从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉
element.innerHTML
起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行
4.2 常用元素的属性操作
- innerText、innerHTML 改变元素内容
- src、href 改变路径
- id、alt、title 改变其内容
案例： 分时显示不同图片,显示不同问候语
要求：
根据不同时间，页面显示不同图片，同时显示不同的问候语。
如果上午时间打开页面，显示上午好，显示上午的图片。
如果下午时间打开页面，显示下午好，显示下午的图片。
如果晚上时间打开页面，显示晚上好，显示晚上的图片。
分析：
- 根据系统不同时间来判断，所以需要用到日期内置对象
- 利用多分支语句来设置不同的图片
- 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
- 需要一个div元素，显示不同问候语，修改元素内容即可
代码：
<body><img src="data:images/s.gif" alt=""><div>上午好</div><script>//1.获取元素let div = document.querySelector('div');let img = document.querySelector('img');//2.得到当前时间let date = new Date();let h = date.getHours();//3.判断小时数改变图片路径和文字信息if (h < 12) {img.src = "images/s.gif";div.innerHTML = '上午好！';} else if (h < 18) {img.src = "images/x.gif";div.innerHTML = '下午好！';} else {img.src = "images/w.gif";div.innerHTML = '晚上好！';}</script>
</body>
4.3 表单元素的属性操作
利用DOM 可以操作如下表单元素的属性：
type\ value\checked\selected\disabled
<body><button>按钮</button><input type="text" value="输入内容"><script>let btn = document.querySelector('button');let inp = document.querySelector('input');btn.onclick = function() {inp.value = '被点击了';//disabled 是禁用某个表单 this指向的是事件函数的调用者this.disabled = true;}</script>
</body>
案例：显示隐藏密码
<body><div class="box"><label for=""><img src="data:images/close.png" alt=""></label><input type="password" name="" id=""></div><script>let img = document.querySelector('img');let ipt = document.querySelector('input');let flag = 0;img.onclick = function() {if (flag == 0) {ipt.type = 'text';img.src = 'images/open.png';flag = 1;} else {ipt.type = 'password';img.src = 'images/close.png'flag = 0;}}</script>
</body>
4.4 样式属性操作
可以通过JS 修改元素的大小、颜色、位置等样式
1. element.style 行内样式操作2. element.className 类名样式操作
注意：
- JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
- JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高
- 如果样式修改较多，可以采取操作类名方式更改元素样式。
- class因为是个保留字，因此使用className来操作元素类名属性
- className 会直接更改元素的类名，会覆盖原先的类名。
操作元素总结
2021-09-02 Day17-JS-第七天 Web APIs和DOM相关推荐
- 【财经期刊FM-Radio｜2021年02月23日】
title: [财经期刊FM-Radio|2021年02月23日] 微信公众号: 张良信息咨询服务工作室 [今日热点新闻一览↓↓] 纳指跌超2%,科技股领跌,道指收涨,能源领衔走高,金银油铜高涨,伦铜 ...
- 2021.09.27 MySQL笔记
2021.09.27 MySQL笔记 文章目录 2021.09.27 MySQL笔记 一.展示当前存在的所有数据库 二.使用(选中)一个数据库 三.创建一个数据表 四.查询并展示该数据库内的所有数据表 ...
- 2021年大数据Kafka（七）：Kafka的分片和副本机制
全网最详细的大数据Kafka文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 系列历史文章 Kafka的分片和副本机制 一.分片机制 二.副本机制 三. ...
- 2021年大数据HBase（七）：Hbase的架构！【建议收藏】
全网最详细的大数据HBase文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 系列历史文章 前言 Hbase的架构 一.Client 二.Master ...
- 2021年大数据Hive（七）：Hive的开窗函数
全网最详细的Hive文章系列,强烈建议收藏加关注! 后面更新文章都会列出历史文章目录,帮助大家回顾知识重点. 目录 系列历史文章 前言 Hive的开窗函数 一.窗口函数 ROW_NUMBER,RANK ...
- 橘子CPS联盟操作手册2021.09
橘子CPS联盟操作手册2021.09 目录 橘子CPS联盟操作手册2021.09 橘子CPS联盟是干嘛的 橘子CPS基本操作流程 PC端操作 1.注册 2.登陆 3.渠道管理 4.分享网站 5.分享网 ...
- 实习日志 （2021.09.13）
2021.09.13星期一 今天把之前的算法题终于给弄明白了,并能够按照自己的思路去把他给完成,总结这个题目并不是很难,最重要的是要把链表给弄懂,一开始由于我对链表不是很熟悉,导致我在写该题目的时候花 ...
- 2021.09青少年软件编程（Python）等级考试试卷（三级）
2021.09青少年软件编程(Python)等级考试试卷(三级) 一.单选题(共25题,每题2分,共50分) 1.使用map函数可以实现列表数据元素类型的转换,而无需通过循环.则将列表L=['1',' ...
- 2021企业薪酬管理咨询设计七步曲
管理咨询公司在给企业做薪酬管理咨询的过程中,经常会发现以下特别常见的问题: 1.员工不知道公司是因为什么付的薪酬; 2.关键岗位薪资明显低于行业水平,或者同地区水平,造成人才流失; 3.新老员工薪酬矛 ...
最新文章
- 13.组合查询--SQL
- 一个简单好用的Android Tab 设计与实现
- 蓝桥杯来了？最后节点了，这不得共享一波资源？
- PHP初级学习之PHP文件
- JAVA-2NIO之Channel
- js 字符串、数值之间的转换
- HTTP 请求返回代码含义
- HDOJ-1232 畅通工程
- LeetCode 893 Groups of Special-Equivalent Strings 解题报告
- 【51单片机】利用烧录软件生成延时函数 入门学习
- voice VLAN配置案例
- php 斜杠日期 转日期,php日期转时间戳 指定日期转换成时间戳
- ios模拟器 安装ipa_用iOS模拟器安装App的方法
- 散热风扇是吹风还是吸风，配电柜电气柜机柜散热风扇的原理。
- CSS 文字样式 第二节
- 第二次作业——时事评论
- 可道云需要配置MySQL吗_可道云kodexplorer搭建私有云后的配置优化
- 测试的发展前景怎么样？
- Postman配置token进行测试
- 海思Hi3559AV100将caffemodel转为wk文件