JavaScript核心Web APIs

   Web APIs阶段：
       Web APIs 是w3c组织的标准
       Web APIs 我们主要学习 DOM 和 BOM
       Web APIs 是我们JS所独有的部分
       我们主要学习页面交互功能
       需要使用JS基础的课程内容做基础
   API ：
   API(Application Programming Interface)之主要目的是提供应用程序与开发人员以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。提供API所定义的功能的软件称作此API的实现。API是一种接口，故而是一种抽象。
   是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
   Web APIs：
   Web APIs 是浏览器提供的一套操作浏览器功能和页面元素的API（DOM 和 BOM）。现阶段我们主要针对于浏览器讲解常用的API，主要针对浏览器做交互效果。

2 MDN详细API 网址

MDN详细API:
https://developer.mozilla.org/zh-CN/docs/Web/API

二、DOM

1 什么是DOM

文档对象模型（Doucument Object Model，简称DOM），是w3c组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

1.1 DOM树

   文档：一个页面就是一个文档，DOM中使用document表示
   元素：页面中的所有标签都是元素，DOM中使用element表示
   节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。

2 获取页面元素

2.1 根据ID获取

使用getElementById()的方法可以获取带有ID的元素对象。


    <div id="time"> 2022 div>
    <script>
        // 1. 因为我们文档页面从上往下加载，所以先得有标签 所以script写到标签下面
        // 2. get 获取element 元素 by 通过   驼峰命名法
        // 3. 参数 id 是大小写敏感的字符串
        // 4. 返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 5. console.dir 打印我们返回的元素对象  更好的查看里面的属性和方法
        console.dir(timer);
    script>

2.2 根据标签名获取

getElementsByTagName()方法可以返回带有指定标签名的对象的集合。


    <body>
        <ul>
            <li> 许嵩11 li>
            <li> 许嵩22 li>
            <li> 许嵩33 li>
            <li> 许嵩44 li>
            <li> 许嵩55 li>
        ul>
        <ol id="ol">
            <li> 嵩11 li>
            <li> 嵩22 li>
            <li> 嵩33 li>
            <li> 嵩44 li>
            <li> 嵩55 li>
        ol>
        <script>
            // 1. 返回的是 获取过来的元素对象的集合 以伪数组的形式存储的
            var lis = document.getElementsByTagName('li');
            console.log(lis);
            console.log(lis[0]);
            // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式  得到元素是动态的
            for (var i = 0; i < lis.length; i++){
                console.log(lis[i]);
            }
            // 3. 如果页面中只有一个li  返回的还是伪数组的形式
            // 4. 如果页面中没有这个元素 返回的是一个空的伪数组
            // 5. 还可以获取某个元素（父元素）内部所有指定标签名的子元素。 element.getElementsByTagName('标签名');
            // 6. 注意：父元素必须是单个对象（必须指明是哪一个元素对象）获取的时候不包括父元素自己
            //var ol = document.getElementsByTagName('ol');
            //console.log(ol[0].getElementsByTagName('li'));
            var ol = document.getElementById('ol');
            console.log(ol.getElementsByTagName('li'));
        script>
    body>

2.3 通过HTML5新增的方法获取


	<body>
		<div class = "box"> 盒子 div>
		<div class = "box"> 盒子 div>
		<div id = "nav">
			<ul>
				<li> 首页 <li>
				<li> 产品 <li>
			ul>
		div>
		<script>
			// 1. document.getElementsByClassName('类名');根据类名返回元素对象集合
			var boxs = document.getElementsByClassName('box');
			console.log(boxs);
			// 2. document.querySelector('选择器'); 返回指定选择器的第一个元素 切记 里面的选择器需要加符号  类加.  .box id加#   #nav
			var firstBox = document.querySelector('.box');
			console.log(firstBox);
			var nav = document.querySelector('#nav');
			console.log(nav);
			var li = document.querySelector('li');
			console.log(li);
			// 3. document.querySelectorAll('选择器'); 根据指定选择器返回所有元素对象 
			var allBox = document.querySelectorAll('.box');
			console.log(allBox);
			var lis = document.querySelectorAll('li');
			console.log(lis);
		script>
	body>

2.4 获取特殊元素 body html


	<body>
		<script>
			// 1. 获取body元素
			var bodyEle = document.body;
			console.log(bodyEle);
			console.dir(bodyEle);
			// 2. 获取html元素
			//var htmlEle = document.html; // undefined
			var htmlEle = document.documentElement;
			console.log(htmlEle);  
		script>
	body>

3 事件基础

3.1 事件三要素

    JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
   简单理解：触发——响应机制
   网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某一个按钮时产生一个事件，然后去执行某些操作。


	<body>
		<button>许嵩button>
		<script>
			//  点击一个按钮，弹出对话框
			// 1. 事件是由三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
			// (1) 事件源 事件被触发的对象   谁  按钮
			var btn = document.getElementById('btn');
			// (2) 事件类型  如何触发  什么事件 比如鼠标点击（onclick） 还是鼠标经过 还是键盘按下
			// (3) 事件处理程序 通过一个函数赋值的方式 完成
			btn.onclick = function(){
				alert('许嵩');
			}
		script>
	body>

