-
目录
-
API
-
应用程序编程接口
-
无需访问源码，理解内部工作机制
-
-
Web API
-
浏览器提供的一套操作浏览器的功能（BOM）和页面元素的API(DOM)
-
详细地址：https://developer.mozilla.org/zh-CN/docs/Web/API
-
主要功能：针对浏览器提供的接口，对浏览器作交互效果
-
很多都是方法或者函数
-
一般都有输入和输出
-
-
DOM
-
文档对象模型
-
是W3C组织推荐的可扩展标记语言的标准编程接口
-
可以改变网页内容及样式
-
DOM树
-
文档：
-
一个页面就是一个文档，在DOM中使用document表示
-
-
元素：
-
页面中所有的标签就是元素，DOM中使用element表示
-
-
节点
-
网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
-
-
DOM把以上元素都看作是对象
-
-
获取元素
-
通过ID获取
-
使用getElementById（'参数'）
-
获取带有ID的元素对象
-
参数id是大小写敏感的字符串
-
返回的是一个对象
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="time">2022-8-24</div> <script> var timer = document.getElementById('time'); console.log(timer); console.log(typeof timer);//返回的是一个对象 </script> </body> </html> -
结果
-
-
根据标签名获取
-
使用getElementsByTagName('标签名')
-
返回带有标签名的对象集合
-
以伪数组的形式存储的，可以通过遍历
-
如果页面中没有这个标签返回的是一个空的伪数组
-
获取某个元素内部所有指定标签名的子元素
-
语法：element.getElementsByTagName('标签名')
-
父元素必须是指定的单个元素
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li>知否知否，应是绿肥红瘦1</li> <li>知否知否，应是绿肥红瘦2</li> <li>知否知否，应是绿肥红瘦3</li> <li>知否知否，应是绿肥红瘦4</li> </ul> <ol id='ol'> <li>知否知否1</li> <li>知否知否2</li> <li>知否知否3</li> <li>知否知否4</li> </ol> <script> //1.getElementsByTagName('标签名') var lis = document.getElementsByTagName('li'); console.log(lis); console.log(lis[0]);//返回的是伪数组的形式 //2.element.getElementsByTagName('标签名') var ol = document.getElementById('ol'); console.log(ol.getElementsByTagName('li')); </script> </body> </html> -
结果
-
-
-
通过类名获取某些元素
-
getElementByClassName('类名')
-
-
指定选择器返回第一个元素对象
-
document.querySelector('.选择器')，里面的选择器必须要加符号
-
.表示选择出类选择器
-
#表示选择出Id选择器
-
标签无需加符号
-
-
根据指定选择器所有元素对象返回
-
document.querySelectorAll('选择器');
-
.表示选择出类选择器
-
#表示选择出Id选择器
-
标签无需加符号
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box">盒子</div> <div class="box">盒子</div> <div id="nav"> <ul> <li>首页</li> <li>产品</li> </ul> </div> <script> //1.getElementsByClassName 根据类名获取某些元素集合 var boxs = document.getElementsByClassName('box'); console.log(boxs); //2.querySelector返回指定选择器的第一个元素对象 var firstBox = document.querySelector('.box');//.表示选择出类选择器 console.log(firstBox); var nav = document.querySelector('#nav');//#表示选择出ID选择器 console.log(nav); //3.document.querySelectorAll var allBox = document.querySelectorAll('.box'); console.log(allBox); var lis = document.querySelectorAll('li');//标签无需加符号 console.log(lis); </script> </body> </html> -
结果
-
-
获取body元素
-
语法：document.body
-
-
获取html元素
-
语法：document.documentElement
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> //1.获取body元素 var bodyEle = document.body; console.log(bodyEle); //2.获取html元素 var htmlEle = document.documentElement; console.log(htmlEle); </script> </body> </html> -
结果
-
-
-
事件基础
-
触发相应的一种机制
-
事件三要素
-
事件源
-
事件被触发的对象
-
-
事件类型
-
如何触发，鼠标点击（onclick）、鼠标经过、键盘按下
-
-
事件处理程序
-
函数赋值方式完成
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn">多云</button> <script> //3.点击按钮 弹出对话框 //1.事件源 var btn = document.getElementById('btn'); //2.事件类型 //3.事件处理程序 btn.onclick = function () { //点击按钮对象 弹出对话框 alert('33度'); } </script> </body> </html> -
结果
-
-
-
执行事件的步骤
-
获取事件源
-
注册事件（绑定事件）
-
添加事件处理程序
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>123</div> <script> //1.获取事件源 var div = document.querySelector('div'); //2.绑定事件 div.onclick //3.添加事件处理程序 div.onclick = function () { console.log('我被点击了'); } </script> </body> </html> -
结果
-
-
常见的鼠标事件
-
-
-
操作元素
-
改变元素内容
-
element.innerText
-
不识别html标签，去掉空格和换行
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>显示当前系统时间</button> <div>某个时间</div> <script> //当点击了按钮 div里面的文字会发生变化 //1.获取元素 var btn = document.querySelector('button'); var div = document.querySelector('div'); //2.注册事件 btn.onclick = function () { //div.innerText = '2022-8-24'; div.innerText = getDate(); } var date = new Date(); console.log(date.getFullYear());//返回当前日期的年 2022 console.log(date.getMonth());//返回月份 0~11月 得到的月份比实际的小一个月 console.log(date.getMonth() + 1); console.log(date.getDate());//返回的是几号 console.log(date.getDay());//返回是周几 周日返回0 function getDate() { var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; var day = date.getDay(); return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day]; } </script> </body> </html> -
结果
-
element.innerHTML
-
识别html标签，是w3c标准，保留空格和换行
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div></div> <p> 我是文字 <span>123</span> </p> <script> var div = document.querySelector('div'); //1.innerText 不识别html标签 去除空格和换行 //div.innerText = '<strong>今天是</strong>2022'; //2.innerHTML 识别html标签 div.innerHTML = '<strong>今天是</strong>2022'; </script> </body> </html> -
结果
-
-
修改元素属性
-
src属性、href属性、id属性、alert属性、title属性
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="ldh">刘德华</button> <button id="zxy">张学友</button> <img src="ldh.jpg" alt="" title="刘德华"> <script> //1.获取元素 var ldh = document.getElementById('ldh'); var zxy = document.getElementById('zxy'); var img = document.querySelector('img'); //2.注册事件 zxy.onclick = function () { img.src = 'zxy.jpg'; img.title = '张学友'; } ldh.onclick = function () { img.src = 'ldh.jpg'; img.title = '刘德华'; } </script> </body> </html> -
结果
-
-
案例分时显示不同图片和问候语
-
思路：根据系统不同时间判断上午还是下午，用到内置对象get
-
利用多分支语句设置不同图片
-
不同时间修改不同图片，使用操作元素src属性
-
需要div元素，显示不同问候语，修改元素内容
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { width: 300px; height: 300px; } </style> </head> <img src="images/morning.jpg" alt=""> <div>上午好</div> <script> var img = document.querySelector('img'); var div = document.querySelector('div'); var date = new Date(); var h = date.getHours(); if (h < 12) { img.src = 'images/morning.jpg'; div.innerHTML = '上午好，程序员'; } else { img.src = 'images/afternoon.jpg'; div.innerHTML = '下午好，程序员'; } </script> <body> </body> </html>结果
-
-
表单元素属性操作
-
type、value、checked、select、disabled
-
表单里的值是通过value来修改的
-
disabled把表单禁用不能被点击
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>按钮</button> <input type="text" value="输入内容"> <script> var btn = document.querySelector('button'); var input = document.querySelector('input'); btn.onclick = function () { //错误方式：input.innerHTML = '被点击了'; 这是普通盒子 比如div标签里面的内容 input.value = '被点击了';//表单里的值是通过value来修改的 //disabled表示被禁用 this.disabled = true;//表示按钮被禁用 this指事件的调用者 } </script> </body> </html> -
结果
-
-
-
案例仿京东显示密码
-
点击按钮将密码框设置为文本框，可以查看密码明文
-
一个按钮两个状态，点一次切换为文本框，继续点击一次切换为密码框
-
核心算法：利用flag变量，判断flag的值，是1就切换为文本框，flag设置为0； 如果是0就切换为密码框，flag设置为1
-
-
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
