5.位置
1.clientHeight 可见区域：height+padding
2.clientTop border高度
3.offsetHeight 可见区域：height+padding+border
4.offsetTop 距离上级定位标签的高度
5.scrollHeight 全文高：height+padding
6.scrollTop 滚动高度
PS：谷歌浏览器使用document.body.scrollTop一直显示0，所以使用document.documentElement.scrollTop
跟程序开头的<!DOCTYPE html>有关，各浏览器下 scrollTop的差异 原文链接：https://blog.csdn.net/sleepwalker_1992/article/details/80677845
IE：
对于没有doctype声明的页面，使用 document.body.scrollTop 或 document.documentElement.scrollTop；
对于有doctype声明的页面，则使用 document.documentElement.scrollTop；
Chrome、Firefox：
对于没有doctype声明的页面，使用 document.body.scrollTop 来获取 scrollTop高度 ；
对于有doctype声明的页面，则使用 document.documentElement.scrollTop；
Safari:
safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset ；
所以可以合在一起判断window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
6.提交表单
之前是<input type='submit' value='提交'>来提交当前form的表单
现在可以用DOM来提交
如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="i1">
<input type="text">
<input type="submit"value="提交">
<a onclick="Submit()">提交</a>
</form>
<script>
function Submit() {
var tag=document.getElementById('i1');
tag.submit();
}
</script>
</body>
</html>
7.其他操作
1.console.log() 输出框，把括号中的内容输出到网页上
2.alert() 弹出框
3.confirm() 确认框，有返回值，为false或true
//URL和刷新
4.location.href 获取URL
5.location.href="URL" 重定向
6.location.reload() 重新加载
//定时器：
7.setInterval 多次定时器
8.clearInterval
9.setTimeOut 单次定时器
10.clearTimeOut
8.事件的绑定
特殊事件：
1.this，指向当前触发事件的标签
2.全局事件绑定 window.onkeydown=function(){}
3.event，特殊参数，包含事件相关内容(跟之前的pygame的event差不多)
4.默认事件
如：（a标签，跳转）（submit标签，提交）.....
如果绑定事件，先执行自定义事件，再执行默认事件
<input type="submit" value="提交" onclick="return Submit()">
加上return的话，后面的Submit()函数如果是true就会执行后面的事件，如果是false就不执行
（checkbox，勾选）..
如果绑定事件，先执行默认事件，再执行自定义事件
例子：点赞
1.this，指向当前触发事件的标签， function(this)，可以传入这个标签
2.setInterval(匿名函数，时间单位ms) 创建定时器，会返回一个值，inter=setInterval()
3.clearInterval删除定时器,传入创建时返回的值，clearInterval(inter)
4.removeChild删除子标签
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .item{ 8 padding: 50px; 9 position: relative; 10 } 11 .item span{ 12 position: absolute; 13 top: 42px; 14 left: 83px; 15 opacity: 1; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="item"> 21 <a onclick="f1(this)">赞!</a> 22 </div> 23 <div class="item"> 24 <a onclick="f1(this)">赞!</a> 25 </div> 26 <div class="item"> 27 <a onclick="f1(this)">赞!</a> 28 </div> 29 <div class="item"> 30 <a onclick="f1(this)">赞!</a> 31 </div> 32 <script> 33 function f1(ths) { 34 var top=42; 35 var left=83; 36 var op=1; 37 var fontSize=18; 38 var tag = document.createElement('span'); 39 tag.innerText='+1'; 40 tag.style.top=top+'px'; 41 tag.style.left=left+'px'; 42 tag.style.fontSize=fontSize+'px'; 43 tag.style.opacity=op; 44 ths.parentElement.appendChild(tag); 45 46 var inter=setInterval(function () 47 { 48 top-=10; 49 left+=10; 50 op-=0.1; 51 fontSize+=5; 52 tag.style.top=top+'px'; 53 tag.style.left=left+'px'; 54 tag.style.fontSize=fontSize+'px'; 55 tag.style.opacity=op; 56 if (op<=0.2){ 57 clearInterval(inter); 58 ths.parentElement.removeChild(tag) 59 } 60 } 61 ,50) 62 } 63 </script> 64 </body> 65 </html>