3.2 执行事件的步骤

    1.获取事件源
   2.注册事件（绑定事件）
   3.添加事件处理程序（采取函数赋值形式）


	<body>
		<div>许嵩div>
		<script>
			//  执行事件步骤
			// 点击div控制台输出 许嵩
			// (1) 获取事件源 
			var div = document.querySelector('div');
			// (2) 事件类型  注册事件（绑定事件）
			// div.onclick
			// (3) 事件处理程序 通过一个函数赋值的方式 
			div.onclick = function(){
				alert('许嵩');
			}
		script>
	body>

4 DOM操作元素

DOM操作可以改变网页的内容、结构和样式。我们可以利用DOM操作元素来改变元素里面的内容、属性等。

4.1 改变元素内容

    element.innerText
   从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
   element.innerHTML
   起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行


	
		<button> 许嵩 显示当前系统时间 button>
		<div> 某个时间 div>
		<p> 123 p>
		<script>
			//  当点击了按钮，div里面的文字会发生变化
			// (1) 获取元素 
			var btn = document.querySelector('button');
			var div = document.querySelector('div');
			// (2) 事件类型  注册事件（绑定事件）
			btn.onclick = function(){
				//div.innerText = '2022-7-24';
				div.innerText = getDate();
			}
			function getDate(){
				var date = new Date();
				// 我们写一个 2019年 5月 1日 星期三
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var dates = date.getDate();
				var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
				var day = date.getDay();
				return '今天是：' + year + '年' + month + '月' + date + '日' + arr[day];
			}
			// 我们元素可以不用添加事件
			var p = document.querySelector('p');
			p.innerText = getDate();
		script>

4.2 innerText 和 innerHTML 的区别


	
		<button> 许嵩 显示当前系统时间 button>
		<div> 某个时间 div>
		<p> 
			我是文字
			<span> 123 span> 
		p>
		<script>
			// innerText 和 innerHTML 的区别
			// 1.innerText  不识别html标签  非标准
			var div = document.querySelector('div');
			div.innerText = ' 今天是： 2022';
	
			// 1.innerHTML 识别html标签 W3c标准 会保留空格和换行
			div.innerHTML = ' 今天是： 2022';
			// 这两个属性是可读写的  可以获取元素里面的内容
			var p = document.querySelector('p');
			console.log(p.innerText);
			console.log(p.innerHTML); // 会保留空格
		script>

4.3 常用元素的属性操作

    element.innerHTML   element.innerText    改变元素内容
   src href
   id alt title


	
		<button id = "xs"> 许嵩1 button>
		<button id = "ss" > 许嵩2 button>
		<img src = "images/xs.jpg" alt = "xs许嵩" title="许嵩1">
 
		<script>
			// 修改元素属性  src
			// (1) 获取元素 
			var xs = document.getElementById('xs');
			var ss = document.getElementById('ss');
			var img = document.querySelector('img');
			// (2) 事件类型  注册事件（绑定事件）
			ss.onclick = function(){
				img.src = 'images/ss.jpg';
				img.title = "许嵩2";
			}
			xs.onclick = function(){
				img.src = 'images/xs.jpg';
				img.title = "许嵩1";
			}
		script>
	body>

4.4 案例分时显示不同照片，显示不同问候语

    如果上午时间打开页面，显示上午好，显示上午的图片
   如果下午时间打开页面，显示下午好，显示下午的图片
   如果晚上时间打开页面，显示晚上好，显示晚上的图片

   案例分析：
   根据系统不同时间来判断，所以需要用到日期内置对象
   利用多分支语句来设置不同的图片
   需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
   需要一个div元素，显示不同问候语，修改元素内容即可


	<body>
		<button> 许嵩 显示当前系统时间 button>
		<img src = "images/swh.gif" alt = "上午好" title="上午好">
		//<img src = "images/xwh.gif" alt = "下午好" title="下午好">
		//<img src = "images/wsh.gif" alt = "晚上好" title="晚上好">
		<div> 上午好 div>
		<script>
			// (1) 获取元素

相关阅读:
（附源码）ssm教师工作量核算统计系统毕业设计 162307
pytorch TORCH.NN 到底是什么？
1027 Colors in Mars
ArcGIS笔记13_利用ArcGIS制作岸线与水深地形数据？建立水动力模型之前的数据收集与处理？
用Speedtest-Tracker跟踪上网速度
 uniapp插件，对接穿山甲广告sdk
防火墙Ipsec vpn的配置
 多线程之二（【线程安全】synchronized+volatile+wait+notify）
反射知识点学习
 计算机丢失mfc140.dll怎么办,分享几种常见解决方案[dll修复工具下载】
原文地址：https://blog.csdn.net/weixin_58997863/article/details/126475054