1.parentNode
事件体执行:在页面渲染的时候是不执行的，只有当页面渲染完毕后，通过用户的操作才会被执行
2. this:函数体内的一个内置对象,在与事件体连用时代表用户触发该事件时的元素。
3. 节点遍历的属性
第一点： 父找子
firstElementChild 返回节点的第一个子节点，
最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最后一个子节点
childNodes:返回父元素的所有子节点(数组),包含dom节点和文本节点
children:返回父元素的所有子节点(数组),只包含dom节点
第二点：兄弟节点的遍历
nextElementSibling 下一个节点
previousElementSibling 上一个节点
第三点：子找父
parentNode
4.各种文本框
① 在JS中常用的文本只有两个
input value
标签 innerHTML
②outerHTML/innerText/innerHTML
outerHTML：包含自身标签的所有内容
innerText 只包含文本但不包含标签
innerHTML 包含除了自身标签的所有内容
innerHTML:常用来通过字符串拼接来创建页面
5.dom普通属性
<body>
<div id="box"></div>
</body>
<script>
var oBox = document.querySelector("#box");
</script>
a. 通过点运算符
读
console.log(oBox.id);
写
oBox.id = "heihei";
b. 通过getAttribute/setAttribute
读
console.log(oBox.getAttribute("id"));
写
oBox.setAttribute("id", "haha");
//添加自定义属性
oBox.aaa = 666;
console.log(oBox.aaa);
6.domstyle的读写
写
dom对象.style.属性名 = 属性值
读
只有行内样式可以dom.style.属性名的方式读取数据,非行内样式不行
非行内样式
getComputedStyle(dom对象, false)["属性名"];
7.offset相关属性的读必须用offset读
//读出来的数据都是数字
console.log(oBox.offsetWidth);
console.log(oBox.offsetHeight);
console.log(oBox.offsetLeft);
console.log(oBox.offsetTop);
// 写
// 加px的字符串
oBox.style.width = "600px";
oBox.style.left = "50" + "px";
8.insertBefore
功能:将目标节点添加至参照节点之前
参数:dom.insertBefore(目标节点,参照节点)
9.滚动条高度的读写，浏览器的兼容性，滚动条高度的兼容写法
window.onscroll = function() {
// console.log("heihei");
var sTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log(sTop);
}
10.事件: 对某个元素的某种操作
事件相关的三要素：事件元素 事件类型 [事件对象]
事件元素 : 触发事件的元素
事件类型 : 事件触发的类型onclick ondblclick onmouseover
事件对象 : 携带着相关类型事件的属性和方法
只有鼠标事件对象和键盘事件对象
事件对象的兼容写法
document.onclick = function(evt) {
var e = evt || event;
}
注意事项:事件对象的产生必须要有事件
11.鼠标事件对象（坐标相关属性）
page:针对于整个页面的左顶点 常用
console.log(e.pageX + "," + e.pageY);
client:针对于可视窗口的左顶点 不常用
console.log(e.clientX + "," + e.clientY);
offset:针对于父元素的左顶点 用于拖拽
console.log(e.offsetX + "," + e.offsetY);
12.事件流: 当某个元素执行某种事件时， 该事件会向父元素传递或向子元素传递
事件流传递的方向:
①冒泡:由子元素向父元素传递
onfocus/ onblur/ onload不会产生冒泡问题
②捕获:
13.阻止冒泡：在事件传播的子元素上，通过事件对象调用函数
第一种写法：e.stopPropagation();
e.cancelBubble = true;
第二种写法：兼容性阻止冒泡
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
第三种写法：e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
14.阻止浏览器的默认行为（a标签在实现跳转时，会进行页面刷新）
第一种：e.preventDefault ? e.preventDefault() : e.returnValue = false;
第二种： return false;
15.键盘事件（注意事项:通常情况下键盘事件的事件源都是document）
①键盘弹起的时刻触发onkeyup
②键盘按下的时刻触发onkeydown
③生成一个字符的时刻触发onkeypress
④兼容写法
document.onkeypress = function(evt) {
var e = evt || event;
var key = e.keyCode || e.which || e.charCode;
⑤获取键盘按下的字符的ASC码值
console.log(key, String.fromCharCode(key));
⑥ctrlKey判断ctrl是否被按下
16事件的绑定
①通过HTML元素直接绑定
<body>
<button onclick="fun()">点击</button>
</body>
<script>
function fun() {
console.log("heihei");
}
</script>
②通过js对象绑定
<body>
<button id="btn">点击啊</button>
</body>
<script>
var oBtn = document.querySelector("#btn");
oBtn.onclick = function() {
console.log("今天要下雨");
}
</script>
以上两种绑定方式不能完成一些功能:
1.不能为相同的元素多次绑定相同的事件
2.无法决定事件流的传递是冒泡还是捕获
17.事件监听（事件绑定的第三种方式）
①好处
1.可以为相同的元素多次绑定相同的事件
2.可以决定事件流的传递是冒泡还是捕获
②语法
事件元素.addEventListener("去掉on的事件类型","事件体回调函数",["捕获还是冒泡"]);
默认不写或flase为冒泡,true捕获
③当捕获和冒泡同时存在于一个元素时，先捕获后冒泡
18.事件绑定的取消（解绑的核心思想就是去掉原来绑定的函数对象）
①.js方式的解绑
<body>
<button>点击</button>
</body>
<script>
var oBtn = document.querySelector("button");
oBtn.onclick = function() {
console.log("heihei");
}
oBtn.onclick = null; //取消事件的绑定
</script>
②事件监听的解绑
<body>
<button>点击</button>
</body>
<script>
var fun = function() {
console.log(123);
}
document.addEventListener("click", fun);
//注意事项:addEventListener和removeEventListener的回调函数必须是同一个
document.removeEventListener("click", fun);
</script>
提供CDN加速