WebApi笔记

DOM

查找元素的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1.document.getElementById('ID值')
  参数:区分大小写,不要加#
  返回值:元素对象或null
2.document.getElementsByClassName('class名')
  参数:区分大小写  不用加.
  返回值:元素对象集合,以伪数组的形式保存
3.document.getElementsByTagName('标签名');
  参数:标签名
  返回值:元素对象集合,以伪数组的形式保存
4.document.querySelector('css选择器')
	参数:css选择器
  返回值:元素对象
  // 只会获取第一个元素
5.document.querySelectorAll('css选择器')
	参数:css选择器
  返回值:元素对象集合,以伪数组的形式保存

生词表：

鼠标事件1:

语法:

1
2
3
4

var a = document.querySlector('botton') //获取一个按钮
a.onclick = funcation (){  // 设置按钮点击时触发的事件
  document.body.bgColor = 'pink'
}

更改元素内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

element.innerText  // 前边的element是元素,需先查找
更改元素内的文本内容(会去除空格和换行)
获取元素内的文本内容


element.innerHTML  // 前边的element是元素,需先查找
更改元素内容(包括标签里的所有HTML内容,保留空格和换行)
获取元素内容(包括标签里的所有HTML内容)

语法:

1.获取内容
var a = document.querySlector('span') //获取一个span标签
var getText = a.innerText //获取span标签里的内容
conselo.log(getText) // 打印span表情里的内容

var a = document.querySlector('div') //获取一个div标签
var getHtml = a.innerHtml //获取span标签里的内容
conselo.log(getText) // 打印span表情里的内容

2.修改内容
var a = document.querySlector('span') //获取一个span标签
a.innerText = '要修改的文本内容'

var a = document.querySlector('div') //获取一个div标签
a.innerHTML = '要修改的元素内容'

元素操作：

获取、元素属性:

属性直接.出来

获取属性值:

Element.getAttribute(‘自定义属性名’)

设置属性:

Element.setAttribute(‘属性名’,属性值)

H5新增dataset

在HTML5中我们可以使用data-前缀设置我们需要的自定义属性,来进行数据存放 使用data-set可以获取这些数据

1
2
3
4
5
6

<div id='aaa' data-food='皮皮虾'></div>
<script type='text/javascript'>
  var len = document.getElementById('aaa')
  console.log(len.dataset.food) //打印出皮皮虾
  delete len.dataset.food // 删除元素的data-food属性
</script>

设置data属性:

Element.setAttribute(‘属性名’)

直接:

元素.dataset.属性名 = 值

获取data属性

element.dataset.data属性名

删除data属性

delete 元素.dataset.data属性名

创建元素:createElement

var a = document.createElement(‘标签名’)

追加元素(增添元素):

node.appendChild(元素对象)

或 node.appendChild(‘元素标签名’) 添加一个标签

查找元素子节点元素:(查找元素下所有的元素)

返回值为一个装着子元素的伪数组

元素.children

获取到的子节点元素以伪数组的形式保存,可通过下标访问

获取父亲节点:

元素.parentNode

获取下一个兄弟元素:

元素.nextElementSibling

获取上一个兄弟元素:

元素.previousElementSibling

删除子元素:

语法：

父元素.removeChild(实参1)

实参1为元素或则子节点元素

作用：删除这个父元素里的指定子元素

删除元素:

元素.remove()

直接删除当前元素

(伪)数组.remove(数据)

1
2

元素.classList.remove('color')
// 删除元素class名列表里的color名

在父元素前面添加节点(或元素):

父元素.insertBefore(要添加的元素,添加的位置节点)

事件监听(多使用事件)

addEventListener(‘事件类型’,事件处理程序,false)

参数1:事件类型

参数2:事件处理程序

参数3:控制是否冒泡(布尔型,默认是false,冒泡模式)

1
2
3
4
5
6
7
8
9
10
11

// btn为获取的元素
btn.addEventListener('click',function(){

	alert(1)

})
btn.addEventListener('click',function(){

	alert(2)

})

注意 : 事件类型不加on

移除监听事件:

元素.removeEventListener(‘事件名’,函数方法)

元素.removeEventListener(‘事件名’,函数方法)

事件函数的形参:event

event.target 可获取一些元素的属性

event.target相当于触发事件的元素

1
2
3
4
5

