WepAPI阶段单词汇总

***      (红色标记为高频面试题)

DOM

获取单个元素:docement.querySelector()
获取多个元素:document.querySelectorAll()
获取文本:元素.inner.Text
获取文本 + 标签:inner.HTML

元素属性操作:

(1)元素.href  = 值
(2)元素.src = 值

表单元素中独有属性

(1)表单内容: 元素.value
(2)表单状态: 布尔类型
元素.disabled :是否禁用
元素.checked :是否选中(用于radio与checkbox中)
元素.selected:是否选中(用于下拉菜单select>option中)

元素自定义属性

(1)dataset语法(只能操作固定格式的自定义属性)
     设置属性:  <标签名  data-属性名="属性值"></标签名>
     获取属性:   元素.dataset.属性名
(2)attribute语法(可以操作任意格式的自定义属性)
     获取属性:元素.getAttribute('属性名')
     新增属性:元素.setAttribute('属性名',属性值)
     删除属性:元素:removeAttribute

元素style操作样式(行内权重)

元素.style.样式名 = 样式值
元素className操作样式
元素.className = '类名'
元素.classList
(1)新增类名: 元素.classList.add('类名')
(2)移除类名: 元素.classList.remove('类名')
(3)切换类名: 元素.classList.toggle('类名')
    * 切换:有则移除,无则新增

事件监听

(1)点语法注册事件: 事件源.on事件类型 = 事件处理函数
(2)事件源.addEventListener('事件类型',事件处理函数)//   推荐使用,同名事件不会被覆盖,同时拥有事件更多特性

***注意点： 事件在注册的时候，事件处理函数 不会执行 。 只有当用户产生交互触发事件，才会 执行 

事件类型:

鼠标点击:click
鼠标双击:dblclick
鼠标移入:mouseenter
鼠标移出:mouseleave
鼠标移动:mousemove
鼠标按下:mousedown
鼠标松开:mouseup
成为焦点:focus
失去焦点:blur
滚动条:scroll
大小变化:resize
键盘按下:keydown
键盘松开:keyup

事件对象(存储与事件触发相关信息)

使用:给事件处理函数添加形参(这里我用的e)
鼠标触发点:e.pageX    e.pageY
按键信息:e.key
事件捕获
唯一注册方式:元素.addEventListener('事件类型',事件处理函数,true)

事件流三个阶段

事件对象.eventphase(获取的值是1,2,3)
1-捕获阶段->2-目标阶段->3-冒泡阶段
阻止事件流动
事件对象.stoppropagation()
阻止默认事件(html中有部分标签自带点击事件:form表单,a标签)
事件对象.preventDefault()

三大家族

(1)offset家族:获取元素'自身'的真实宽高 和 位置
(2)scroll家族:获取元素'内容'的真实宽高 和 位置
(3)client就在:获取元素'可视区域'的 宽高 和 位置
语法一样,例:
元素.offsetWidth/Height
元素:offsetTop/Left

页面加载事件

(1)load :等待DOM树 + 外部资源(图片,css文件等)加载完毕
(2)DOMContentLoaded:等待DOM树加载完毕

节点    node:网页一切内容皆为节点

其分为:元素节点,属性节点,文本节点,注释节点
查询节点
(1)获取子节点:元素.childNodes
(2)获取子元素:元素.children
(3)获取兄弟元素:
获取上一个元素: 元素.previousElementSibling
获取下一个元素: 元素.nextElementSibling
(4)获取父元素: 元素.parentNode
新增节点
(1)在内存中创建空标签: document.createElement('标签名')
(2)设置标签内容
(3)添加到页面dom :
新增到最后面: 父元素.appendChild(元素)
新增到元素前面: 父元素.insertBefore(要加的元素,哪一个元素前面)
删除节点
(1)父元素.removechild(子元素)
(2)子元素.remove()

移动端触摸事件

(1)手指触屏开始事件: touchstart
(2)手指触屏滑动事件: touchmove
(3)手指触屏结束事件:touchend

forEach遍历数组

数组名.forEach(item,index){
形参item:数组中的每个元素
形参index:数组元素的索引号
}

截取字符串

字符串.substring(起始索引号,结束索引号)

BOM

五大对象:

1.window:浏览器窗口
2.location:地址栏
(1)跳转页面:location.assign('网址')  **可以回退,简洁写法: location.href = '网址'
(2)替换页面:location.replace('网址')  **不可以回退
(3)刷新页面:location.reload()
3.history:历史记录
(1)下一页:history.forward()
(2)上一页:history.back()
(3)指定页:history.go()  **正数前进,负数后退
4.navigator:用户信息
    navigator.userAgent ---- 用户设备信息 + 浏览器信息
5.screen:用户电脑屏幕

定时器:

作用:一段代码 间隔一定时间 重复执行
1.永久定时器 
(1)开启：  let timeID = setInterval( 回调函数 , 间隔时间 )
(2)清除：  clearInterval( timeID )

2.一次定时器
(1)开启：  let timeID = setTimeout( 回调函数 , 间隔时间 )
(2)清除：  clearITimeout( timeID )

日期对象：

1.得到当前的日期和时间
 const date = new Date()
2. 得到指定的日期和时间
 const date = new Date('2099-12-12 08:08:08')
2.2.格式化日期对象-转换成开发中常见的日期和时间格式

    const myDate = new Date()

    console.log(myDate.getFullYear())                  // 得到年份 数字型的 2023

    console.log(myDate.getMonth() + 1)               // 得到月份 数字型的 0 需要加1

    console.log(myDate.getDate())                       // 得到几号 数字型的 27

    console.log(myDate.getDay())                        // 得到星期  数字型 5

    console.log(myDate.getHours())                     // 得到小时

    console.log(myDate.getMinutes())                  // 得到分钟

    console.log(myDate.getSeconds())                 // 得到秒数 

    console.log(`现在的日期是:${myDate.getFullYear()}年${myDate.getMonth()

3.获取时间戳
   (1)new Date('指定日期').geiTime()
   (2)  +new Date()
   (3)  Date.now()  得到当前日期的时间戳

存储对象

(1) localStorage:本地存储,永久存储,数据存在硬盘中,只能存储string类型数据      

            存数据 ：  localStorage.setItem('属性名',属性值)
            取数据 ：  localStorage.getItem('属性名')
            删数据 :     localStorage.removeItem('属性名')
            清空数据 : localStorage.clear()到当前日期的时间戳

(2) sessionStorage : 临时存储 

            存数据 ：  sessionStorage.setItem('属性名',属性值)
            取数据 ：  sessionStorage.getItem('属性名')
            删数据 :   sessionStorage.removeItem('属性名')
            清空数据 : sessionStorage.clear()

(3) JSON格式

 
        1.JSON是什么: 是一种数据格式，本质字符串
            * JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
        2.JSON作用 :  解决数据 跨平台兼容性
            * 在实际开发中,我们前端要经常与服务器(后端)进行数据交互。而前端与后端编程语言不同。
            前端： js , 后端： java、c++ 、 php 、 python 、 .net 、 c# 、 go 等等
            不同的编程语言数据类型不一致。无法互通的 。 为了可以让不同的编程语言之间可以进行数据交互，后来人们发明了一种所有编程语言都通用的格式 ： 叫做 JSON 。
        3.JSON语法 : 
            json -> js :  let jsObj = JSON.parse( json格式 )
            js -> json :   let jsonStr = JSON.stringify( js对象 )