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

Flavor_
1,240 阅读10分钟

Web APIs 和 JS 基础关联性

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

API 和 Web API

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

    简单理解：是一种工具，以便实现想要完成的功能

  2. 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()方法 --返回带有指定标签名的对象的集合

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

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

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

  1. document.querySelector('选择器') //根据指定选择器返回第一个元素对象
  2. document.getElementsByClassName('类名') //根据类名返回元素对象集合
  3. document.querySelectorAll('选择器') //返回指定选择器的所有元素对象集合 4.获取特殊元素(body,html)
  4. 获取body ： document.body
  5. 获取html： document.documentElement

三、事件基础

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

  • 事件源： 事件被触发的对象 as:按钮
  • 事件类型： 如何触发? 什么事件? 比如鼠标点击(onclick) 鼠标经过 键盘按下
  • 事件处理程序： 通过一个函数赋值的方式 完成 2.执行事件的步骤
  • 获取事件源
  • 注册事件(绑定事件)
  • 添加事件处理程序(采取函数赋值方法)

四、操作元素

1.改变元素的按钮

  1. element.innerText //从起始位置到终点位置的内容，但它去除html标签 同时空格和换行也会去掉
  2. 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" alt="" title="刘德华">
    <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 类名样式操作

注意:

  1. JS里面的样式采取驼峰命名法 fontSize backgroudColor

  2. JS 修改 sytle 样式操作 产生的是行内样式 css 权重比较高

  3. className 会直接更改元素的类名，会覆盖原先的类名 5.排他思想 干掉所有人，留下他自己

    按钮1 按钮2 按钮3 按钮4 按钮5

6.自定义属性的操作

  1. 获取属性值
  • element.属性
  • element.getAttribute('属性')
  1. 设置属性值
  • element.属性='值'
  • element.setAttribute('属性'，'值')
  1. 移除属性
  • element.removeAttribute('属性') 7.H5自定义属性

自定义属性目的：是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中

  1. 设置H5自定义属性 规定自定义属性date- 开头 作为属性名并赋值

    <div data-index="2" data-list-name="andy"></div>

  2. 获取H5自定义属性 element.getAttribute('属性') H5新增element.dataset.index 或者 element.dataset['index']

注意：

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

五、节点操作

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

  1. 利用DOM提供的方法获取元素
  2. 利用节点层次关系获取元素 2.节点概述 在DOM中 节点用node
  3. nodeType（节点类型） nodeName（节点名称） nodeValue(节点值)
  4. 元素节点 1 属性节点 2 文本节点 3
  5. 元素节点是主要操作 3.节点层级 父子兄层级关系
  6. 父级节点
  • node.parentNode得到的是离元素最近的父级节点 如果找不到父节点 返回null
  1. 子节点
  • 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,指定元素) 指定子元素前面插入元素

在页面中添加一个新的元素：1.创建元素 2.添加元素 5.删除节点

  • node.removeChild(child)

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

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

  1. 如果括号参数为空或者false 则浅拷贝 只复制标签不复制里面的内容
  2. 如果括号参数为 true 则深拷贝 全复制 7.三种动态创建元素区别
  • document.write() 如果页面文档流加载完毕 会导致页面重绘
  • element.innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接）
  • document.createElement() 创建多个元素效率稍微低一点点，但结构更清晰

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

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

  1. 传统注册方式：具有唯一性，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
  2. 方法监听注册方式：元素.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事件流：事件传播的过程

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

四、事件对象

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

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

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

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

兼容性：

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

五、阻止事件冒泡

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

  1. e.stopPropagation(); //标准

  2. e.cancelBubble=true; //ei678 2.阻止事件冒泡的兼容性解决方案

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

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

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

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

七、常用的鼠标事件

  1. 禁止鼠标右键菜单： contextmenu
  2. 禁止鼠标选中：selectstart 2.鼠标事件对象：MouseEvent 键盘事件对象：KeyboardEvent
  3. e.clientX/Y 返回的是可视区的x y 坐标
  4. e.pageX/Y 返回的是相对于文档页面的x y坐标
  5. e.screenX/Y 返回的是相对于电脑屏幕的x y坐标
  6. mousemove 鼠标移动
  7. mousedown 鼠标按下
  8. mouseup 鼠标松开

八、常用的键盘事件

  1. 键盘事件对象：KeyboardEvent
  • onkeyup 某个键盘按键被松开的时候触发
  • onkeydown 某个键盘按键被按下时触发
  • onkeypress 某个键盘按键被按下时触发 但是它不识别功能键 比如ctrl shift 箭头等

三个事件的执行顺序 down>press>up

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

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

BOM

一、BOM概述

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

BOM>DOM

二、window对象常见的事件

1.窗口加载事件

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

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

2.调整窗口大小事件

  1. window.onresize=function(){}
  2. window.addEventListerner('resize',function(){})
  3. 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对象

  1. back() 后退
  2. forward() 前进
  3. go(参数) 前进后退功能 参数如果是1 前进1个页面 如果是-1 后退一个页面
avatar
文章
阅读
粉丝
相关推荐
JavaScript 基本数据类型知识总结
611阅读
 · 
7点赞
D1-初识JavaScrpt
374阅读
 · 
0点赞
小白入门 JavaScript-DOM 编程艺术（一）
211阅读
 · 
0点赞
TypeScript
207阅读
 · 
1点赞
网道JavaScript教程 笔记
304阅读
 · 
1点赞