JS - Web APIs 应用js实现页面交互

Web APIs 和 JS 基础关联性

JS的组成： js语法 DOM BOM
Web APIs：DOM BOM

API 和 Web API

API：应用程序编程接口，是一些预定义的函数

简单理解：是一种工具，以便实现想要完成的功能
Web API：是浏览器提供的一套浏览器功能和页面元素的 API （BOM和 DOM）

DOM（）

一、DOM简介

1.什么是DOM 文档对象模型，是接口改变网页的内容，结构，样式 2.DOM树文档：一个页面就是一个文档 document 元素：页面中的所有标签 element 节点：网页中所有内容都是节点 node DOM 把以上内容都看做是对象

二、获取元素

如何获取网页元素？

1.根据ID获取 getElementByld()方法

<div id="time">2020-11-25</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(timer);  打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>

2.根据标签名获取 getElementsByTagName()方法 --返回带有指定标签名的对象的集合

返回的是获取过来元素对象的集合以伪数组的形式存储的
如果页面中只有一个li 返回的还是伪数组形式
如果页面中没有这个元素返回的是空的伪数组

获取某个元素（父元素）内部所有指定标签名的子元素 element.getElementsByTagName('标签名')

3.通过HTML5新增的方法获取

document.querySelector('选择器') //根据指定选择器返回第一个元素对象
document.getElementsByClassName('类名') //根据类名返回元素对象集合
document.querySelectorAll('选择器') //返回指定选择器的所有元素对象集合

4.获取特殊元素(body,html)

获取body ： document.body
获取html： document.documentElement

三、事件基础

1.事件三要素：事件源事件类型事件处理程序

事件源：事件被触发的对象 as:按钮
事件类型：如何触发? 什么事件? 比如鼠标点击(onclick) 鼠标经过键盘按下
事件处理程序：通过一个函数赋值的方式完成

2.执行事件的步骤

获取事件源
注册事件(绑定事件)
添加事件处理程序(采取函数赋值方法)

四、操作元素

1.改变元素的按钮

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

区别：

1.innerText 不识别html标签非标准去除空格和换行
2.innerHTML 识别html标签 W3C标准保留空格和换行

2.常用元素的属性操作

<button id="ldh">刘德华</button>
    <button id="zxy">张学友</button><br>
    <img src="images/link.jpg"  >
    <script>
        //修改元素属性 src
        //1.获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        //2.注册事件
        zxy.onclick = function() {
            img.src = 'images/zhang.jpg';
            img.title = '张学友';
        }
        ldh.onclick = function() {
            img.src = 'images/link.jpg';
            img.title = '刘德华';
        }
    </script>

3.表单元素的属性操作 4.样式属性操作 element.style 行内样式操作 element.className 类名样式操作

注意:

JS里面的样式采取驼峰命名法 fontSize backgroudColor
JS 修改 sytle 样式操作产生的是行内样式 css 权重比较高
className 会直接更改元素的类名，会覆盖原先的类名

5.排他思想 干掉所有人，留下他自己

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // 先把所有按钮的背景颜色去掉
                // 然后才变颜色
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>

6.自定义属性的操作

获取属性值

element.属性
element.getAttribute('属性')

设置属性值

element.属性='值'
element.setAttribute('属性'，'值')

移除属性

element.removeAttribute('属性')

7.H5自定义属性

设置H5自定义属性规定自定义属性date- 开头作为属性名并赋值
```
<div data-index="2" data-list-name="andy"></div>
```
获取H5自定义属性

element.getAttribute('属性') H5新增element.dataset.index 或者 element.dataset['index']

注意：

dataset 是一个集合里面存放了所有以data开头的自定义属性
如果自定义属性有多个- 连接的单词采取驼峰命名法 console.log(div.dataset.listName)

五、节点操作

1.为什么学节点操作：逻辑性强，但兼容性稍差

利用DOM提供的方法获取元素
利用节点层次关系获取元素

2.节点概述在DOM中节点用node

nodeType（节点类型） nodeName（节点名称） nodeValue(节点值)
元素节点 1 属性节点 2 文本节点 3
元素节点是主要操作

3.节点层级父子兄层级关系

父级节点

node.parentNode得到的是离元素最近的父级节点如果找不到父节点返回null

