WebAPI整理

目录

WebAPI

BOM

location

history

navigator

screen

window

DOM

获取节点

节点关系

节点属性

添加事件

操作节点

节点方法

事件

事件类型

事件流

事件对象

事件委托

元素大小位置

函数

时间对象

类名操作

正则

---

WebAPI

DOM：文档对象模型、操作页面上的元素
BOM：浏览器对象模型、操作浏览器的对象

BOM

window:顶级对象、全局对象

location、history、navigator、screen、document

location

地址栏对象：

属性：
    href：获取或者设置地址栏地址
方法：
    reload：刷新（从新加载当前url）
    assign：加载指定的url
    replace：替换url

history

历史记录对象：

属性：
    length：访问过的页面历史记录的数量
方法：
    go：跳转到指定的记录记录（参数是number）
    back：返回历史记录的上一个
    forward：前进历史记录的下一个

navigator

浏览器对象：

属性：userAgent    这个属性可以识别设备系统等等

screen

屏幕对象

属性：width、height

window

顶级对象：（全局对象）

方法：
    alert、confirm、prompt
    
定时器：

     1. 等待多久调用一次
    window.setInterval(函数, 时间)==>window.clearInterval（定时器标识）

     2. 多久调用一次这个函数,之后不再执行,利用递归可以实现1    
    window.setTimeout(函数, 时间)==>window.clearTimeout(定时器标识)

DOM

文档对象模型、操作页面元素

获取节点、添加时间、属性操作、节点操作

获取节点

第一组:

id：document.getElementById('id值');【获取的是某一个元素】

tagName：document.getElementsByTagName('标签名')【获取的是多个，伪数组】

第二组:

选择器获取元素：

    document.querySelector('选择器');// 单个
    document.querySelectorAll('选择器')// 多个

节点关系

父子关系：
    父.children;(父.childNodes)
    父.firstElementChild、父.lastElementChild
    
    子.parentNode

兄弟关系：
    element.nextElementSibling、   // 下一个元素兄弟
    
    element.previousElemetSibling  // 前一个元素兄弟

节点属性

nodeType：节点类型，元素 ==> 1、文本 ==> 3

nodeName：节点名称，元素 ==> 大写的标签名、文本节点 ==> #text

nodeValue：节点值：元素==>null、文本：文本内容

添加事件

on：
    添加事件：element.onclick = function () {}
    移除事件：element.onclick = null;

事件监听：
    添加事件：element.addEventListener('事件类型', function () {}, 是否捕获);
    移除事件：element.removeEventListener('事件类型', 事件处理程序名称（ 函数名）);

操作节点

元素属性：
    获取元素属性：元素.属性（element.id）
    设置元素属性：元素.属性 = 值;(element.id = 值);
    特殊：class==>className、innerText、innerHTML

样式属性：
    设置样式属性：元素.style.属性 = 值;(element.style.width = '200px');
    注意：设置用的不要去获取、只能获取style行内样式，但是一般情况写在css里面

表单元素：
    value属性：
        获取内容：元素.value;(element.value)
        设置内容：元素.value = xxx;(element.value = xxx);
    checked属性：(单选多选)
        获取：元素.checked;(布尔值)
        设置：元素.checked = true/fasle;
    disabled属性：
        获取：元素.disabled;
        设置：元素.disabled = 布尔值;
    selected属性：(下拉菜单)
        获取：元素.selected;
        设置：元素.selected = 布尔值

自定义属性：data-*
    H5:元素.dataset.xxx
    获取：元素.getAttribute(属性名);
    设置：元素.setAttribute(属性名， 值);
    移除：元素.removeAttribute(属性名);

节点方法

创建元素：
    第一种：element.innerHTML = "<div>内容</div>"
    第二种：document.createElement('标签名');

追加元素：父.appendChild(子);

删除元素：父.removeChild(子);

插入元素：父.inserBefore(新，旧);新的节点插入到旧节点的前面

替换元素：父.replaceChild(新，旧)新的节点替换旧节点

克隆元素：element.cloneNode(布尔值);

事件

事件有很多、不同的触发机制

事件类型

鼠标事件：
    click：点击事件、单击事件
    dblclick：双击事件
    mouseenter：鼠标经过（mouseover）
    mouseleave：鼠标离开（mouseout）
    mousemove：鼠标移动事件
    mousedown：鼠标按下
    mouseup：鼠标抬起
    drapover：拖拽
    drop：松开

表单事件：
    focus：获得焦点
    blur：失去焦点
    input：输入事件
    change：改变事件
    submit：提交事件

键盘事件：
    keydown：键盘按下
    keyup：键盘松开
    keypress：键盘输入按下

加载事件：
    load、scroll、resize、beforeunload、DOMContentload

事件流

事件触发时事件的三个阶段、捕获、目标、冒泡

冒泡：事件触发后，从目标元素开始、事件类型会依次往上冒泡、直到document为止

事件对象

事件触发后产生的对象：

事件源.addEventListener('click', function (e) {e})

鼠标位置：
    e.clientX、e.clientY
    e.pageX、e.pageY
    e.offsetX、e.offsetY

键盘信息：
    e.keyCode：键码值
    e.altKey:  alt键

事件对象属性：
    e.target
事件对象方法：
    e.stopPropagation（）
    e.preventDefault()

事件委托

把子孙元素的事件注册给上级元素、委托给上级元素

1、给子孙元素的上级元素注册事件

2、通过e.target获取最先触发的元素

3、通过e.NodeName查看是否是我们需要的元素

原理：核心原理就是因为事件冒泡、主要点是target

元素大小位置

offset系列：offsetWidth、offsetHeight、offsetLeft、offsetTop

client系列：clientWidth、clientHeight

scroll系列：scrollTop

getBoundingClientRect：获取元素位置大小

函数

函数的定义：
    命名函数：function () {}

    匿名函数：
        自调用函数：(function () {})()
        表达式函数：let fn = function () {}

函数的调用：
    函数遇到（）就执行函数();

递归：
    函数内部调用函数自己
    function fn () { fn() }fn();
    注意：递归要有出口点

时间对象

实例化：
    new Date();
    new Date('1999-9-9 6:6:6');
    new Date(1999, 9, 9, 6, 6, 6);
    new Date(12341232532);
    
方法：
    getFullYear()获取年份
    getMonth()获取月份
    getDate()获取日期
    getHours()获取小时
    getMinutes()获取分钟
    getSeconds()获取秒数
    getMilliSeconds()获取毫秒数
    getDay()获取星期
    getTime()获取时间戳 Data.now()
    以上把get改为set、就是设置
    注意：getDay不可以set、

类名操作

class：
    获取：元素.className
    设置：元素.className = 值;
classList：
    添加类：元素.classList.add(类名);
    删除类：元素.classList.remove(类名);
    切换类：元素.classList.toggle(类名);
    查找类：元素.classList.contans(类名);

正则

匹配字符串

创建：
    let reg = /内容/;

测试：
    reg.test(str)、reg.exec(str);
    
元字符：
    边界符：^、$
    字符集合：[a-z]
    量词符：*，+，?，{n}，{n,}，{n,m}
    预定义类：\d，\w，\s
    所有字符：.除了\n
    转义字符：\.
    修饰符：igm