3webAPI

语法

描述

目标单个元素.innerText

获取目标单个元素下面的所有子孙元素的文本内容【获取文本】

目标单个元素.innerText=新标签结构【文本内容】

新标签结构整体会当文本处理，渲染到目标单个元素的内部，所以不会解析标签

语法

描述

目标单个元素.innerHTML

获取目标单个元素下面的所有子孙元素及其内容【获取文本+标签】

目标单个元素.innerHTML=新标签结构

新标签结构会解析到网页上，标签解析后不会出现在页面上

语法

描述

单个表单元素.value

获取input表单元素的内容【因为他是单标签】

语法

描述

dom.disabled

获取表单元素的禁用状态，返回值为true或false【默认值为false，没有禁用】【需要禁用js设置dom.disabled=true】

dom.checked

获取表单元素【单选框或多选框】的选中状态，返回值为true或false【默认值为false，没有选中】【单选框或多选框需要选中的加个checked属性就好】

dom.selected

获取下拉框的选中项状态，返回值为true或false【select下拉框的option选项需要选中的加个selected属性】

步骤

描述

1

给目标标签元素dom设置 data-自定义属性名=自定义属性值

2

在js代码的目标标签dom中使用dom.dataset.自定义属性名 来获取我们的自定义属性对应的属性值【dom.getAttribute(“data-自定义属性名”)】

3

修改自定义属性名直接使用dom.dataset.自定义属性名 = 修改值

步骤

描述

1

给目标标签元素dom设置 data-自定义属性名=自定义属性值

2

获取自定义属性使用dom.getAttribute(“data-自定义属性名”)

3

设置自定义属性dom.setAttribute(‘属性’,’值’);【dom.属性=“值”】

4

移除属性dom.removeAttribute(“属性”)

语法

描述

dom.style.css样式属性=样式属性对应的样式属性值

css样式属性采用小驼峰命名，

语法

描述

dom.style.cssText=”css样式”

一次性修改mubiao 元素的多个css样式，各个样式之间用分号隔开，写法和css代码完全一致

语法

描述

dom.classname=”类名或多类名”

classname属性直接赋值会修改原来的类名为新类名。所以想要保留原来类名的样式，可以使用多类名的方式赋值。想不需要原来的样式，类名中不使用原来的类名就可以达成目的。

语法

描述

dom.classList.add(‘目标类名’)

给元素添加目标类名

语法

描述

dom.classList.add(‘目标类名’)

将目标类名添加到元素dom的类名中

语法

描述

dom.classList.remove(‘目标类名’)

将目标类名从元素dom的类名中移除

应用

描述