子节点

parentNode.childNodes（标准）得到的是文本节点元素节点等等
parentNode.children （非标准）是一个只读属性，返回所有的子元素节点
parentNode.firstChild 返回第一个节点不管是文本节点还是元素节点
parentNode.lastChild 返回最后一个节点不管是文本节点还是元素节点
parentNode.firstElementChild 返回第一个子元素
parentNode.lastElementChild 返回最后一个子元素 //兼任性问题 IE9以上 //实际开发中的写法
console.log(ol.children[0]) 第一个子元素
console.log(ol.children[ol.children.length - 1])最后一个子元素

3.兄弟节点

node.nextSibling 得到的是下一个兄弟节点文本节点元素节点等等
node.previousSibling 得到的是上一个兄弟节点文本节点元素节点等等
node.nextElementSibling 得到的是下一个兄弟元素节点
node.previousElementSibling 得到的是上一个兄弟元素节点

4.创建节点

document.createElement('tagName')
添加节点 node.appendChild(child) node 父级 child 子级后面追加元素类似于push
node.insertBefore(child,指定元素) 指定子元素前面插入元素

5.删除节点

node.removeChild(child)

阻止链接跳转：<a href='javascript:;'>删除</a>

6.复制节点（克隆） node.cloneNode() 注意：

如果括号参数为空或者false 则浅拷贝只复制标签不复制里面的内容
如果括号参数为 true 则深拷贝全复制

7.三种动态创建元素区别

document.write() 如果页面文档流加载完毕会导致页面重绘
element.innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接）
document.createElement() 创建多个元素效率稍微低一点点，但结构更清晰

DOM重点核心---事件高级

一、注册事件（绑定事件）

传统注册方式：具有唯一性，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式：元素.addEventListener(type,listener[,useCapture])

特点：同一个元素同一个事件可以注册多个监听器

type:事件类型字符串要加‘’ 比如click，mouseover 不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCaoture:可选参数，是一个布尔值，默认false

ie9 以前版本：attachEvent('onclick',回调函数)

二、删除事件（解绑事件）

删除事件的方式

传统注册方式： eventTarget.onclick=null
方法监听注册方式：eventTarget.removeEventListener(type,listener[,useCapture])
ie9 以前版本：detachEvent('onclick',回调函数)

三、DOM事件流：事件传播的过程

捕获阶段目标阶段冒泡阶段（石头扔水里）

四、事件对象

event 就是一个事件对象写到我们侦听函数的小括号里面当形参来看
事件对象只有有了事件才会存在它是系统给我们创建的不需要传递参数
事件对象是我们是事件的一系列相关数据的集合跟事件相关比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标如果是键盘事件里面就包含的键盘事件的信息比如判断用户按下了那个键
事件对象可以用别的命名比如event evt e
兼容问题 ie678 通过 window.event

事件对象的常见属性和方法

e.target 返回的是触发事件的对象(元素) this返回的是绑定事件的对象(元素)

区别：e.target点击了哪个元素，就返回哪个元素 this 哪个元素绑定这个点击事件那么就返回谁

兼容性：

ie 用e.srcElement获取触发事件的对象
e.type 返回事件对象类型
阻止默认行为（事件）让链接不跳转或者让提交按钮不提交 e.preventDefault()
低版本浏览器e.returnValue--属性或者利用return false也能阻止注意后面代码不执行而且只限于传统的注册方式

五、阻止事件冒泡

1.阻止事件冒泡的两种方式

e.stopPropagation(); //标准
e.cancelBubble=true; //ei678

2.阻止事件冒泡的兼容性解决方案

if(e && e.stopPropagation){
           e.stopPropagation();
}else{
           window.event.cancelBubble = true;
}

六、事件委托(代理，委派)

事件委托原理：不要给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

事件委托的作用：只操作了一次DOM，提升了程序的性能

七、常用的鼠标事件

禁止鼠标右键菜单： contextmenu
禁止鼠标选中：selectstart

2.鼠标事件对象：MouseEvent 键盘事件对象：KeyboardEvent

e.clientX/Y 返回的是可视区的x y 坐标
e.pageX/Y 返回的是相对于文档页面的x y坐标
e.screenX/Y 返回的是相对于电脑屏幕的x y坐标
mousemove 鼠标移动
mousedown 鼠标按下
mouseup 鼠标松开

