节点操作和事件

今日目标：

节点的概念和分类

节点的创建，插入，替换，删除操作

事件三要素

常用事件类型

0.回顾

# 1. 获取元素的尺寸
offset一套
dom.offsetWidth: 内容 + 内边距 + 边框
dom.offsetHeightclient一套
dom.clientWidth: 内容 + 内边距
dom.clientHeight# 2. 获取可视窗口的尺寸
BOM方式：
window.innertWidth | window.innerHeight: 包含了滚动条DOM方式：
document.documentElement.clientWidth | document.documentElement.clientHeight: 不包含滚动条# 3. 获取元素的偏移量
// 偏移量：当前元素距离有定位的祖先元素的左边和上边的距离
// 如果没有有定位的祖先元素，会将body元素作为定位父级
dom.offsetLeft | dom.offsetTop

1.节点的概念

# 页面中的所有元素都是节点。节点组成了一个完整的页面。
# 我们可以对节点进行各种操作：通过父子关系，兄弟关系进行一系列创建，插入，替换，删除，克隆等操作

2.节点的分类

# 标签： 元素节点
# 文本节点（包含了换行和空格）
# 属性节点 （href, title, src...）+ 不能通过父子关系或者兄弟关系获取
# 注释节点 (包含了换行和空格)

3.获取节点

// 获取所有子节点：dom.childNodes, 返回伪数组// 获取属性节点： dom.attributes, 返回伪数组// 通过父子关系后获取子节点
// 获取所有子元素节点 
// children(重点)
console.log(divEle.children);// 获取第一个子节点
// firstChild
console.log(divEle.firstChild);
// 获取第一个子元素节点
// firstElemnetChild
console.log(divEle.firstElementChild);
// children[0]
console.log(divEle.children[0]);// 获取最后一个子节点
// lastChild
console.log(divEle.lastChild);
// 获取最后一个子元素节点
// lastElementChild
console.log(divEle.lastElementChild);
// children[divEle.children.length - 1]
console.log(divEle.children[divEle.children.length - 1]);// 通过兄弟关系获取节点
// 获取上一个兄弟节点
// previousSibling
console.log(divEle.previousSibling);
// 获取上一个元素兄弟节点。区别：以为节点之间包含了一个文本节点，换行符。空格都是节点。所以要元素阶段。加element
// previousElementSibling
console.log(divEle.previousElementSibling);// 获取下一个兄弟节点
// nextSibling
console.log(divEle.nextSibling);
// 获取下一个元素兄弟节点
// nextElementSibling
console.log(divEle.nextElementSibling);// 通过父子关系获取父级节点: 一般来说父级节点都是元素节点
// parentNode （重点，获取父亲）
// 注意：只能通过parentNode来逐级获取祖先节点
console.log(divEle.parentNode.parentNode.parentNode);

4.创建节点和插入节点

 # 创建节点var node = document.createElment('标签名')'注意：1. 节点创建好了，必须要插入，否则不会渲染在页面上； 2. 创建好的节点只能使用一次，后面的优先级更高'# 插入节点方式一： 父节点.appendChild(节点名)：往父节点的末尾插入节点方式二： 父节点.insertBefore('插入的节点', '在谁前面')

5.替换节点

# 父节点.replaceChild('换上的节点', '换下的节点')// 1. 获取元素
var divEle = document.querySelector('div')// 2. 创建节点
var emEle = document.createElement('em')// 3. 添加内容
emEle.innerHTML = '我是新创建的节点'// 4. 替换节点 （替换最后一个子节点）
// replaceChild(换上的节点， 换下的节点)
divEle.replaceChild(emEle, divEle.children[divEle.children.length - 1])

6.删除节点

# 1. 删除子节点父节点.removeChild('子节点')# 2. 删除自身（自杀）dom.remove()// 1. 获取元素
var divEle = document.querySelector('div')
var btn = document.querySelector('button')btn.onclick = function () {// 2. 删除子节点// 父节点.removeChild('节点名')// divEle.removeChild(divEle.children[divEle.children.length - 1])// 3. 删除自己（自杀）divEle.remove()
}

7.事件

概念： 捕获用户的交互行为，并根据交互行为实现特定的交互效果

事件三要素：

1. 事件源： 谁绑定了事件（事件的绑定者）
2. 事件类型：比如点击鼠标，按下键盘等
3. 事件处理函数： 该事件所要达到的目的
   1. divEle.onclick = function() { console.log(1111) }

8.事件绑定的两种方式