元素.onclick = function(event){
  event.target.nodeName //获取元素标签名
	event.target.classList //获取元素的类名伪数组
  event.target.innerHTML //获取元素的内容
}

清除事件:

元素.事件 = null

例:

1

btn.onclick = null

清除事件监听:

元素.removeEventListener(type, listener[,useCapture]) ;

元素.detachEvent(eventNameWithOn,callback);

阻止标签（元素）默认行为：

1
2
3

元素.preventDefault()
e.preventDefault()
// 阻止元素默认行为  DOM标准写法

兼容ie8的写法：

1
2
3

元素.returnValue = false
// 我们可以利用return false 也能阻止默认行为 没有兼容问题
return false

DOM元素的操作：

对于dom操作,我们主要针对元素的操作.主要有创建、增、删、改、查、属性操作、事件操作.

1.创建 :

1. document.write —— 向文档写入数据
2. innerHTML —— 写入标签体内容(包括标签和空格和换行)
3. innerText —— 写入标签体内容(纯文本,不包含标签和空格和换行)
4. createElement —— 创建一个元素

2.增加 :

1. appendChild —— 添加一个子元素
2. insertBefore —— 在元素之前添加一个元素(兄弟元素)

3.删除 :

1. removeChild —— 删除元素的子元素
2. remove() —— 删除当前元素,括号里可以写冒号里边写删除目标的名字

4.修改 :

主要修改dom的元素属性,dom元素的内容、属性,表单的值等

1. 修改元素属性 : src 、 href 、 title 、 checked等
2. 修改普通元素内容 : innerHTML 、 innerText
3. 修改表单元素 : value 、 type 、 disabled 等
4. 修改元素样式 : style 、 className

5.查询 :

主要获取查询dom的元素

1. DOM提供的API方法 : getElementById 、 getElementsByTagName 古老用法 不推荐
2. H5提供的新方法 : querySelector 、 querySelectorAll 提倡

6.属性操作:

主要针对自定属性

1. setAttribute : 设置dom元素的属性值
2. getAttribute : 获得dom元素的属性值
3. removeAttribute 移除元素属性

事件高级：

注册事件有两种方式

1.普通事件绑定：

2.事件监听：

addEventListener()事件监听 (IE9以后支持)

eventTarget.addEventListener(参数1，参数2，参数3)

方法将制定的监听器注册到eventTarget（目标对象）上，对该对象触发指定的事件时，就会处理处理函数。

阻止事件冒泡：

StopPropagetion()

1
2

let btn = document.querySelector('button')
btn.stopPropagation()

阻止a标签的跳转功能：

1

<a href="javascript:void(0);"

鼠标事件2：

禁止鼠标右键菜单：

contextmenu (事件)

作用：控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

1
2
3

Element.addEventListener('contextmenu',function(event){
  //事件内容
})

禁止鼠标选中： （selectstart）

selectstart (事件)

1
2
3

addEventListener('selectstart',function(event){
    //事件内容
})

键盘事件：

keydown键盘按下事件：

通过事件监听设置键盘按下事件

作用：通过键盘按下实现某些功能

1
2
3
4

document.addEventListener('keydown',function(event){
  console.log('222')
})
// 在页面中按下键盘任意键的时候在控制台输出222

Keypress键盘输入事件：

通过事件监听设置键盘输入事件

作用：通过键盘按下实现某些功能

1
2
3
4

document.addEventListener('keypress',function(event){
  console.log('111')
})
// 在页面中按下键盘任意键的时候在控制台输出111

keyup键盘弹起事件：

通过事件监听设置键盘弹起事件

作用：通过键盘弹起实现某些功能

1
2
3
4

document.addEventListener('keyup',function(event){
  console.log('333')
})
// 在页面中按下键盘任意键弹起的时候在控制台输出333

在页面中按下键盘任意键 弹起 的时候在控制台输出333

ASCII表：

字母键ASCII表：

数字键上的ASCII码：

数字键盘上的键ASCII表：

功能键ASCII表：

键盘事件执行顺序：

keydown > keypress > keyup

键盘事件区别：

keydown 和 keyup 不能识别键盘大小写，keypress可以识别

keydown 和 keyup 能识别键盘的功能键，keypress不能识别功能键

属性key(键盘键名)：

作用：获取键盘输入的东西