八、常用的键盘事件

键盘事件对象：KeyboardEvent

onkeyup 某个键盘按键被松开的时候触发
onkeydown 某个键盘按键被按下时触发
onkeypress 某个键盘按键被按下时触发但是它不识别功能键比如ctrl shift 箭头等

2.keyCode属性 返回该键的ASCII码值判断用户按下了哪个键

keydown 和 keypress 在文本框里面的特点: 事件触发的时候文字还没有落入文本框中

BOM

一、BOM概述

什么时BOM 浏览器对象模型与浏览器进行交互的对象
BOM的构成 window对象是浏览器的顶级对象全局变量，函数都会变成window对象的属性的方法

二、window对象常见的事件

1.窗口加载事件

window.onload=function(){}
window.addEventListener('load',function(){}) 最提倡的写法
document.addEventListener('DOMContentLoaded',function(){})DOM元素加载完就能执行不包含图片 falsh css

load 等页面内容全部加载完毕包含页面dom元素图片 flash css 等

2.调整窗口大小事件

window.onresize=function(){}
window.addEventListerner('resize',function(){})
window.innerWidth 获取当前屏幕的宽度

三、定时器

1.两种定时器

setTimeout()
setInterval()

2.setTimeout() 定时器 -----回调函数 callback

window.setTimeout(调用函数，延时时间)window可省略延时时间是毫秒

3.停止setTimeout() 定时器 clearTimeout()

4.setInterval() 定时器每间隔一段时间调用一次函数

5.停止setInterval() 定时器 clearInterval()

6.this

全局作用域和普通函数中this指向window （计时器里面的this指向window）
方法调用中谁调用this指向谁
构造函数中this指向构造函数的实例

四、js执行队列（事件循环 event loop）

1.js是单线程

2.同步（执行栈/主车道）和异步（任务队列/应急车道）

同步是一个一个执行异步是多个任务同时执行
回调函数为异步任务

3.js执行机制 :先执行同步任务 ,遇到回调函数 ,放到任务队列 ,同步任务执行完成, 再执行异步任务

五、location对象

1.什么是location对象

location属性用于获取或设置窗体的url 并且用于解析url ----返回的是一个对象

2.url 统一资源定位符

3.location 对象属性

location.href 获取或者设置整个url
location.search 返回参数

4.location.assign() 重定向（可后退）

location.replace() 替换当前页面（不能后退）
location.reload() 重新加载页面如果强制刷新（true）；ctrl+f5

六、navigator对象

常用的属性userAgent 用来判断用户用pc端还是移动端打开该页面

七、history对象

back() 后退
forward() 前进
go(参数) 前进后退功能参数如果是1 前进1个页面如果是-1 后退一个页面

JS - Web APIs 应用js实现页面交互

Web APIs 和 JS 基础关联性

API 和 Web API

DOM（）

一、DOM简介

二、获取元素

三、事件基础

四、操作元素

五、节点操作

DOM重点核心---事件高级

一、注册事件（绑定事件）

二、删除事件（解绑事件）

三、DOM事件流：事件传播的过程

四、事件对象

五、阻止事件冒泡

六、事件委托(代理，委派)

七、常用的鼠标事件

八、常用的键盘事件

BOM

一、BOM概述

二、window对象常见的事件

三、定时器

四、js执行队列（事件循环 event loop）

五、location对象

六、navigator对象

七、history对象

常见问题FAQ

掘金(Flavor_) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

Web APIs 和 JS 基础关联性

API 和 Web API

DOM（）

一、DOM简介

二、获取元素

三、事件基础

四、操作元素

五、节点操作

DOM重点核心---事件高级

一、注册事件（绑定事件）

二、删除事件（解绑事件）

三、DOM事件流：事件传播的过程

四、事件对象

五、阻止事件冒泡

六、事件委托(代理，委派)

七、常用的鼠标事件

八、常用的键盘事件

BOM

一、BOM概述

二、window对象常见的事件

三、定时器

四、js执行队列（事件循环 event loop）

五、location对象

六、navigator对象

七、history对象

常见问题FAQ

掘金(Flavor_) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式