Python Dom 的介绍和使用day2

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>

点赞例子