回顾原生DOM操作

发现原生操作DOM的那一套API忘的竟然差不多了,总结一下

DOM：浏览器根据标签自动创建出来的js对象，就是DOM对象。JS本质上不能影响到html，但标签上的属性都可以在DOM上找到，修改DOM对象，标签也会随之修改。

document 代表整个网页
element 代表网页中的一个个标签
节点node 网页上的所有内容都可以被称之为节点（标签、属性、注释）

事件的组成：

事件源：触发事件的元素
事件名称：如：点击-click
事件处理函数：触发事件之后要做的事（触发事件源的时候）

常用的事件：

鼠标事件

onclick 点击
ondblclick 双击
onmouseover 鼠标经过
onmouseout 鼠标离开
onmousemove 鼠标移动
onmousedown 鼠标按下
onmouseup 鼠标弹起

表单新增的事件

onfocus 获取焦点
onblur 失去焦点
onchange 表单内容改变时

键盘事件

onkeydown 键盘按下
onkeyup 键盘抬起

注册在window对象上

onload 加载完成
onresize 窗口大小改变
onscroll 滚动

移动端

touchstart 触摸开始
touchmove 触摸移动
touchend 触摸结束
touchcancel 取消触摸

获取元素的方式：

css选择器（常用）

document.querySelestor()
满足条件的第一个元素，可以直接操作
document.querySelestorAll()
满足条件的所有元素组成的伪数组，只能通过下标和遍历操作

修改标签的内容：

innerHTML() 可以解析标签
innerText()
【注】获取或者设置元素，但从安全性出发，更推荐使用innerText

样式操作：style属性
每一个DOM对象都有一个style对象，这个style对象是用来获取和操作标签行内样式的。可以动态设置css样式。逻辑比较简单的时候使用className就可以操作了

标签的自定义属性：
固有属性: DOM对象上可以找到一一对应的属性存在可以直接使用DOM.属性得到
自定义属性: 在DOM对象上找不到, 不可以使用点语法必须使用DOM.getAttribute方法得到

使用场景: 自定义属性一般用来将对应的数据存储到DOM对象上去

DOM.getAttribute(属性名) 获取属性值自定义和固有属性都可以
DOM.setAttribute(属性名, 属性值) 设置属性值自定义和固有属性都可以
DOM.removeAttribute(属性名) 移除属性值自定义和固有属性都可以

使用点语法存储自定义属性时, 可以直接使用.语法获取 (只是在标签上不显示而已)。如果通过setAttribute设置的属性, 必须通过getAttribute获取

document的特殊属性

body: document.body
title: document.title
head: document.head
html: document.documentElement

节点操作

页面上的任何内容都可以称之为节点，本质上也是获取对应的元素

父节点 parentNode
子节点 children
firstElementChild 第一个子节点， lastElementChild 最后一个子节点
兄弟节点
nextElementSibing 上一个兄弟元素
previousElementSibing 下一个兄弟元素
nextSibing 上一个兄弟节点
previousSibing 下一个兄弟节点
创建节点document.createElement（'标签名'）
追加节点
父元素.appendChild('追加的元素') 加到父元素最后面
父元素.insertBefore( ' 追加的节点，加到哪个节点前面 ' )
删除节点 父元素.removeChild(child)
克隆节点 目标节点.cloneNode(布尔值) 默认值false
false只复制节点，不复制内容
ture既复制节点，也复制内容

children和querySelectorAll之间的区别

children和querySelectorAll之间的区别
querySelectorAll获取的元素集合是静态的，当元素增多或减少，静态集合不会发生改变

事件监听
传统事件绑定：只能注册一个，如果注册了多个，会出现覆盖问题。事件监听的方式不会出现覆盖

// addElementListener() 语法
//第一个参数：事件的类型：click mouseover
//第二个参数：函数，监听者，每次点击，这个函数就执行。
//第三个参数：是否使用捕获，默认为false，表示冒泡
addEventListener(type, func, useCapture);

//如果想让注册的事件能移除，不能用匿名函数。
function fn1() {
    alert("hehe");
}
box.addEventListener("click", fn1, false);

// removeEventListen的语法
//第一个参数：参数类型
//第二个参数：要移除的那个函数
//第三个参数：false
removeEventListener(type, func, useCapture);

事件对象
在触发事件的时候，都可以获取一个事件对象，整个对象会包含所有与事件相关的信息，包括触发事件的元素，事件的类型以及其他与事件相关的信息
注册事件的时候，指定一个形参即可。这个形参就是我们想要获取到的事件对象。

btn.onclick = function(event){
    //event就是事件对象，里面包含了事件触发时的一些信息。
    console.log(event);
}

事件流：

事件冒泡：

当我们触发了子元素的某个事件后，父元素对应的事件也会触发。这个过程就是事件冒泡

事件捕获：

事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递
【注】事件捕获必须通过事件监听绑定，并且将第三个参数设置为true，因为传统事件绑定是采用冒泡的机制

//当addEventListener第三个参数为true时，表示事件捕获
arr[i].addEventListener("click", function () {
    console.log(this);
},true);

事件的三个阶段

事件的捕获阶段
事件的目标阶段（触发自己的事件）
事件的冒泡阶段

on注册的事件都是冒泡形式。以事件监听的方式注册更改第三个参数为true就是形式捕获的形式

阻止事件冒泡
通过e.stopPropagation()方法可以阻止事件冒泡

阻止浏览器默认行为

阻止浏览器默认行为除了使用return false。
还可以通过 e.preventDefault() 可以阻止浏览器的默认行为

offset系列待补充