JavaScript——WebAPI(DOM+BOM)

DOM

文档对象模型

获取元素

根据ID获取：document.getElementByID()

根据标签名获取：document.getElementsByTagName()

根据类名获取(H5新增)：document.getElementsByClassName()

​ document.querySelector()

​ document.querySelectorAll()

获取body和html：

​ document.body()

​ document.documentElement

事件三要素

事件源、事件类型、事件处理程序

onclick 鼠标点击

onmouseover 鼠标经过

onmouseout 鼠标离开

onfocus 获得鼠标焦点

onblur 失去焦点

操作元素

改变元素内容

element.innerText

element.innerHTML

属性操作

(src、href、id、alt、title.....)

1.获取元素

2.注册事件

表单元素的属性操作

(type、value、checked、selected、disabled.....)

注：表单里的值文字内容通过value来修改(input.value=’ ');

样式属性操作

1.行内样式操作

element.style.color… 采用驼峰命名法

css权重比较高

2.通过className更改元素样式

在style标签中重新定义一个新的样式

在js中直接引用：获取的元素.className=’’;

自定义属性操作

1.获取属性值

element.属性(元素自带)

element.getAttribute(‘属性’)

2.设置属性值

element.属性=‘值’;

element.setAttribute(‘属性’，‘值’)

3.移除属性

element.removeAttribute(‘属性’)

节点操作

本质获取节点

1.父级节点

node.parentNode

2.子节点与子元素节点

parentNode.childNodes

parentNode.children

第一个子元素节点与最后一个子元素节点

parentNode.firstChild

parentNode.lastChild

3.兄弟节点与兄弟元素节点

node.nextSibling

node.previousSibling

node.nextElementsSibling

node.previousElementsSibling

4.创建节点

document.createElement()

node.appendChild()//添加节点

node.inserBefore()//指定位置插入节点

5.删除节点

node.removeChild()

6.复制节点

node.cloneNode()

事件高级

注册事件（事件监听）

eventTarget.addEventListener(事件类型,事件处理函数,默认false);

删除事件

eventTarget.removeEventListener(事件类型,事件处理函数);

1.注册事件中事件处理函数写在外部

2.删除事件写在事件处理函数内部

DOM事件流

捕获阶段(从外到里)

冒泡阶段(从里到外)

注:js代码只执行捕获或者冒泡阶段中的一个

addEventListener第三个参数为true表示捕获阶段false为冒泡阶段

事件对象

写在事件处理函数的小括号中

常见属性和方法

e.target 返回触发事件的对象

e.type 返回事件的类型

e.preventDefault() 阻止默认事件

e.stopPropagation() 阻止冒泡

事件委托

事件监听器设置到父节点中利用冒泡原理来影响每个子节点

利用e.target获取里面的子元素

常用的鼠标事件

contextmenu 控制应该何时显示上下文菜单

selectstart 鼠标选中

mousemove 鼠标移动

mousedown 鼠标按下

mouseup 鼠标弹起

mouseover 鼠标经过

mouseout 鼠标离开

mouseenter 鼠标经过(不冒泡)

mouseleave 鼠标离开(不冒泡)

鼠标事件对象

e.pageX 返回鼠标相对于文档页面的X坐标

e.pageY 返回鼠标相对于文档页面的Y坐标

e.clientX 返回鼠标相对于浏览器可视窗口的X坐标

e.cilentY 返回鼠标相对于浏览器可视窗口的Y坐标

e.screenX 返回鼠标相对于电脑屏幕的X坐标

e.screenY 返回鼠标相对于电脑屏幕的Y坐标

常用的键盘事件

keyup 某个键盘按键被松开触发

keydown 某个键盘按键按下时触发

keypress 某个键盘按键按下时触发（不识别功能键）

键盘事件对象

e.keyCode 返回该键的ASCII值

BOM

浏览器对象模型

BOM顶级对象window

window对象常见事件

1.等文档内容全部加载完会触发该事件

window.addEventListener(‘load’,function(){});

2.窗口大小事件

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

3.定时器

setTimeout()

setInterval()

clearInterval()

clearTimeout()

4.js执行机制(同步,异步)

locationd对象

location.href 获取或者设置整个URL

location.search 返回参数

location.assgin() 跟href可以跳转页面能后退历史记录

loaction.replace() 替换当前页面

location。reload() 重新加载页面

navigatior对象

包含有关浏览器的信息有很多属性常用的时useAgent

该属性可以返回由客户机发送服务器的use-agent头部的值

history对象

back() 可以后退功能

forward() 前进功能

go(参数) 前进后退(参数为1前进一个页面-1后退一个页面0刷新)

PC端网页特效

元素偏移量offset系列

element.offsetParent 返回最近一层带有定位的父级元素

element.offsetTop 返回元素相对带定位的父元素上方的偏移

element.offsetLeft 返回元素相对带定位的父元素上方的偏移

element.offsetWidth 包含内容、padding、border宽度

element.offsetHeight 包含内容、padding、border宽度

元素可视区client系列

element.clientWidth 包含内容、padding宽度

element.clientHeight 包含内容、padding高度

element.clientLeft 左边框宽度

element.clientTop 上边框宽度

元素滚动scroll系列

element.scrollLeft 往左被卷去的距离
element.scrollTop 往上被卷去的距离
pageXOffset/scrollX window往左被卷去的距离
pageYOffset/scrollY window往上被卷去的距离

动画函数的封装

function animate(obj, target, callback) {

    // console.log(callback);  callback = function() {}  调用的时候 callback()

// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
    // 步长值写到定时器的里面
    // 把步长值改为整数 不要出现小数的问题
    // var step = Math.ceil((target - obj.offsetLeft) / 10);
    var step = (target - obj.offsetLeft) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    if (obj.offsetLeft == target) {
        // 停止动画 本质是停止定时器
        clearInterval(obj.timer);
        // 回调函数写到定时器结束里面
        // if (callback) {
        //     // 调用函数
        //     callback();
        // }
        callback && callback();
    }
    // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
    obj.style.left = obj.offsetLeft + step + 'px';

}, 15);
    }

移动端网页特效

触屏事件

touchstart 手指触摸到一个dom元素时触发
touchmove 手指在一个dom元素上滑动时触发
touchend 手指从一个dom元素上移开时触发

触摸事件对象

touches 正在触摸屏幕的所有的手指的一个列表
targetTouches 正在触摸当前DOM的所有的手指的一个列表
changedTouches 手指发生变化的触点

classList相关方法:

element.classList.add() 增加类
element.classList.remove() 删除类
element.classList.toggle() 切换类
element.classList.contains() 判断是否包含某个类，返回true/false