if(dom.classList.contains(‘目标类名’){

dom.classList.remove(‘目标类名’)

}

有目标类名就移除该类名

if(dom){

dom.classList.remove(‘目标类名’)

}

根据目标类名获取元素dom，获取到dom就给dom移除掉该类名。

语法

描述

dom.classList.toggle(‘目标类名’)

先判断元素有没有目标类名，有目标类名就将目标类名删掉，没有就将目标类名添加到元素身上。

语法

描述

dom.classList.contains (‘目标类名’)

判断元素是否有目标类名，有类名返回值为true，没有类名返回值为false

语法

描述

let 定时器变量=setInterval(function(){

//函数体

},间隔时间)

在间隔时间后执行定时器内的函数体，定时器的返回值为数字【多个定时器同时出现时，根据书写代码的定时器顺序依次给定时器编号，定时器返回值为对应的编号】

语法

描述

clearInterval(定时器变量)

清除定时器变量保存的编号对应的定时器。【停止定时器】

要素

描述

事件源

什么元素

事件类型

什么时候执行

鼠标单击：click

鼠标双击：dblclick

鼠标移入：mouseenter

鼠标移出：mouseleave

鼠标移入：mouseover【有冒泡】

鼠标移出:mouseout【有冒泡】

事件处理函数

做什么事情

步骤

描述

1

获取DOM元素，通过”addEventListener”方法为元素添加事件监听

2

等待事件触发

3

事件触发后，执行事件处理函数

传统事件解绑语法

描述

元素.onclick=null

传统事件【元素.on事件类型】函数的解绑

元素.removeEventListener(‘事件类型’，事件函数名)

元素.addEventListener(‘事件类型’,事件函数名)绑定的事件解绑

应用

描述

//定义用来保存定时器编号的信号量

let timeID

单个元素.addEvenListener(‘事件类型’,function(){

//在开启定时器之前关闭之前的定时器

if(timeID){

clearInterval(timeID)

}

timeID=setInterval(function(){

//定时器执行函数体

})

})

保存定时器的返回值的信号量需要保存到全局，这样在开启每个定时器之前都可以提前关闭前面开启的定时器。这样其他元素也可以通过事件函数来关闭刚刚那个元素开启的定时器。

语法

描述

input表单元素.addEventListener(“focus”,function(){

//事件处理函数

})

当表单元素获取到焦点时执行事件处理函数

input表单元素.addEventListener(“blur”,function(){

//事件处理函数

})

当表单元素失去焦点时执行事件处理函数

语法

描述

目标表单元素.addEventListener(‘keydown’,function(){

//事件处理函数代码

})

在目标表单元素中当键盘按下时触发该事件函数。

目标表单元素.addEventListener(‘keyup’,function(){

//事件处理函数代码

})

在目标表单元素中当键盘弹起时触发该事件函数。

目标表单元素.addEventListener(‘input’,function(){

//事件处理函数代码

})

在目标表单元素中当目标元素输入单个字符时触发该事件函数。

事件对象属性

描述

e.target

点击哪个元素，就返回哪个元素【事件源中鼠标点击的位置那个事件源中的最内层子元素】

e.currentTarget

返回事件源【调用当前事件函数的事件源】

e.key

获取键盘事件【keyup 和 keydown】的按下键盘的键上面对应的字符串

e.keyCode

获取键盘事件【keyup 和 keydown】的按下键盘的键上面对应的字符串对应的ascall码

e.type

返回事件类型 比如click mouseover 不带on

e.preventDefault()

该方法 阻止默认事件(默认行为)标准 比如不让链接跳转 让提交按钮不提交

e.stopPropagation()

阻止冒泡 标准【阻止事件流的传播：

1.冒泡阶段:

A.只会执行添加事件的对象 【即父元素的事件不会被触发】 B.父元素是冒泡阶段的可以继 续设置事件

2.捕获阶段：

A.设置该方法后，子元素是捕 获阶段的将设置不了事件【设置事件无效】 】

语法

描述

document.querySelectorAll(“单选或复选框表单元素选择器:checked”)

获取目标单选或复选框选择器选中的表单元素，且状态为选中的元素

案例

等价写法

If(checkAll.checked){

}

事件阶段

描述

捕获阶段

从父到子

目标阶段

真正触发事件的元素

冒泡阶段

从子到父【先执行子元素的事件，再一层一层往上执行父元素的事件】

案例

const ul = document.querySelector("#ul");

const lis = document.querySelectorAll(".li");

ul.addEventListener("click", function () {

event.target.style.backgroundColor = "pink";

});

语法

描述

事件对象.stopPropagation()

阻止事件冒泡

语法

描述

事件对象.preventDefault()

阻止事件源的默认行为【a事件源的默认跳转功能、】

语法

描述

元素名.addEventListener(‘scroll’,function(e){

//事件处理函数体

})

当在目标元素中且目标元素有滚动条时，滚动鼠标滚轮时触发该事件处理函数

语法

描述

window.addEventListener(‘resize’,function(){

//事件处理函数体

})

当浏览器窗口发生变化时触发该事件

语法

描述

元素名.scrollWidth

目标元素实际内容区域宽度

元素名.scrollHeight

目标元素实际内容区域高度【包括超出部分被隐藏的区域】

元素名.scrollTop

获取元素自己滚动条向上滚动的距离

元素名.scrollLeft

获取元素自己滚动条向左滚动的距离

语法

描述

元素.offsetWidth

获取元素的盒模型宽度

元素.offsetHeight

获取元素的盒模型高度

元素.offsetLeft

获取元素距离最近定位父元素的左实际距离

元素.offsetTop

获取元素距离最近定位父元素的上实际距离

语法

描述

元素.clientWidth

元素可见部分宽

元素.clientHeight

元素可见部分高

clientLeft

可见部分位置【左边框宽度】

clientTop

可见部分位置【上边框宽度】

语法

描述

元素名.getBoundingClientRect()

返回值为一个对象

对象里面有height属性，返回调用元素的内容高度

语法

描述

滚动元素.scrollTo(x,y)

设置元素滚动距离

属性方法

描述

d.getFullYear()

获取当前时间的年份

d.getMonth()

获取当前时间的月份-1

d.getDate()

获取当前时间的几号

d.getDay()

获取当前时间的周几

d.getHours()

获取当前时间的小时数

d.getMinutes()

获取当前时间的分钟数

d.getSeconds()

获取当前时间的秒数

d.getTime()

获取当前时间的时间戳

d.toLocaleString()

日期格式化年月日时分秒【2022/8/12 09:58:04】

d.toLocaleDateString()

日期格式化年月日【2022/8/12】

获取当下时间毫秒数

描述

d.getTime()

获取当下时间毫秒数

new Date().getTime()

获取当下时间毫秒数

+new Date()

获取当下时间毫秒数

Date.now()

获取当下时间毫秒数

获取未来时间毫秒数

描述

+new Date(‘未来日期化格式’)

获取未来时间毫秒数

节点类型

描述

元素节点

所有的标签+属性+内容

属性节点

所有的属性

文本节点

所有的文本

其他

语法

描述

dom对象.parenrNode

返回值为最近一级的父节点，找不到返回null

也可以表示获取dom元素对象的父元素

语法

描述

dom对象.children

返回值为dom对象元素里所有子元素组成的伪数组【通过伪数组的下标可以获取目标子元素】

语法

描述

dom对象.previousElementSibling

返回值为dom对象元素上一个兄弟元素

dom对象.nextElementSibling

返回值为dom对象元素下一个兄弟元素

语法

描述

document.createElement(‘元素标签名’)

创建标签名的元素标签

语法

描述

克隆元素.cloneNode(true)

返回值为获取的克隆元素，包含后代节点

克隆元素.cloneNode(false)

返回值为获取的克隆元素，不包含后代节点

克隆元素.cloneNode()

返回值为获取的克隆元素，不包含后代节点

语法

描述

dom对象.appendChild(追加的元素)

作为dom元素的最后一个子元素

dom对象.insertBefore(追加的元素,DOM2)

作为dom元素的子元素位置在DOM2的前面

语法

描述

dom对象.removeChild(要删除的子元素对象)

在JavaScript原生dom操作中，要删除原生必须通过父元素删除

如不存在父子关系删除不成功

删除节点与隐藏节点(display:none)区别：隐藏节点是看不见但仍然存在，删除时html中不再有此节点。

事件类型

描述

touchstart

触摸DOM元素时触发

touchmove

DOM元素上滑动时触发

touchend

结束触摸DOM元素时触发

DOM

BOM

文档对象模型

浏览器对象模型

将文档当作一个对象看待

将浏览器当作一个对象看待

顶级对象是document

顶级对象是window

主要学习的是操作页面元素

学习的是浏览器窗口交互的一些对象

语法

描述

let timer = setTimeout(回调函数,间隔时间)

间隔多少时间后执行该回调函数

语法

描述

clearTimeout(timer)

清除延时器，延时器只会执行一次，一般不用

语法

描述

location

location.href

获取地址栏完整数据

location.search

获取地址栏?和后面的字符组成的字符串

location.hash

获取地址栏#和后面的字符组成的字符串

location.reload()

刷新页面

属性

描述

navigator.userAgent

属性

描述

history.back()

后退一步【一般用于某个按键的事件触发，后退到上一个页面】

history.go(-1)

后退一步【一般用于某个按键的事件触发，后退到上一个页面】

history.forward()

前进一步【一般用于某个按钮，回到前面去过的页面】【点了后退按钮之后，才可以点击前进按钮】

history.go(1)

前进一步【一般用于某个按钮，回到前面去过的页面】

语法

描述

localStorage.setItem(“键”,”值”)

存数据【值只能是字符串、数字、数组】【存对象需要先将对象转为字符串才可以存】

localStorage.getItem(‘键’)

取数据【没有则返回空null】

localStorage.setItem(‘键’,’新值’)

改数据

localstorage.removeItem(‘键’)

删数据

语法

描述

JSON.stringify(对象名)

将参数对象转换为字符串

JSON.parse(JSON字符串)

将参数字符串转为对象【这个字符串中必须是对象的严格模式，即属性必须加双引号】

步骤

描述

代码描述

1

一进页面就将本地存储的数据赋值给data数据，本地存储没有数据就将空数组[]赋值给data

const data=JSON.parse(localStorage.getItem("arr")) || []

2

封装一个渲染数组中数据的函数【方式一】【根据数据实时渲染页面的函数，需要每次清除原先已经渲染过的数据，所以第一行有tbody.innerHTML=’’这一行代码】

function render(data) {

tbody.innerHTML=’’

for (let i = 0; i < data.length; i++) {

const tr =document.createElement("tr");

tr.innerHTML = `

<td>${i}</td>

<td>${data[i].uid}</td>

<td>${data[i].uname}</td>

<td>${data[i].age}</td>

<td>${data[i].gender}</td>

<td>${data[i].salary}</td>

<td>${data[i].city}</td>

<td>

<a href="javascript:">删除</a>

</td>`;

tbody.appendChild(tr);

}

}

2

封装一个渲染数组中数据的函数【方式二】【根据数据实时渲染页面的函数，需要每次清除原先已经渲染过的数据，所以第一行有tbody.innerHTML=’’这一行代码】

function render(data) {

tbody.innerHTML=’’

for (let i = 0; i < data.length; i++) {

let str = "";

const tr = document.createElement("tr");

for (let key in data[i]) {

str += `<td>${data[i][key]}</td>`;

}

str += `<td>

<a href="javascript:">删除</a>

</td>`;

tr.innerHTML = str;

tbody.appendChild(tr);

}

}

3

一进页面就将本地存储的数据渲染到页面上

render(data)

4

每次更新数据后将数据更新到本地存储

data.push(obj);

localStorage.setItem("arr", JSON.stringify(data));

用法

描述

//获取所有有name属性的表单元素且在form表单元素的子代

const items=document.querySelectorAll("form [name]");

即获取所有用户输入了数据的表单元素

form.addEventListener(“submit”,function (e) {

e.preventDefault()

})

表单事件的第一件事就是阻止表单表单的默认行为【如点击提交按钮就会地址跳转】

//items[i]为需要输入的每个表单元素

//items[i].name为接收表单元素输入的值【元素的name属性值为地址栏需要接收输入值的属性】

for (let i = 0; i < items.length; i++) {

obj[items[i].name] = items[i].value;

}

//将元素name属性值作为对象中存储的一个属性，而该属性对应的值就为用户输入的数据

//数据发生改变就需要立即存放到本地存储中

data.push(obj);

localStorage.setItem("arr", JSON.stringify(data));

//将这组对象数据存入data数组中

//将数据存入本地localStorage

目标表单form元素.reset()

//清空表单内容，常用于提交按钮点击后

案例

描述

if (data.length == 0) {

obj.uid = 1;

} else {

obj.uid = data[data.length-1].uid+1;

}

当点击提交按钮时，会先判断data中有无数据，没有数据就初始化对象的uid为1，否则就将最后一个数据的uid加1的值给到最新数据

表单验证【匹配】

过滤敏感词【替换 】

字符串中提取需要的部分【提取】

语法

描述

var 变量名 = new RegExp(/表达式/)

构造函数创建正则

var 变量名 = new RegExp(参数1,参数2)

参数1为正则的规则

参数2为正则表达式修饰符【参数为字符串】

var 变量名 = /表达式/修饰符

字面量创建正则

“i”:表示不区分大小写ignoreCase

“g”:表示全局匹配global

“m”:表示换行匹配multiline

符号

描述

\d

匹配0-9之间任一数字，相当于[0-9]

\D

匹配0-9以外的任一字符，相当于[^0-9]

\w

匹配任一字母，数字，下划线，相当于[a-zA-Z0-9]

\W

匹配所有字母，数字，下划线以外的字符，相当于[^a-zA-Z0-9]

\s

匹配空格【包括换行符，制表符，空格符等】,相当于[\r\n\t\v\f]

\S

匹配任一非空格字符，相当于[^\r\n\t\v\f]

语法

描述

str.replace(reg,’替换文本’)

在字符串str中找是否有满足正则的字符，有就替换为替换文本

语法

描述

选择器{

width: calc(100vw - 200px);

}

选中元素的宽度为屏幕宽度减去200px后剩下的值。