通过事件监听的event形参.key 可获得输入的键盘键名,配合 key事件 使用

1
2
3
4

document.addEventListener('keydown',function(event){
  console.log(event.key)
})
// 当键盘按下的时候控制台输出键盘按下的键名

属性keyCode(键盘按下输出对应的ASCII码)：

作用：获取键盘输入的键对应的ASCII码

通过事件监听的event形参.key 可获得输入的键盘键名,配合 key事件 使用

1
2
3
4

document.addEventListener('keydown',function(event){
  console.log(event.keyCode)
})
// 当键盘按下的时候控制台输出键盘按下的键对应的ASCII码

元素的offset属性(offset系列)

概述:offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移量)、大小等.

1. 获得元素距离带有定位父元素的位置
2. 获得元素自身的大小(宽度高度)
3. 注意:返回的数值都不带单位

offset 与 style 区别

offset

• offset 可以得到任意样式表中的样式值

• offset 系列获得的数值是没有单位的

• offsetWidth 包含padding+border+width

• offsetWidth 等属性是只读属性，只能获取不能赋值

• 所以，我们想要获取元素大小位置，用offset更合适

style

• style 只能得到行内样式表中的样式值

• style.width 获得的是带有单位的字符串

• style.width 获得不包含padding和border 的值

• style.width 是可读写属性，可以获取也可以赋值

• 所以，我们想要给元素更改值，则需要用style改变

因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes

获取鼠标在盒子内的坐标

利用鼠标距离页面的距离和元素距离页面的距离

下拉框的change事件 (发生改变触发事件)

通过改变下拉框的选项改变,触发事件

下拉框的selectIndex属性(可读可写)

实际返回值是select选项(option)中选中的下标

let select = document.querySelector(‘select’)

获取到下拉框后

console.log(select.selectIndex)

可打印下标值

BOM

window事件：

页面（窗口）加载事件1：（load事件）

load事件：等待所有的dom元素 图片 css 等全部加载完毕之后再来执行load的处理程序

一般情况是写在body标签前面，因为会等body里面的东西加载完后执行load的处理程序

作用：等页面渲染完后在执行javasrcipt代码，防止页面加载时间过长，加快页面渲染速度

语法：(需要用到事件监听,或普通的绑定事件)

1
2
3
4

// 事件监听
window.addEventListener('load',function(){
  //这里写页面加载好后的js代码
})

1
2
3
4

// 普通事件绑定
window.onload = function(){
  //这里写页面加载好后的js代码
}

页面（窗口）加载事件2：（DOMContentLoaded事件）

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。

语法：与load事件已致（上一条）

如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户体验，此时DOMContentLoaded事件比较合适

注意：IE9以上才支持！

调整窗口大小事件(window.onresize)：

resize是调整窗口大小时加载事件，当触发时就调用的处理函数

语法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//1.普通事件注册
window.onresize = function(){
  // 一般用与响应式布局
  if(window.innerWidth < 200){//如果浏览器窗口宽度小于200px
    box.style.display = "none" //设置盒子隐藏
  }else{ //否则
    box.style.display = "block" //设置盒子显示为块元素
  }
}
//2.绑定事件监听
window.addEventListener('resize',function(){
  // 一般用与响应式布局
  if(window.innerWidth < 200){//如果浏览器窗口宽度小于200px
    box.style.display = "none" //设置盒子隐藏
  }else{ //否则
    box.style.display = "block" //设置盒子显示为块元素
  }
})

注意：只要窗口大小发生像素变化，就会触发这个事件

window.innerWidth —— 当前浏览器窗口宽度

定时器：（回调函数）

回调函数：

简单理解：回调，就是回头调用的意思。上一件事干完，再回头调用这个函数。

例如：定时器中的调用函数，事件处理函数，也是回调函数

设置定时器setInterval：（window.setInterval）

作用：定时器

语法：

1
2
3
4

window.setInterval(function(){
  console.log(1)
},5000)
// 每隔5000毫秒控制台输出一个1

设置倒计时定时器setTimeout：（window.setTimeout）

作用：倒计时执行代码

语法：

1
2
3
4

window.setTimeout(function(){
  console.log(1)
},5000)
// 定时过5000毫秒 后 控制台输出一个1

清除定时器clearInterval：（window.clearInterval）

