目录
3.6.7事件操作
1、Web APIs和JS基础关联性
1.1JavaScript的组成
JavaScript分为
ECMAScript（JavaScript语法）即JavaScript基础
DOM（页面文档对象模型）+BOM（浏览器对象模型）即Web APIs
1.2JavaScript基础阶段以及Web APIs阶段
JavaScript基础学习ECMAScript基础语法为后面做铺垫，Web APIs是JavaScript的应用，大量使用JavaScript基础语法做交互效果。
1.2.1JavaScript基础阶段
学习ECMAScript标准规定的基本语法
掌握JavaScript基础语法
无法制作常用的网页交互效果
为JavaScript后期打基础，打铺垫
1.2.2Web APIs阶段
Web APIs是w3c组织的标准
Web APIs主要学习DOM和BOM
Web APIs是JavaScript独有的部分
主要学习页面交互功能
需要使用JavaScript前期内容做基础
2、API和Web API
2.1API
API（Application Programming Interface，应用程序编程接口）是一个预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
2.2Web API
Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
现阶段我们主要针对浏览器讲解常用的API，主要针对浏览器做交互效果。
比如我们想要浏览器弹出一个警示框，直接使用alert('弹出')
MDN详细API：Web API 接口参考 | MDN
因为Web API很多，所以将这个阶段成为APIs
3、DOM
3.1DOM简介
3.1.1什么是DOM
文档对象模型（Document Object Mobel，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、样式和结构
3.1.2DOM树
文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
DOM把以上内容都看做是对象
3.2获取元素
3.2.1如何获取页面元素
DOM在实际开发中主要用来操作元素
获取页面中的元素可以使用一下几种方式：
根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取
3.2.2根据ID获取
使用getElementById()方法可以获取带有ID的元素对象document.getElementById - Web API 接口参考 | MDN
<div id="time">2022.4.30</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(dir);
</script>3.2.3根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签的对象的集合
还可以获取某个元素（父元素）内部所有指定标签名的子元素
element.getElementByTagName('标签名');
注：父元素必须是单个对象（必须指明是哪一个元素对象）获取的是偶不包括父元素自己
3.2.4通过HTML5新增的方法获取
（1）document.getElementsByClassName('类名')； //根据类名返回元素对象集合
（2）document.querySelector('选择器')； //根据指定选择器返回第一个元素对象
（3）document.querySelectorAll('选择器'); //根据指定选择器返回
<div class='box'>盒子1</div>
<div class='box'>盒子2</div>
<div id='nav'>
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
//1.getElementsByClassName 根据类名获得某些元素集合
var box = document.getElementByClassName('box');
console.log(boxs);
//2.querySelector 返回指定选择器的第一个元素对象
//切记 里面的选择器需要加符号 .box #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.querySelectorAll() 返回指定选择器的所有元素对象的集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>3.2.5获取特殊元素（body，html）
获取body元素
document.body //返回body元素对象
获取html元素
document.documentElement //返回html元素对象
3.3事件基础
3.3.1事件概述
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为
简单理解：触发——响应机制
网页中的每个元素都可以产生某些可以触发JavaScript的事件
3.3.2事件三要素
事件是有三部分组成：事件源、事件类型、事件处理程序，也称之为事件三要素
事件源：事件被触发的对象
事件类型：如何触发，什么事件
事件处理程序：通过一个函数赋值的方式完成
3.3.3执行事件的步骤
（1）获取事件源
（2）注册事件（绑定事件）
（3）添加事件处理程序（采取函数赋值形式）
3.4操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性。
3.4.1改变元素内容
element。innerText
从起始位置到终止位置的内容，但他去除html标签，同时空格和换行也会去掉
element.innerHTML
起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
3.4.2innerText和innerHTML的区别
（1）innerText 不识别html标签 非标准
（2）innerHTML 识别html标签 W3C标准
（3）这两个属性是可读写的，可以获取元素里面的内容
3.4.3常用元素的属性操作
（1）interText、innerHTML 改变元素内容
（2）src、href
（3）id、alt、title
3.4.5表单元素的属性操作
利用DOM可以操作如下表单元素的属性：
type、value、checked、selected、disabled
3.4.6样式属性操作
可以通过JavaScript修改元素的大小、颜色、位置等样式
（1）element.style 行内样式操作
注：
（1）JavaScript里面的样式采取驼峰命名法。比如：fontSize、backgroundColor
（2）JavaScript修改style样式操作，产生的是行内样式，css权重比较高
（2）element.className 类名样式操作
注：
（1）如果样式修改较多，可以采取操作类名方式更改元素样式
（2）class因为是个保留字，因此使用className来操作元素类名属性
（3）className会直接更改元素的类名，会覆盖原先的类名
3.4.7排他思想
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
（1）所有元素全部清除样式（干掉其他人）
（2）给当前元素设置样式（留下我自己）
（3）注意顺序不能颠倒，首先干掉其他人，再设置自己
3.4.8自定义属性的操作
（1）获取属性值
element.属性 获取属性值
element.getAttribute('属性')；
（2）获取属性值区别：
element.属性 获取内置属性值（元素本身自带的属性）
element.getAttribute('属性')； 主要获得自定义属性（标准）程序员自定义的属性
（3）设置属性值
element.属性 = ‘值’ 设置内置属性值
element.setAttribute('属性'，‘值’)；
（4）设置属性值的区别
element.属性 设置内置属性值
element.setAttribute( '属性'，‘值’); 主要设置自定义的属性（标准)
（5）移除属性
element.removeAttribute('属性');
3.4.9H5自定义属性
自定义属性目的∶是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute ('属性')获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
（1）设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值。
比如<div data-index= "1"></div>
或者使用JS设置
element.setAttribute('data-index’,2)
（2）获取H5自定义属性
兼容性获取element.getAttribute('data-index’);
H5新增element.dataset.index或者element.dataset[ 'index’ ] ie 11才开始支持
3.5节点操作
3.5.1为什么学节点操作
获取元素通常使用的两种方法：
（1）利用DOM提供的方法获取元素
document.getElementById()
document.getElementByTagName()
document.querySelector等
逻辑性不强、繁琐
（2）利用节点层级关系获取元素
利用父子兄弟节点关系获取元素
逻辑性强，但是兼容性稍差
这两种方式都可以获取元素节点，但是节点操作更简单
3.5.2节点概述
网页中的所有内容都是节点(标签、属性、文本、注释等），在DOM中，节点使用node来表示。
HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。
一般地，节点至少拥有nodeType(节点类型) 、nodeName(节点名称）和nodeValue(节点值)这三个基本属性。
元素节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType 为3（文本节点包含文字、空格、换行等）
一般实际开发中，节点操作主要操作的是元素节点。
3.5.3节点层级
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系
（1）父节点
node.parentNode
parentNode属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回null
（2）子节点
node.childrenNode （标准）
parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合
注：返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理，所以一般不提倡使用childNodes
parentNode.children (非标准)
parentNode.children是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余的节点不返回
虽然children是一个非标准，但是得到了各个浏览器的支持，因此可以放心使用
parentNode.firstChild
firstChild返回第一个子节点，找不到则返回null，同样，也是包含所有的节点
parentNode.lastChild
lastChild返回最后一个子节点，找不到则返回null，同样，也是包含所有的节点
parentNode.firstElementChild
firstElementChild返回第一个子元素节点，找不到则返回null
parentNode.lastElementChild
lastElementChild返回最后一个子元素节点，找不到则返回null
注：这两个方法有兼容性问题，IE9以上才支持
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<script>
var ol = document.querySelector('ol');
// 1.firstChild 第一个子节点，不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2.firstElementChild 返回第一个子元素节点
console.log(ol.firstElmentChild);
// lastElementChild 返回最后一个子元素节点
console.log(ol.lastElementChild);
// 3.实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
</script>（3）兄弟节点
node.nextSibling
nextSibling返回当前元素的下一个兄弟节店，找不到则返回null，同样，也是包含所有的节点。
node.previousSibling
previousSibling 返回当前元素上一个兄弟节点，找不到则返回null，同样，也是包含所有的节点。
node.nextElementSibling
nextElementSibling返回当前元素的下一个兄弟元素节点，找不到则返回null
node.previousElementSibling
previousElementSibling返回当前元素的上一个兄弟元素节点，找不到则返回null
注：这两个方法有兼容性问题，IE9以上才支持
解决方法：如何解决兼容性问题？
自己封装一个兼容性的函数
function getNextElementSibling(element){
var el = element;
while(el = el.nextSibling){
if(el.nodeType === 1){
return el;
}
}
return null;
}（4）创建节点
document.createElement('tagname')
document.createElement()方法创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据需求动态生成的，所有也称为动态创建元素节点。
（5）添加节点
node.appendChild(child)
node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾，类似于css里面的after伪元素。
node.insertBefore(child , 指定元素)
node.insertBefore()方法将一个节点添加到父节点的指定子节点前面，类似于css里面的before伪元素。
（6）删除节点
node.removeChild(child)
node.removeChild()方法从DOM 中删除一个子节点，返回删除的节点
（7）复制节点（克隆节点）
node.cloneNode()
node.cloneNode() 方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点
注：
如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不可隆里面的子节点。
如果括号参数为true，则是深度拷贝，会复制节点本身以及里面的所有的子节点。
3.5.4三种动态创建元素区别
document.write()
element.innerHTML
document.createElement()
区别：
（1）document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
（2）innerHTML 是将多个内容写入某个DOM节点，不会导致页面全部重绘
（3）innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
（4）createElement() 创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML效率要比createElement
3.6 DOM重点核心
对于JavaScript。为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口。
对于HTML，dom使得html形成一棵dom树，包含文档、元素、节点
关于DOM操作，主要针对元素的操作，主要有创建、增、删、改、查、属性操作、事件操作
3.6.1创建
（1）document.write
（2）innerHTML
（3）createElement
3.6.2增
（1）appendChild
（2）insertBefore
3.6.3删
（1）removeChild
3.6.4改
主要修改dom的元素属性，dom元素的内容、属性、表单的值等
（1）修改元素属性：src、href、title等
（2）修改普通元素内容：innerHTML、innerText
（3）修改表单元素：value、type、disable等
（4）修改元素样式：style、className
3.6.5查
主要查询dom的元素
（1）DOM提供的API方法：getElementById、getElementByTagName 古老用法不推荐使用
（2）H5提供的新方法：querySelector、querySelectorAll 提倡
（3）利用节点操作获得元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）提倡
3.6.6属性操作
主要针对于自定义属性
（1）setAttribute：设置dom的属性值
（2）getAttribute：得到dom的属性值
（3）removeAttribute移除属性
3.6.7事件操作
给元素注册事件，采取 事件源.事件类型 = 事件处理程序
| 鼠标操作 | 触发事件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标交点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
扫一扫
4413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
