webapi知识点总结

不学习就代表退步
180 阅读5分钟

02-webapi

1.1-DOM操作

  • dom节点操作的精髓其实就是增删改查，

查元素

  • 你会在什么时候使用document.querySelector('选择器')

    • 需求决定： 只需要获取一个元素

  • 你会在什么时候使用document.querySelectorAll('选择器')

    • 需求决定： 需要获取多个元素

  • querySelector和querySelectorAll的区别与注意事项

    • 区别 ：

      • querySelector : 获取null|dom对象， 可以直接使用dom语法
      • querySelectorAll : 获取伪数组，不可以直接用dom语法 （原型链不一样）

    • 注意事项 ：

      • 伪数组一定要通过下标取出dom对象，才可以使用dom语法

  • 你有没有注意到，querySelector的参数是一个选择器字符串,id选择器和id名，类选择器与类名的区别 例如有一个盒子

<div class="box"></div>

  • 类名是： box

  • 类选择器是： .box

  • 其实，querySelector查元素是通过选择器来查询的（相当于一个通过身份证来找到一个人），dom中还有一种方式是通过节点关系来查询元素的。（相当于我想找你爸爸，我先找到你就知道你爸爸是谁了），

    • 获取一个元素所有的子元素： 元素.children
    • 获取一个元素的父元素： 元素.parentNode
    • 获取一个元素的上一个元素(哥哥): 元素.previousElementSibling
    • 获取一个元素的下一个元素(弟弟):元素.nextElementSibling

查：查属性

  • 你能说出元素属性和元素样式属性的区别？（从概念和语法这两个角度，也可以举例加深印象）

    • 概念：

      • 元素属性： html标签自身的属性。 例如 src、href、title、alt
      • 样式属性： css属性

    • 语法：

      • 元素属性： 元素.属性名
      • 样式属性： 元素.style.属性名

  • innerText和innerHTML的区别

    • innerText : 获取文本
    • innerHTML : 获取文本+标签

  • 在dom语法中，表单元素有一些属性与普通元素不一样，叫做表单元素独有属性

    • value : 获取表单的值
    • disabled : 是否禁用
    • checked、selected：是否选中

改属性

  • 在dom语法中，当我们想要修改元素样式的时候。其实有很多种方式，有的语法是用来修改一个样式的，有的语法是用来修改多个样式的。

    • 当我想要修改一个样式的时候使用：

      • 元素.style.样式名 = 样式值
      • 注意： 权重是行内权重

    • 当我想要修改多个样式的时候使用：

      • 元素.classList.add()/remove()/toggle()/contains()

        • 注意：权重是类名权重

  • dom元素的属性分为标准属性与自定义属性。 它们区分的原则是：标准属性表示HTML与CSS原生的属性。 自定义属性：我们自己像对象那样添加属性，这部分属性主要起到存储数据作用。 例如一个删除订单按钮，我们只需要在这个按钮中存储对应的订单编号。这样点击删除按钮的时候，就知道用户到底想到删除哪一个订单了。（我说了这么多，其实重点就是：自定义属性作用是用来存储数据的）

    • 元素.getAttribute('属性名')
    • 元素.setAttribute('属性名',属性值)
    • 元素.removeAttribute('属性名')

增加元素

  • dom语法中用来给页面创建元素

    • document.createElement('标签名')

      • 在内存创建空标签

    • 设置内容

    • 新增到dom树

  • dom语法中下面两种语法是用来给页面添加元素 （创建和添加的意思不同哟。 创建指的是在内存中创建，添加指的是把这个元素添加到dom树，只有完成添加操作，我们才可以在页面看到元素渲染哟）

    • 元素.appendChild()
    • 元素.insertBefore()

删除元素

  • dom中删除元素的语法

    • 父元素.removeChild(子元素)

1.2-事件

  • 事件是js处理用户交互的一种机制，一个事件必须由三个要素组成

    • 事件源： dom元素
    • 事件类型 ： 交互时机
    • 事件处理函数

  • 事件处理函数在注册的时候是不会执行的，它会在下面两种情况下执行

    • （1）用户触发事件的时候
    • （2）主动调用事件处理函数

  • 常用的事件及他们执行的时机

    • 鼠标事件

      • 鼠标单击 onclick

      • 鼠标双击 obdblclick

      • 鼠标移入/移出

        • onmouseover/onmouseout : 支持冒泡
        • onmouseenter/onmouseleave： 不支持冒泡

      • 鼠标移动 onmousemove

      • 鼠标按下 onmousedown

      • 鼠标松开 onmouseup

    • 键盘事件

      • oninput : 键盘输入
      • onkeydwon : 键盘按下
      • onfocus: 成为焦点
      • obblur: 失去焦点

    • 页面事件

      • onscroll ： 页面滚动
      • onresize：页面大小变化

  • 事件委托的原理（高频面试题）

    • 什么是事件委托

      • 事件委托是给父元素注册事件，委托子元素处理

    • 事件委托原理是什么

      • 事件冒泡

    • 事件委托可以解决什么问题

      • (1)动态新增元素
      • (2)所有的子元素需要注册同名事件，给父元素注册

    • 在开发中，什么时候我们会用到事件委托

      • 动态新增

  • 事件流三个阶段

    • 事件捕获
    • 事件目标
    • 事件冒泡

  • 事件对象的常用属性或方法

    • e.preventDefault() : 阻止a和form默认跳转
    • e.target : 事件委托里面的触发源
    • e.stopPrapagation() : 阻止事件流（冒泡+捕获）
    • e.key / e.keyCode : 获取按键

1.3-bom

  • localStorage与sessionStorage区别（面试必问点）

    • localStorage : 硬盘存储
    • sessionStorage ： 内存存储

  • 延时函数setTimeout与间歇函数setInterval的区别（他们统称为定时器）

    • setTimeout ： 只执行一次，自动清除
    • setInterval ： 永久重复，需要手动清除
avatar
文章
阅读
粉丝