Web APIs
Web APIs 和 JS 的关联性：
Web APIs是 W3C 组织的标准，主要学习DOM 和 BOM
Web APIs是 JS 所独有的部分
主要学习页面交互功能
Web APIs 是 JS 的应用
总结：
API 是一种接口工具，以实现某些功能，只要会使用就可以了
Web APIs是浏览器提供的一套操作浏览器功能（BOM) 和 页面元素(DOM)的API
Web APIs 一般都有输入和输出，Web APIs很多都是方法（函数）
可以结合前面学习内置对象方法的思路学习
DOM
DOM是文档对象模型，是W3C推荐的处理可扩展标记语言的一套标准程序接口，即处理页面/文档的一些接口
W3C已经规定了一系列的DOM接口，通过这些接口可以改变网页的结构、和样式
DOM树
文档（document）：一个页面就是一个文档；
元素(Element)：页面中的所有标签都是元素；
节点(Node)：页面中的内容都是节点，例如：标签，文本，属性，注释等；
DOM把以上内容都看成是对象
DOM在实际操作中获取元素的方法：
1. 根据ID获取
getElementById(‘id’) 方法可以获取带有ID的元素对象
因为文档页面从上往下加载，所以先要有标签，所以script放在标签下面
驼峰命名法 get 获得Element 元素 by
参数id 是大小写敏感的字符串
返回的是一个元素对象
<div id="time">2020-10-01</div>
<script>
//1.因为文档页面从上往下加载，所以先要有标签，所以script放在标签下面
//2.驼峰命名法 get 获得Element 元素 by
//3.参数id 是大小写敏感的字符串
//4.返回的是一个元素对象
var timer = document.getElementById("time");
console.log(timer); //把标签选中了
console.log(typeof timer);//返回object
//5.console.dir打印返回的元素对象，更好地查看属性里面的属性和方法
console.dir(timer);
2. 根据标签名获取
- getElementsByTagName(‘标签名’) 方法可以返回页面内所有的带有指定标签名的对象的集合
- 返回的是获取过来元素对象的集合，以伪数组形式存储
<ul> <li>如月之恒，如日之升1</li> <li>如月之恒，如日之升2</li> <li>如月之恒，如日之升3</li> <li>如月之恒，如日之升4</li> <li>如月之恒，如日之升5</li> </ul> <ol> <li>empty</li> <li>empty</li> <li>empty</li> </ol> <script> //(1)getElementsByTagName 方法可以返回带有指定标签名的对象的集合 //(2)返回的是获取过来元素对象的集合，以伪数组形式存储 var lis = document.getElementsByTagName("li"); console.log(lis); console.log(lis[0]); //得到第一行的li //(3)想要依次得到元素对象可以采取遍历的方式 for (var i = 0; i < lis.length; i++) { console.log(lis[i]); } </script>注意：
1.因为得到的是一个对象的集合，所以想要操作里面的元素就需要遍历
2.得到的元素对象是动态的（即原对象一旦变化，得到的结果也会随之变化）
3.如果页面中只有一个元素，返回的依然是元素对象，伪数组
4.如果页面中没有元素，返回的是空的伪数组
5.element（父元素）.getElementsByTagName(’标签名’)；可以获取某个元素 （父元素）内部所有指定标签名的子元素
///父元素必须是单个对象（必须指明是哪个对象），获取时不包括父元素自己
例：此处必须是 ’ ol[0] . getElementsByTagName(“li”) ’<ul> <li>如月之恒，如日之升1</li> <li>如月之恒，如日之升2</li> <li>如月之恒，如日之升3</li> <li>如月之恒，如日之升4</li> <li>如月之恒，如日之升5</li> </ul> <ol> <li>empty</li> <li>empty</li> <li>empty</li> </ol> <script> //(1)getElementsByTagName 方法可以返回带有指定标签名的对象的集合 //(2)返回的是获取过来元素对象的集合，以伪数组形式存储 var lis = document.getElementsByTagName("li"); console.log(lis); console.log(lis[0]); //得到第一行的li //(3)想要依次得到元素对象可以采取遍历的方式 for (var i = 0; i < lis.length; i++) { console.log(lis[i]); } </script>//这样过于麻烦，经常做出改进:给ol一个id值
<ol id="ol">-----</ol> ------------------------------------------- //改进 var ol = document.getElementById("ol"); console.log(ol.getElementsByTagName("li"));3. 根据HTML5新增的方法获取
ie9以上才可使用，有兼容性问题
- getElementsByClassName(‘类名’) 根据类名获取
<div class="box">盒子</div> <script> //**3.HTML5新增方法 getElementsByClassName 根据类名获取 var boxs = document.getElementsByClassName('box'); console.log(boxs); </script> - document.querySelector(‘选择器’) 根据指定选择器返回第一个元素对象
（切记 里面的选择器需要加符号 ： 类选择器加 . id选择器加 # 标签选择器不用加）
//(2) document.querySelector('选择器')根据指定选择器返回第一个元素对象
var firstBox= document.querySelector('.box'); //返回第一个类名为box的元素
console.log(firstBox);
var nav = document.querySelector('#nav'); //返回第一个id为nav的元素
console.log(nav);
var li = document.querySelector('li'); //返回第一个li
console.log(li);
- document.querySelectorAll(‘选择器’) 根据指定选择器返回所有元素对象
返回对象是一个元素集合，是一个伪元素
同样的，里面的选择器需要加符号//（3）document.querySelectorAll('选择器') 根据指定选择器返回所有元素对象 //返回对象是一个元素集合，是一个伪元素 var allBox = document.querySelectorAll(".box"); //返回所有类名为box的元素 console.log(allBox);4. 特殊元素获取
- document.body获取body标签
var bodyEle = document.body; console.log(bodyEle); //获取body标签 console.dir(bodyEle); //返回的类型是数组对象- document.documentElement 获取html标签
//（2）获取html标签 var htmlEle = document.documentElement; console.log(htmlEle); //获取html标签 console.dir(htmlEle); //返回的类型是数组对象事件基础
javascript使我们有能力创建动态页面（轮播图等） ，而事件是可以被javascript侦测到的行为
简单理解：就是一种 触发-----响应机制事件由三部分组成：事件源、事件类型、事件处理程序（事件三要素）
（1）事件源：事件被触发的对象 例如 按钮`````````````<button id="btn">阿妫</button> <script> var btn = document.getElementById("btn");(2）事件类型 即触发的方式，例：鼠标点击触发（onclick）/鼠标经过触发/键盘按下触发等
(3）事件处理程序 通过一个函数赋值的方式完成
鼠标事件 触发条件btn.onclick = function(){ alert('好的啊'); //点击按钮后弹出对话框 } </script>
onclick 鼠标点击左键触发
onmouseover 鼠标移动到目标上方
onmouseout 鼠标从目标上方移出
onfocus 获得鼠标焦点触发
onmousedown 鼠标的键钮被按下
onmouseup 鼠标的键钮释放弹起
onblur 失去鼠标焦点触发
mousemove 鼠标在目标上方移动
- document.documentElement 获取html标签
-
mouseenter 和 mouseover 区别：
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发
mouseenter 只会经过自身盒子触发（因为 mouseenter 不会冒泡）
操作元素(重要）
javascript 的DOM操作都可以改变网页内容、样式，可以利用DOM操作元素来改变元素里面的内容、属性等改变元素内容
element.innerText 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会被去掉
<body> <button id="btn">显示当前系统时间</button> <div>某个时间</div> <p></p> <script> //**当点击按钮div里面的文字会发生变化** //1.获取元素 var btn = document.querySelector("button"); var div = document.querySelector("div"); //2.注册事件 btn.onclick = function () { //点击后按指定格式获取时间 div.innerText = getDate(); }; //3.也可以不用添加事件，直接显示 var p = document.querySelector("p"); p.innerText = getDate(); //封装时间函数 function getDate() { ---------略---------； }-element.innerHTML 较多使用从起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
与element.innerText 使用方式一样。
二者区别：
（1）innerText 不识别HTML标签 非标准 不保留空格和换行（2）innerHTML 识别HTML标签 W3C推荐 保留空格和换行
（3）这两个属性都是可读写的 可以获取元素里面的内容
(4) 这两个是普通盒子，比如 div盒子标签的内容，对表单不起作用
<body> <div></div> <p> 我是文字 <span> 123 </span> </p> <script> //innerText 和 innerHTML区别 //1.innerText 不识别HTML标签 非标准 不保留空格和换行 var div = document.querySelector("div"); div.innerText = "<strong>今天是：</strong> 2020"; //显示<strong>今天是：</strong> 2020 //2.innerHTML 识别HTML标签 W3C推荐 保留空格和换行 var div = document.querySelector("div"); div.innerMTML = "<strong>今天是：</strong> 2020"; //显示今天是：2020（其中'今天是'加粗） //3.这两个属性是可读写的 可以获取元素里面的内容 var p = document.querySelector("p"); console.log(p.innerText); //输出结果 我是文字 123 不保留空格和换行 console.log(p.innerHTML); //输出结果 我是文字 <span> 123 </span> 保留空格和换行 </script> </body>表单元素的属性操作
利用DOM可以操作如下表单元素的属性
- type
btn.onclick(){ //表单里面的值 文字内容通过value来修改 input.value='被点击了'; } - value
- checked
- selected
- diabled
btn.onclick(){ //如果想要某个表单被禁用 不能再点击 用disabled input.disabled=true; //this 指向的是事件函数的调用者 btn this.disabled = true; //与input.disabled = true;效果等价 }案例之密码显示与隐藏
案例：点击按钮将密码框切换为文本框，并可以查看密码明文
思路：点击眼睛按钮，把密码框类型转换为文本框就可以看见里面的密码， 一个按钮有两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
算法：利用一个flag变量，判断flag值， 如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框， flag设置为1
代码：
<style> .box { position: relative; width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input { width: 370px; height: 30px; border: 0; outline: none; } .box img { position: absolute; top: 7px; right: 2px; width: 24px; height: 24px; } </style> </head> <body> <div class="box"> <label for=""> <img src="images/zyl.jpg" alt="" id="eye" /> </label> <input type="password" name="" id="pwd" /> </div> <script> //1.获取元素 var eye = document.getElementById("eye"); var pwd = document.getElementById("pwd"); //2.注册事件 var flag = 0; eye.onclick = function () { if (flag == 0) { pwd.type = "text"; eye.src = "images/zjl.jpg"; flag = 1; } else { pwd.type = "password"; eye.src = "images/zyl.jpg"; flag = 0; } }; </script> </body>样式属性操作
可以通过JS修改元素的大小、颜色、位置等样式
- element.style 行内样式属性
<script> //1.获得元素 var div = document.querySelector("div"); //2.注册事件 处理程序 div.onclick = function () { //点击后背景变为紫色，宽度变为250px this.style.backgroundColor = "purple"; this.style.width = "250px"; }; </script>div.style 里面的属性采取驼峰命名法
（2）JS修改style样式操作，产生的是行内样式，CSS权重比较高，所以如果JS样式与内嵌样式发生冲突，以JS样式为主
（3）适用于样式比较少，功能比较简单的
实例：点击关闭二维码：
<body> <div class="box"> 淘宝二维码 <img src="images/zxc.jpg" alt="" title="扫面二维码" /> <i class="close-btn">x</i> </div> <script> //思路：利用样式的显示与隐藏完成，display:none 隐藏元素 display:block 显示元素 var btn = document.querySelector(".close-btn"); var box = document.querySelector(".box"); btn.onclick = function () { box.style.display = "none"; }; </script> </body>element.className 类名样式属性
（1）通过修改 元素的className来修改元素样式，适用于样式多的，功能复杂的 (常用）
（2）className是个保留字，因此使用className来操作元素类名属性
（3）className 会直接更改元素的类名，会覆盖原先的类名
（4）如果想要保留原先的类名，用多类名选择器
<style> .first { width: 200px; height: 200px; background-color: rgb(140, 127, 219); color: salmon; } .change { width: 250px; height: 300px; background-color: violet; color: rgb(190, 201, 34); } </style> </head> <body> <div class='first'>文本</div> <script> //让原来的盒子由原来的样式改为类名为change所规定的样式 var test = document.querySelector("div"); test.onclick = function () { //让当前原色的类名改为change //this.className = "change"; //如果想要保留原先的类名，用多类名选择器 this.className = 'first change'; }; </script> </body>案例之：密码框格式提示错误信息
案例：用户如果离开密码框，里面输入的个数不是6-16，则提示错误信息，否则提示输入正确信息
思路：首先判断事件的表单失去焦点 onblur
如果输入正确则提示正确的信息颜色为绿色小图标变化
如果输入的不是6-16位，则提示错误信息颜色为红色 小图标变化
因为里面的样式过多，采用className修改样式
<style> div { width: 600px; height: 100px auto; } .message { display: inline-block; font-size: 12px; color: rgb(119, 113, 113); background: url(images/zjl.jpg) no-repeat left center; padding-left: 20px; } .wrong { color: red; background-image: url(images/zxc.jpg); } .right { color: green; background-image: url(images/zyl.jpg); } </style> </head> <body> <!--案例：用户如果离开密码框，里面输入的个数不是6-16，则提示错误信息，否则提示输入正确信息--> <div class="register"> <input type="password" class="ipt" /> <p class="message">请输入6~16位密码</p> </div> <script> var ipt = document.querySelector(".ipt"); var message = document.querySelector(".message"); ipt.onblur = function () { //根据表单里面值的长度 ipt.value.length判断 if (ipt.value.length < 6 || ipt.value.length > 16) { message.className = "message wrong"; message.innerHTML = "您输入的位数不对，要求6~16位"; } else { message.className = "message right"; message.innerHTML = "您输入的格式正确"; } }; </script> </body>
503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
