之前学习过一个鼠标单击事件，onclick
var btn = document.getElementById("btn");
//获取网页元素
btn.onclick = function(){
//触发事件}
____//此处写入发生事件产生的结果
以上按里还有另外一种写法，就是将事件处理函数写在网页元素里面。
<button onclick = "fn1()">点击</button>
function fn1(){
//事件的结果
}
//这类写法的好处就是不需要在js中重新获取网页元素。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>DOM事件绑定</h1>
<hr>
<button id="btn">点击</button>
</body>
<script>
function fn1() {
alert(123);
}
var btn = document.getElementById("btn");
//获取点击按钮
btn.addEventListener('click',fn1);
//绑定监听事件
</script>
</html>
事件监听并不支持ie9一下，为了完成兼容可以书写条件注释，或者采用attachEvent（）方法。
demo：
if(btn.addEventlistener){
btn.addEventlistener("click",fn);
}else{
btn.attachEvent("onclick",fn);
}当然为了以后方便使用也可以将内容封装成函数：
function bindEvent(dom,event,fn){
if(dom.addEventListener){
dom.addEventListener(event,fn)};
}
else if(dom.attachEvent){
dom.attachEvent("on" + event,fn);
}else {
console.log("对不起，您的浏览器不支持。");
}
}
ul
li li
li li
li li
ul
//投个懒理解下
var lis = document.getElementById('list').getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
//因为获取的li标签是无法单独设置属性
lis[i].onclick = function (){
通过for循环，找到对应的键值然后再给每个不同的键值的元素增加属性
this.style.background = 'red';
}
}documentFragment：文档的片段
文档树最上层节点为document节点。
文档第一层有两个节点，一个是文档声明头，（doctpye。。。）第二个就是html顶层容器html标签。html构成了网页树结构的根节点，（root node），其他html标签节点都是他的下级节点。一人之下万人之上。
同级节点关系（silbing）：另一个节点的父节点与之相同的节点。
以上节点的判断类似于css的选择器判断。
原文：https://www.cnblogs.com/wangjiahui/p/10859933.html