作用：清除 “ 定时器 “

前提：需设定定时器的标识符（tiemid，名字可以随机），tiemid为定时器存储的唯一标识

语法：

1
2
3
4
5
6
7

let tiemid =  window.setInterval(function(){
  console.log(1)
},5000)
// 每隔5000毫秒控制台输出一个1
btn.onclick = function(){
  clearInterval(tiemid) //清除定时器
}

同步和异步：

console.log() 和 定时器

console.log(‘我是同步代码从上往下执行’)

定时器为异步代码,后执行

同步加载，阻塞模式，会阻止浏览器的后续处理

异步加载，不会阻塞同步代码的加载

大白话：console.log(同步代码)先执行，定时器(异步代码)后执行

window下的对象

location对象的属性

window对象给我们提供了一个location属性用于获取或设置窗体的URL,并可以用于解析URL . 因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象.

URL地址:”https://“

location对象的方法

navigator对象

​ navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

1
2
3

console.log(navigator.userAgent)
//打印的是客户机的浏览器相关信息 
// "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"

下面前端代码可以判断用户那个终端打开页面，实现跳转

1
2
3
4
5

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

history对象

​ window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

元素偏移量offset系列

offset概述

offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等.

1. 获得元素距离 带有定位父元素 的位置.
2. 获得元素自身的大小(宽度高度)
3. 注意 : 返回的数值都不带单位

offset 与 style 区别

offset

• offset 可以得到任意样式表中的样式值

• offset 系列获得的数值是没有单位的

• offsetWidth 包含padding+border+width

• offsetWidth 等属性是只读属性，只能获取不能赋值

• 所以，我们想要获取元素大小位置，用offset更合适

style

• style 只能得到行内样式表中的样式值

• style.width 获得的是带有单位的字符串

• style.width 获得不包含padding和border 的值

• style.width 是可读写属性，可以获取也可以赋值

• 所以，我们想要给元素更改值，则需要用style改变

因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes

获取鼠标在盒子内的坐标

利用鼠标距离页面的距离(pageX/Y) 和 盒子与页面的距离(box.offsetLeft/Top)

鼠标与页面的距离 - 盒子与页面的距离 = 鼠标在盒子内的坐标

通过事件监听盒子

1
2
3
4
5
6

var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
})

元素的可视区CLIENT系列

client概述

client翻译过来是客户端 , 我们使用client系列的相关属性来获取元素可视区的相关信息.通过client系列的相关属性可以动态的得到该元素的管框大小,元素大小等…..

元素滚动SCROLL系列

scroll事件:

window或者元素滚动时触发事件

scroll概述:

scroll翻译过来就是滚动的意思 , 使用scroll系列相关属性可以动态的得到该元素的大小、滚动距离等…..

window下的pageXOffset和pageYOffset属性

pageXOffset 文档(页面)被卷入的宽度

pageYOffset 文档(页面)被卷入的高度

1
2
3
4

document.onscroll = function(){
				console.log('文档被卷入的宽度:',window.pageXOffset,'px')
				console.log('文档被卷入的高度:',window.pageYOffset,'px')
			}

本地存储

1、数据存储在用户浏览器中

2、设置、读取方便甚至刷新不丢失数据

3、容量较大 , sessionStorage约5M、localStorage约20M

4、只能存储字符串 , 可以将对象JSON.stringify()编码后存储

5、可以通过JSON.parse()转码后访问

window.sessionStorage窗口缓存数据

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3、以键值对的形式存储使用

存储数据 :

1

sessionStorage.setItem(key,value)

获取数据 :

1

sessionStorage.getItem(key)

删除数据 :

1

sessionStorage.removeItem(key)

清空数据 : (清空所有数据)

1

sessionStorage.clear()

key 键名 , value 值

Window.localStorage电脑缓存

1、声明周期永久生效 , 除非手动删除 否则关闭页面也会存在

2、可多窗口(页面)共享(统一浏览器可以共享)

3、以键值对的形式存储使用

存储数据 :

1

localStorage.setItem(key,value)

获取数据 :

1

localStorage.getItem(key)

删除数据 :

1

localStorage.removeItem(key)

清空数据 : (清空所有数据)

1

localStorage.clear()

JSON.stringify(obj)

将对象转化为字符串对象

JSON.parse(obj)

将字符串转成js对象