// 绑定事件
// DOM0级事件（传统方式）
// 语法： dom.on+事件类型 = 事件处理函数
// 注意：通过传统方式给相同的dom节点绑定多个相同类型的事件，只会有最后一个生效
// divEle.onclick = function () {
//     // 代码块
//     console.log('传统方式1');
// }// divEle.onclick = function () {
//     // 代码块
//     console.log('传统方式2');
// }// DOM2级事件 (事件监听)
// 语法： dom.addEventListener('事件类型', function(){ // 代码块 })
// 注意：通过事件监听的方式给相同的dom节点绑定多个相同类型的事件，每个事件会依次触发
divEle.addEventListener('click', function () {console.log('事件监听函数1');
})divEle.addEventListener('click', function () {console.log('事件监听函数2');
})

9.解绑事件的两种方式

# 解绑传统方式绑定的事件
dom.on+事件类型 = null# 解绑事件监听绑定的事件
dom.removeEventListener('事件类型', 函数名)

10.鼠标事件

// 鼠标事件// click: 点击事件（点击一次鼠标左键触发）// divEle.addEventListener('click', function () {//     console.log('鼠标点击事件');// })// dblclick: 双击事件： 在300ms内连续点击鼠标左键两次时触发的事件// divEle.addEventListener('dblclick', function () {//     console.log('鼠标双击事件');// })// // contextmenu: 鼠标右键触发的事件// divEle.addEventListener('contextmenu', function () {//     console.log('鼠标右键事件');// })// mousedown 鼠标按下事件// divEle.addEventListener('mousedown', function () {//     console.log('按下了鼠标左键');// })// // mouseup: 鼠标弹起事件// divEle.addEventListener('mouseup', function () {//     console.log('松开了鼠标左键');// })// // mousemove: 鼠标移动事件// divEle.addEventListener('mousemove', function () {//     console.log('移动着鼠标');// })// mouseover: 鼠标移入事件divEle.addEventListener('mouseover', function () {console.log('移入了当前元素');})// mouseout: 鼠标移出事件divEle.addEventListener('mouseout', function () {console.log('移除了当前元素');})// mouseenter: 鼠标移入事件// divEle.addEventListener('mouseenter', function () {//     console.log('移入了当前元素');// })// // mouseleave: 鼠标移出事件// divEle.addEventListener('mouseleave', function () {//     console.log('移除了当前元素');// })// 注意：mouseover和mouseout支持子元素的移入移出事件； mouseenter和mouseleave不支持子元素的移入移出

11.键盘事件

 // 键盘事件：根据键盘操作行为触发的事件var inpEle = document.querySelector('input')// 1. keydown: 键盘按下事件// 注意：所有的按钮都支持该事件// inpEle.onkeydown = function () {//     console.log('按下了键盘');// }// 2. keyup: 键盘弹起事件// inpEle.onkeyup = function () {//     console.log('松开了键盘');// }// 3. keypress: 键盘键入事件// 注意：1. 按下了按键必须得出现真的内容// 注意：2. 按下的内容要和出现的内容一样// 注意：3. 支持回车键inpEle.onkeypress = function () {console.log('键盘键入事件');}

12.表单事件

 // 表单事件： 只有表单元素才能触发的事件var kuangEle = document.querySelector('.kuang')var textEle = document.querySelector('.text')var formEle = document.querySelector('form')var btn = document.querySelector('button')// change: 当表单元素的内容发生改变后才会触发的事件kuangEle.onchange = function () {console.log('切换了复选框的选中状态');}textEle.onchange = function () {console.log('输入框的值发生了改变');}// focus: 获取焦点事件textEle.onfocus = function () {console.log('你聚焦了我');}// blur: 失去焦点事件 （失焦的前提是必须有焦点）textEle.onblur = function () {console.log('失焦了哦');}// input: 输入事件（边输入边触发的事件）textEle.oninput = function () {console.log('输入事件');}// 表单提交事件（只能用给form表单标签）type = 'submit'会刷新表单，改为type = 'button'，则无刷新提交// submit: 表单提交事件btn.onclick = function () {formEle.onsubmit()}

13.触摸事件

  // 触摸事件： 当手指在移动端设备上触摸时，触发的事件var boxEle = document.querySelector('.box')// touchstart: 手指放到屏幕上boxEle.ontouchstart = function () {console.log('我要开始摸了');}// touchmove: 手指在屏幕上滑动boxEle.ontouchmove = function () {console.log('我正在摸');}// touchend: 手指离开屏幕boxEle.ontouchend = function () {console.log('我模完了');}