例8：利用按钮实现移动距离的增大，一直点，移动距离越来越大
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
</head>
<body>
<button style = "width : 80px; height : 80px;background : pink; position : fixed; right : 0; top : 50%;
text-align:center; line-height : 50px; color : black; font-size : 25px; font-family : arial;"> /*创建按钮的格式，大小颜色什么的*/
加速</button>
<script type="text/javascript">
var div = document.createElement('div'); /*利用js创建div标签*/
var btn = document.getElementsByTagName('button')[0];
document.body.appendChild(div); /*向body里面插入一个div标签*/
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "pink";
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
var speed = 5;
btn.onclick = function (){
speed ++;
}
document.onkeydown= function (e){ /*当点击时，系统会帮咱们调用这个函数，调用的时候会传进一个事件对象进来
这个事件对象会包裹着所有的事件发生的时候产生的所有信息，以供咱们使用
就像这个事件发生的时候鼠标在哪，或者键盘点了什么东西都会包含
console.log(e); 键盘按上是38，下是40，左是37 */
switch(e.which){
case 38:
div.style.top = parseInt(div.style.top) - speed + "px"; /*电脑的坐标系是反着的 y轴朝下为正*/
break;
case 40:
div.style.top = parseInt(div.style.top) + speed + "px";
break;
case 37:
div.style.left = parseInt(div.style.left) - speed + "px";
break;
case 39:
div.style.left = parseInt(div.style.left) + speed + "px";
break;
}
}
</script>
</body>
</html>
例9：4 * 4 的的区域，或者方格，鼠标经过实现颜色的改变，每经过一次，颜色改变一点。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
<style type = text/css>
*{
margin : 0;
padding : 0;
}
li{
box-sizing : border-box; /*这句话就是代表下面的宽高的20px就包含了border，里面的长度就是18px了*/
float : left;
width : 20px;
height : 20px;
/*border : 1px solid pink;*/
}
ul {
width : 80px;
height : 80px;
list-style : none;
}
</style>
</head>
<body>
<ul>
<li img-data = "0"></li>
<li img-data = "0"></li>
<li img-data = "0"></li>
<li img-data = "0"></li>
<li img-data = "0"></li>
<li img-data = "0"></li>
<li img-data = "0"></li>
<li img-data = "0"></li>
<li img-data = "0"></li>
<li img-data = "0"></li>
<li img-data = "0"></li>
<li img-data = "0"></li>
<li img-data = "0"></li>
<li img-data = "0"></li>
<li img-data = "0"></li>
<li img-data = "0"></li>
</ul>
<script type="text/javascript">
var ul = document.getElementsByTagName('ul')[0];
ul.onmouseover = function (e){ /*这个函数就是代表鼠标滑过的时候变成什么样子*/
var event = e || which.event;
var target = event.target || event.srcElee; /*这两行考虑的是兼容性的问题，明明实现一个功能在不同浏览器上就是不一样的*/
target.style.backgroundColor = "rgb(0,255," + target.getAttribute('img-data') + ")";
/*target就是li，这个是取出li里的img-data属性并改变backgroundColor，*/
target .setAttribute('img-data' , parseInt(target.getAttribute('img-data')) + 6);
/*这个是 每次执行这个函数也就是鼠标经过，就改变img-data的值进而改变backgroundColord的值*/
}
</script>
</body>
</html>
补充CSS插件：
div.demo#name>p[style="background-color:red;width:100px;height:100px"] 然后Tab就会出现什么什么的自己试试就知道了。
ul>li{a$}*10
dom 选择器，节点类型：7.40之前都是安装sublime插件，
78.DOM基本操作
1.对节点的增删改查：
(1)查：
document：如果说给html标签上面再套上一个标签，那这个标签就是document，document标签才代表的是整个文档，html代表的只是文档里面的根标签
1）document.getElementById('')：通过id的方法查找标签，注意这里是Element，因为一个id只对应一个元素，所以是Element不是Elements。
（用的最少，使用比name还少，html中用得最多的也是class，很少用id，因为在前后端整合的时候，别人可能会将id改变，所以很少用）
例1：
var div = document.getElementById('only');
2）document.getElementsByTagName('')：利用名字查找标签，这里就是Elements了，因为查找到的是一组标签（比较常用 任何浏览器都能用）
注意：咱们学dom，bom开始包括以后学的一系列东西，一切系统给咱们生成成组的方式基本上全是类数组（既是对象又是数组）
例1：
var div = document.getElementsByTagName('div');
//这里得到的div也是类数组
例2：不是很懂注释的部分！
var div = document.getElementsByTagName('div')[0];
//这个得到的就是第一个div标签了，就可以使用div.style.backgroundColor 来对div标签进行更改了，但要是没有选中，直接用类数组更改标签，会报错。
3）document.getElementsByClassName(''); （没有TagName常用，因为有兼容性的问题，有的浏览器不能用ie8和ie8以下的版本中没有
例1：
var div = document.getElementsByClassName('a')[0];
//假如只有一个div标签也一定要加[0]因为，这样被选择出来的是数组，单拿出第一个要用下角标[0];
4）var div = document.getElementsByName(); ie不支持，只有部分标签name可生效（表单，表单元素，img，iframe）
例1:
var div = document.getElementsByName('age')[0];
5）.querySelector() // css选择器
最好不要用：在ie7和ie7以下的版本中没有，经过这个函数选出的元素不是实时的，需要副本保存的话可以用这个，但是正常不用。
例1：会将div下span中的类名为demo的p标签选中（只选中一个）
var strong = document.querySelector('div > span strong.demo');
6） .querySelectorAll() // css选择器
最好不要用：同上原因
例1：会将div下span中的类名为demo的p标签选中（选出多个）
var strong1 = document.querySelectorAll('div > span strong.demo');
通过一个函数它的周边环境也能选中某个元素，所以接下来的这些方法就是基于一个元素它周边这种辐射性的东西能选出元素来
2.遍历节点树（任何一个浏览器都好使）
1） parentNode -> 父节点 (最顶端的parentNode为#document);，一个元素就有一个父节点
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
</head>
<body>
<div>
<strong></strong>
<span></span>
<em></em>
</div>
<script type="text/javascript">
var strong = document.getElementsByTagName('strong')[0]; //选出strong元素（也称作是dom元素）
</script>
</body>
</html>
//被选出来的strong可以利用strong.parentNode找到父亲div标签，再.parentNode就可以找到div的父亲body标签，再一层一层往上找，最终的就是document了，再往上找那就是null了
2） childNodes -> 子节点们，一个元素可以有多个子节点
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
</head>
<body>
<div>
123
<!--this is a comment-->
<strong></strong>
<span></span>
<em></em>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
</script>
</body>
</html>
//这里div一共有7个子节点，首先从div结束到注释开始之前都是文本元素，然后是注释元素，然后又是文本元素，然后是strong标签，然后是文本元素等等，所以一共是7个
3）firstChild -> 第一个子节点
4）lastChild -> 最后一个子节点
例1：上一道题div.firstChild就是 " 123 ",div.lastChild就是#text
5）nextSibling->后一个兄弟节点 previousSibling->前一个兄弟节点
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
</head>
<body>
<div>
123
<!--this is a comment-->
<strong></strong>
</div>
<script type="text/javascript">
var strong = document.getElementsByTagName('strong')[0];
</script>
</body>
</html>
//strong.nextSibling是#text，strong.nextSibling.nextSibling是null，
//strong.nextSibling.previousSibling是strong标签自己
3.基于元素节点树的遍历（除了children以外，所有的都是包含ie9及以下不兼容）
1）parentElement -> 返回当前元素的父元素节点 (IE不兼容)
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
</head>
<body>
<div>
123
<!--this is a comment-->
<strong></strong>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
</script>
</body>
</html>
//div.parentElement得到结果是body，div.parentElement.parentElement得到结果是html，div.parentElement.parentElement.parentElement得到结果是null，而不是document，因为document不是元素节点，它自成节点。
2）children -> 只返回当前元素的元素子节点
例1：div元素子节点就是strong，没有别的了
<div>
<!--this is a comment-->
<strong></strong>
</div>
3）node.childElementCount === node.children.length当前元素节点的子元素节点个数(IE不兼容)
4）
firstElementChild -> 返回的是第一个元素节点(IE不兼容)
lastElementChild -> 返回的是最后一个元素节点(IE不兼容)
例1：
<div>
123
<!--this is a comment-->
<strong></strong>
<span></span>
</div>
//div.firstElementChild就是strong标签，div.lastElementChild就是span标签
5）nextElementSibling / previousElementSibling ->返回后一个/前一个兄弟元素节点（IE不兼容)
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
</head>
<body>
<div>
123
<!--this is a comment-->
<strong></strong>
<span></span>
</div>
<script type="text/javascript">
var strong = document.getElementsByTagName('strong')[0];
</script>
</body>
</html>
//strong.nextElementSibling -->span
//strong.previousElementSibling -->null
//strong.nextElementSibling.previousElementSibling --> 自己本身
81.节点的四个属性
1.nodeName :元素的标签名，以大写形式字符串表示，只读
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
</head>
<body>
<div>
123
<!--this is -->
<strong></strong>
<span></span>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
</script>
</body>
</html>
//div.childNodes[1].nodeName -->"comment"注释
//div.childNode[3].nodeName -->"STRONG"
//div.childNodes[3].nodeName = "abc"进行更改之后再访问div.childNodes[3].nodeName还是"STRONG"。更改不了，只能读取不能写入。
2）nodeValue ：Text节点或Comment节点的文本内容,可读写，其他的不行，其他只能返回null
如上题：文本元素部分
//div.childNodes[0].nodeValue结果为"
123
"
//div.childNodes[0].nodeValue = "234"就能将值进行更改，再访问就是"234"。
//div.childNodes[0]取的是节点，div.childNodes[0].nodeValue取的是内容。
如上题：注释元素部分
//div.childNodes[1]结果为 <!--this is -->
//div.childNodes[1].nodeValue = "this is comment"进行更改之后，再访问就是<!--this is comment-->
3）nodeType： 该节点的类型，只读