文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。Dom+JavaScript就能使网页动起来，一般使用JQuery来做这事，JQuery封装了JavaScript+Dom变得更为简单。

一、查找元素

　　如果我们想用js操作文档，首先要做的便是要找到要操作的元素，查找元素有直接查找和间接查找，下面来看一下这两类查找，

1、直接查找

  1. document.getElementById             根据ID获取一个标签
  2. document.getElementsByName          根据name属性获取标签集合
  3. document.getElementsByClassName     根据class属性获取标签集合
  4. document.getElementsByTagName       根据标签名获取标签集合

2、间接查找(一般都是和直接找配合使用)　

  1. // 会包括所有标签和换行(一般不会使用这种)
  2. parentNode          // 父节点
  3. childNodes          // 所有子节点
  4. firstChild          // 第一个子节点
  5. lastChild           // 最后一个子节点
  6. nextSibling         // 下一个兄弟节点
  7. previousSibling     // 上一个兄弟节点
  8.  
  9. // 只包括所有标签(一般这种使用比较多)
  10. parentElement           // 父节点标签元素
  11. children                // 所有子标签
  12. firstElementChild       // 第一个子标签元素
  13. lastElementChild        // 最后一个子标签元素
  14. nextElementtSibling     // 下一个兄弟标签元素
  15. previousElementSibling  // 上一个兄弟标签元素

二、操作　

1、内容　

　　操作内容主要是 innerText，innerHTML和value其中前两种比较简单，主要是第三种在操作表单的时候，用得最多，text，password和textarea的value可以分为一类，checkbox，radio和select的value可以分为一类

  1. innerText   // a标签中的文本内容
  2. innerHTML   // HTML内容,比如<a><span>aaa</span><a>中的<span>标签
  3. value       // input标签中的值
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>跑马灯</title>
  6. </head>
  7. <body>
  8.     <div id="i1" style="display: inline-block;background: green;color:white;">欢迎领导莅临指导</div>
  9.  
  10.     <script>
  11.         setInterval("f1()",900);
  12.  
  13.         function f1(){
  14.             var tag=document.getElementById('i1');
  15.             var text = tag.innerText;
  16.             var a = text.charAt(0);
  17.             var sub = text.substring(1,text.length);
  18.  
  19.             var new_str = sub + a;
  20.             tag.innerText = new_str;
  21.  
  22.         }
  23.     </script>
  24. </body>
  25. </html>

跑马灯

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>搜索框</title>
  6. </head>
  7. <body>
  8.     <input id="i1" type="text" value="请输入关键字" onfocus="Focus()" onblur="Blur()"/>
  9.     <input id="i2" type="text"/>
  10.  
  11.     <script>
  12.         function Focus() {
  13.             var tag = document.getElementById('i1');
  14.             if(tag.value == "请输入关键字"){
  15.                 tag.value = "";
  16.             }
  17.         }
  18.  
  19.         function Blur() {
  20.             var tag = document.getElementById('i1');
  21.             var val = tag.value;
  22.             if(val.trim().length == 0){
  23.                 tag.value = "请输入关键字";
  24.             }
  25.         }
  26.     </script>
  27. </body>
  28. </html>

搜索框

2、操作属性

除了操作内容，还可以操作标签属性，主要用到下面几个方法

  1. attributes                // 获取所有标签属性
  2. setAttribute(key,value)   // 设置标签属性
  3. getAttribute(key)         // 获取指定标签属性
  4.  
  5. /*
  6. var atr = document.createAttribute("class");
  7. atr.nodeValue="democlass";
  8. document.getElementById('n1').setAttributeNode(atr);
  9. */
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>checkbox全选取消反选</title>
  6. </head>
  7. <body>
  8.     <input type="button" value="全选" onclick="CheckAll()"/>
  9.     <input type="button" value="取消" onclick="CancleAll()"/>
  10.     <input type="button" value="反选" onclick="ReverseAll()"/>
  11.  
  12.     <table border="1">
  13.         <thead>
  14.             <tr>
  15.                 <th>序号</th>
  16.                 <th>IP</th>
  17.                 <th>Port</th>
  18.             </tr>
  19.         </thead>
  20.         <tbody id="tb">
  21.             <tr>
  22.                 <td><input type="checkbox"/></td>
  23.                 <td>1.1.1.1</td>
  24.                 <td>22</td>
  25.             </tr>
  26.             <tr>
  27.                 <td><input type="checkbox"/></td>
  28.                 <td>1.1.1.2</td>
  29.                 <td>22</td>
  30.             </tr>
  31.             <tr>
  32.                 <td><input type="checkbox"/></td>
  33.                 <td>1.1.1.3</td>
  34.                 <td>22</td>
  35.             </tr>
  36.         </tbody>
  37.     </table>
  38.  
  39.     <script>
  40.         function CheckAll() {
  41.             var tb = document.getElementById('tb');
  42.             var trs = tb.children;
  43.             for(var i=0;i<trs.length;i++){
  44.                 var current_tr = trs[i];
  45.                 var ck = current_tr.firstElementChild.firstElementChild;
  46.                 ck.checked = true;
  47. //                ck.setAttribute('checked','checked');
  48.             }
  49.         }
  50.         function CancleAll() {
  51.             var tb = document.getElementById('tb');
  52.             var trs = tb.children;
  53.             for(var i=0;i<trs.length;i++){
  54.                 var current_tr = trs[i];
  55.                 var ck = current_tr.firstElementChild.firstElementChild;
  56.                 ck.checked = false;
  57. //                ck.removeAttribute('checked');
  58.             }
  59.         }
  60.         function ReverseAll() {
  61.             var tb = document.getElementById('tb');
  62.             var trs = tb.children;
  63.             for(var i=0;i<trs.length;i++){
  64.                 var current_tr = trs[i];
  65.                 var ck = current_tr.firstElementChild.firstElementChild;
  66.                 if(ck.checked){
  67.                     ck.checked = false;
  68. //                    ck.removeAttribute('checked');
  69.                 }else{
  70.                     ck.checked = true;
  71. //                    ck.setAttribute('checked','checked');
  72.                 }
  73.             }
  74.         }
  75.     </script>
  76.  
  77. </body>
  78. </html>

checkbox全选取消反选

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .content{
  12.             margin: 0 auto;
  13.             width: 300px;
  14.             border: 1px solid chocolate;
  15.         }
  16.         ul{
  17.             list-style: none;
  18.             background-color: #cccccc;
  19.         }
  20.         ul li{
  21.             float: left;
  22.             display: block;
  23.             background-color: #2459a2;
  24.             padding:0 10px;
  25.             height: 50px;
  26.             line-height: 50px;
  27.             cursor: pointer;
  28.         }
  29.         .clearfix:after{
  30.             display: block;
  31.             content: '';
  32.             height: 0;
  33.             visibility: hidden;
  34.             clear: both;
  35.         }
  36.         #info{
  37.             min-height: 200px;
  38.             width: 300px;
  39.         }
  40.         .hide{
  41.             display: none;
  42.         }
  43.         .active{
  44.             background-color: white;
  45.             color: black;
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <div class="content">
  51.         <ul class="clearfix">
  52.             <li tg="1" class="active" onclick="Func(this)">价格走势</li>
  53.             <li tg="2" onclick="Func(this)">市场分布</li>
  54.             <li tg="3" onclick="Func(this)">其他</li>
  55.         </ul>
  56.  
  57.         <div id="info">
  58.             <div targ="1" >conten1</div>
  59.             <div targ="2" class="hide">conten2</div>
  60.             <div targ="3" class="hide">conten3</div>
  61.         </div>
  62.     </div>
  63.  
  64.     <script>
  65.         function Func(ths) {
  66.             var bot = ths.parentElement.children;
  67.             for(var i=0;i<bot.length;i++){
  68.                 bot[i].classList.remove('active')
  69.             }
  70.             ths.classList.add('active');
  71.  
  72.             var vtg = ths.getAttribute('tg');
  73.             var divs = document.getElementById('info').children;
  74.             for(var i=0;i<divs.length;i++){
  75.                 if(divs[i].getAttribute('targ') == vtg){
  76.                     divs[i].classList.remove('hide');
  77.                 }else{
  78.                     divs[i].classList.add('hide');
  79.                 }
  80.             }
  81.  
  82.         }
  83.     </script>
  84. </body>
  85. </html>

不同菜单不同内容

3、class操作

  1. className                 // 获取所有类名,字符串格式
  2. classList                     // 获取所有类名,列表格式
  3. classList.remove(cls)    // 删除指定类
  4. classList.add(cls)        // 添加类
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>模态对话框</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.         }
  10.         .hide{
  11.             display:none;
  12.         }
  13.         .shade{
  14.             position: fixed;
  15.             top:0;
  16.             bottom:0;
  17.             left:0;
  18.             right:0;
  19.             background-color: rgba(0,0,0,.6);
  20.         }
  21.         .modal{
  22.             position: fixed;
  23.             height: 400px;
  24.             width:500px;
  25.             background-color: white;
  26.             top:50%;
  27.             left:50%;
  28.             margin-top: -200px;
  29.             margin-left: -250px;
  30.         }
  31.     </style>
  32.  
  33. </head>
  34. <body>
  35.     <div style="height: 2000px;background-color: #dddddd;">
  36.         <input type="button" value="登录" onclick="show()"/>
  37.     </div>
  38.  
  39.     <div id="shade" class="shade hide"></div>
  40.     <div id="modal" class="modal hide">
  41.         <input type="text" placeholder="用户名"/><br/>
  42.         <input type="password" placeholder="密码"/><br/>
  43.         <a href="javascript:void(0)" onclick="cancle()">取消</a>
  44.     </div>
  45.  
  46.     <script>
  47.         function show() {
  48.             var tag1 = document.getElementById('shade');
  49.             var tag2 = document.getElementById('modal');
  50.  
  51.             tag1.classList.remove('hide');
  52.             tag2.classList.remove('hide');
  53.         }
  54.  
  55.         function cancle() {
  56.             var tag1 = document.getElementById('shade');
  57.             var tag2 = document.getElementById('modal');
  58.  
  59.             tag1.classList.add('hide');
  60.             tag2.classList.add('hide');
  61.         }
  62.     </script>
  63. </body>
  64. </html>

模态对话框

4、标签操作

a.创建标签(两种方式)

  1. // 方式一
  2. var tag = document.createElement('a')
  3. tag.innerText = "wupeiqi"
  4. tag.className = "c1"
  5. tag.href = "http://www.cnblogs.com/wupeiqi"
  6.  
  7. // 方式二
  8. var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

b.操作标签(两种方式和创建标签是对应的)　　

  1. // 方式一
  2. var tag = document.createElement('a')
  3. xxx.appendChild(tag)
  4. xxx.insertBefore(tag,xxx[1])
  5.  
  6. // 方式二
  7. var obj = "<input type='text' />";
  8. xxx.insertAdjacentHTML("beforeEnd",obj);
  9. xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
  10.  
  11. //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

5、样式操作　

  1. ar obj = document.getElementById('i1')
  2.  
  3. obj.style.fontSize = "32px";
  4. obj.style.backgroundColor = "red";
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>点赞</title>
  6.     <style>
  7.         .item{
  8.             padding:50px;
  9.             position: relative;
  10.         }
  11.         .item span{
  12.             position: absolute;
  13.             top:49px;
  14.             left:71px;
  15.             opacity:1;
  16.             font-size:18px;
  17.             color: green;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="item">
  23.         <a onclick="Favor(this);">赞1</a>
  24.         <!--<span>+1</span>-->
  25.     </div>
  26.  
  27.     <div class="item">
  28.         <a onclick="Favor(this);">赞2</a>
  29.     </div>
  30.  
  31.     <div class="item">
  32.         <a onclick="Favor(this);">赞3</a>
  33.     </div>
  34.  
  35.     <script>
  36.         function Favor(ths) {
  37.             // ths形参 --> this实参 --> 是当前触发事件的标签
  38.  
  39.             var top = 49;
  40.             var left = 71;
  41.             var op = 1;
  42.             var fontSize = 18;
  43.             var tag = document.createElement('span');
  44.             tag.innerText = '+1';
  45.             tag.style.position = 'absolute';
  46.             tag.style.top = top + 'px';
  47.             tag.style.left = left + 'px';
  48.             tag.style.opacity = op;
  49.             tag.style.fontSize = fontSize + 'px';
  50.             ths.parentElement.appendChild(tag);
  51.  
  52.             var intervarl = setInterval(function () {
  53.                 top -= 10;
  54.                 left += 10;
  55.                 fontSize += 5;
  56.                 op -= 0.1;
  57.  
  58.                 tag.style.top = top + 'px';
  59.                 tag.style.left = left + 'px';
  60.                 tag.style.opacity = op;
  61.                 tag.style.fontSize = fontSize + 'px';
  62.  
  63.                 if(op == 0.2){
  64.                     clearInterval(intervarl);
  65.                     ths.parentElement.removeChild(tag);
  66.                 }
  67.  
  68.             },50)
  69.         }
  70.     </script>
  71. </body>
  72. </html>

点赞

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>搜索框二</title>
  6. </head>
  7. <body>
  8.     <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />
  9.  
  10.     <script>
  11.         function Focus(ths){
  12.             ths.style.color = "black";
  13.             if(ths.value == '请输入关键字' || ths.value.trim() == ""){
  14.  
  15.                 ths.value = "";
  16.             }
  17.         }
  18.  
  19.         function Blur(ths){
  20.             if(ths.value.trim() == ""){
  21.                 ths.value = '请输入关键字';
  22.                 ths.style.color = 'gray';
  23.             }else{
  24.                 ths.style.color = "black";
  25.             }
  26.         }
  27.     </script>
  28. </body>
  29. </html>

搜索框二

6、位置操作

  1. 总文档高度
  2. document.documentElement.offsetHeight
  3.  
  4. 当前文档占屏幕高度
  5. document.documentElement.clientHeight
  6.  
  7. 自身高度
  8. tag.offsetHeight
  9.  
  10. 距离上级定位高度
  11. tag.offsetTop
  12.  
  13. 父定位标签
  14. tag.offsetParent
  15.  
  16. 滚动高度
  17. tag.scrollTop
  18.  
  19. /*
  20.     clientHeight -> 可见区域：height + padding
  21.     clientTop    -> border高度
  22.     offsetHeight -> 可见区域：height + padding + border
  23.     offsetTop    -> 上级定位标签的高度
  24.     scrollHeight -> 全文高：height + padding
  25.     scrollTop    -> 滚动高度
  26.     特别的：
  27.         document.documentElement代指文档根节点
  28. */
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>返回顶部</title>
  6.     <style>
  7.         *{
  8.             margin:0;
  9.         }
  10.         .back{
  11.             position: fixed;
  12.             width:5px;
  13.             right: 60px;
  14.             bottom: 20px;
  15.             color: red;
  16.             cursor: pointer;
  17.         }
  18.         .hide{
  19.             display: none;
  20.         }
  21.     </style>
  22. </head>
  23. <body onscroll="BodyScroll();">
  24.     <div style="height:2000px;background-color: #dddddd;"></div>
  25.     <div id="back" class="back hide" onclick="Backtop()">返回顶部</div>
  26.  
  27.     <script>
  28.         function Backtop() {
  29.             document.body.scrollTop = 0;
  30.         }
  31.  
  32.         function BodyScroll() {
  33.             var s = document.body.scrollTop;
  34.             var t = document.getElementById('back');
  35.             if(s > 100){
  36.                 t.classList.remove('hide');
  37.             }else {
  38.                 t.classList.add('hide');
  39.             }
  40.         }
  41.     </script>
  42.  
  43. </body>
  44. </html>

返回顶部

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>滚动固定</title>
  6. </head>
  7. <style>
  8.  
  9.     body{
  10.         margin: 0px;
  11.     }
  12.     img {
  13.         border: 0;
  14.     }
  15.     ul{
  16.         padding: 0;
  17.         margin: 0;
  18.         list-style: none;
  19.     }
  20.     .clearfix:after {
  21.         content: ".";
  22.         display: block;
  23.         height: 0;
  24.         clear: both;
  25.         visibility: hidden;
  26.     }
  27.  
  28.     .wrap{
  29.         width: 980px;
  30.         margin: 0 auto;
  31.     }
  32.  
  33.     .pg-header{
  34.         background-color: #303a40;
  35.         -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  36.         -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  37.         box-shadow: 0 2px 5px rgba(0,0,0,.2);
  38.     }
  39.     .pg-header .logo{
  40.         float: left;
  41.         padding:5px 10px 5px 0px;
  42.     }
  43.     .pg-header .logo img{
  44.         vertical-align: middle;
  45.         width: 110px;
  46.         height: 40px;
  47.  
  48.     }
  49.     .pg-header .nav{
  50.         line-height: 50px;
  51.     }
  52.     .pg-header .nav ul li{
  53.         float: left;
  54.     }
  55.     .pg-header .nav ul li a{
  56.         display: block;
  57.         color: #ccc;
  58.         padding: 0 20px;
  59.         text-decoration: none;
  60.         font-size: 14px;
  61.     }
  62.     .pg-header .nav ul li a:hover{
  63.         color: #fff;
  64.         background-color: #425a66;
  65.     }
  66.     .pg-body{
  67.  
  68.     }
  69.     .pg-body .catalog{
  70.         position: absolute;
  71.         top:60px;
  72.         width: 200px;
  73.         background-color: #fafafa;
  74.         bottom: 0px;
  75.     }
  76.     .pg-body .catalog.fixed{
  77.         position: fixed;
  78.         top:10px;
  79.     }
  80.  
  81.     .pg-body .catalog .catalog-item.active{
  82.         color: #fff;
  83.         background-color: #425a66;
  84.     }
  85.  
  86.     .pg-body .content{
  87.         position: absolute;
  88.         top:60px;
  89.         width: 700px;
  90.         margin-left: 210px;
  91.         background-color: #fafafa;
  92.         overflow: auto;
  93.     }
  94.     .pg-body .content .section{
  95.         height: 500px;
  96.     }
  97. </style>
  98. <body onscroll="ScrollEvent();">
  99. <div class="pg-header">
  100.     <div class="wrap clearfix">
  101.         <div class="logo">
  102.             <a href="#">
  103.                 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
  104.             </a>
  105.         </div>
  106.         <div class="nav">
  107.             <ul>
  108.                 <li>
  109.                     <a  href="#">首页</a>
  110.                 </li>
  111.                 <li>
  112.                     <a  href="#">功能一</a>
  113.                 </li>
  114.                 <li>
  115.                     <a  href="#">功能二</a>
  116.                 </li>
  117.             </ul>
  118.         </div>
  119.  
  120.     </div>
  121. </div>
  122. <div class="pg-body">
  123.     <div class="wrap">
  124.         <div class="catalog">
  125.             <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
  126.             <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
  127.             <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
  128.         </div>
  129.         <div class="content">
  130.             <div menu="function1" class="section">
  131.                 <h1>第一章</h1>
  132.             </div>
  133.             <div menu="function2" class="section">
  134.                 <h1>第二章</h1>
  135.             </div>
  136.             <div menu="function3" class="section">
  137.                 <h1>第三章</h1>
  138.             </div>
  139.         </div>
  140.     </div>
  141.  
  142. </div>
  143.     <script>
  144.         function ScrollEvent(){
  145.             var bodyScrollTop = document.body.scrollTop;
  146.             if(bodyScrollTop>50){
  147.                 document.getElementsByClassName('catalog')[0].classList.add('fixed');
  148.             }else{
  149.                 document.getElementsByClassName('catalog')[0].classList.remove('fixed');
  150.             }
  151.  
  152.         }
  153.     </script>
  154. </body>
  155. </html>

滚动固定

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>滚动菜单</title>
  6. </head>
  7. <style>
  8.  
  9.     body{
  10.         margin: 0px;
  11.     }
  12.     img {
  13.         border: 0;
  14.     }
  15.     ul{
  16.         padding: 0;
  17.         margin: 0;
  18.         list-style: none;
  19.     }
  20.     h1{
  21.         padding: 0;
  22.         margin: 0;
  23.     }
  24.     .clearfix:after {
  25.         content: ".";
  26.         display: block;
  27.         height: 0;
  28.         clear: both;
  29.         visibility: hidden;
  30.     }
  31.  
  32.     .wrap{
  33.         width: 980px;
  34.         margin: 0 auto;
  35.     }
  36.  
  37.     .pg-header{
  38.         background-color: #303a40;
  39.         -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  40.         -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  41.         box-shadow: 0 2px 5px rgba(0,0,0,.2);
  42.     }
  43.     .pg-header .logo{
  44.         float: left;
  45.         padding:5px 10px 5px 0px;
  46.     }
  47.     .pg-header .logo img{
  48.         vertical-align: middle;
  49.         width: 110px;
  50.         height: 40px;
  51.  
  52.     }
  53.     .pg-header .nav{
  54.         line-height: 50px;
  55.     }
  56.     .pg-header .nav ul li{
  57.         float: left;
  58.     }
  59.     .pg-header .nav ul li a{
  60.         display: block;
  61.         color: #ccc;
  62.         padding: 0 20px;
  63.         text-decoration: none;
  64.         font-size: 14px;
  65.     }
  66.     .pg-header .nav ul li a:hover{
  67.         color: #fff;
  68.         background-color: #425a66;
  69.     }
  70.     .pg-body{
  71.  
  72.     }
  73.     .pg-body .catalog{
  74.         position: absolute;
  75.         top:60px;
  76.         width: 200px;
  77.         background-color: #fafafa;
  78.         bottom: 0px;
  79.     }
  80.     .pg-body .catalog.fixed{
  81.         position: fixed;
  82.         top:10px;
  83.     }
  84.  
  85.     .pg-body .catalog .catalog-item.active{
  86.         color: #fff;
  87.         background-color: #425a66;
  88.     }
  89.  
  90.     .pg-body .content{
  91.         position: absolute;
  92.         top:60px;
  93.         width: 700px;
  94.         margin-left: 210px;
  95.         background-color: #fafafa;
  96.         overflow: auto;
  97.     }
  98.     .pg-body .content .section{
  99.         height: 500px;
  100.         border: 1px solid red;
  101.     }
  102. </style>
  103. <body onscroll="ScrollEvent();">
  104. <div class="pg-header">
  105.     <div class="wrap clearfix">
  106.         <div class="logo">
  107.             <a href="#">
  108.                 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
  109.             </a>
  110.         </div>
  111.         <div class="nav">
  112.             <ul>
  113.                 <li>
  114.                     <a  href="#">首页</a>
  115.                 </li>
  116.                 <li>
  117.                     <a  href="#">功能一</a>
  118.                 </li>
  119.                 <li>
  120.                     <a  href="#">功能二</a>
  121.                 </li>
  122.             </ul>
  123.         </div>
  124.  
  125.     </div>
  126. </div>
  127. <div class="pg-body">
  128.     <div class="wrap">
  129.         <div class="catalog" id="catalog">
  130.             <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
  131.             <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
  132.             <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
  133.         </div>
  134.         <div class="content" id="content">
  135.             <div menu="function1" class="section">
  136.                 <h1>第一章</h1>
  137.             </div>
  138.             <div menu="function2" class="section">
  139.                 <h1>第二章</h1>
  140.             </div>
  141.             <div menu="function3" class="section">
  142.                 <h1>第三章</h1>
  143.             </div>
  144.         </div>
  145.     </div>
  146.  
  147. </div>
  148.     <script>
  149.         function ScrollEvent(){
  150.             var bodyScrollTop = document.body.scrollTop;
  151.             if(bodyScrollTop>50){
  152.                 document.getElementsByClassName('catalog')[0].classList.add('fixed');
  153.             }else{
  154.                 document.getElementsByClassName('catalog')[0].classList.remove('fixed');
  155.             }
  156.  
  157.             var content = document.getElementById('content');
  158.             var sections = content.children;
  159.             for(var i=0;i<sections.length;i++){
  160.                 var current_section = sections[i];
  161.  
  162.                 // 当前标签距离顶部绝对高度
  163.                 var scOffTop = current_section.offsetTop + 60;
  164.  
  165.                 // 当前标签距离顶部，相对高度
  166.                 var offTop = scOffTop - bodyScrollTop;
  167.  
  168.                 // 当前标签高度
  169.                 var height = current_section.scrollHeight;
  170.  
  171.                 if(offTop<0 && -offTop < height){
  172.                     // 当前标签添加active
  173.                     // 其他移除 active
  174.                     var menus = document.getElementById('catalog').children;
  175.                     var current_menu = menus[i];
  176.                     current_menu.classList.add('active');
  177.                     for(var j=0;j<menus.length;j++){
  178.                         if(menus[j] == current_menu){
  179.  
  180.                         }else{
  181.                             menus[j].classList.remove('active');
  182.                         }
  183.                     }
  184.                     break;
  185.                 }
  186.  
  187.             }
  188.  
  189.         }
  190.     </script>
  191. </body>
  192. </html>

滚动菜单

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>滚动高度</title>
  6. </head>
  7. <style>
  8.  
  9.     body{
  10.         margin: 0px;
  11.     }
  12.     img {
  13.         border: 0;
  14.     }
  15.     ul{
  16.         padding: 0;
  17.         margin: 0;
  18.         list-style: none;
  19.     }
  20.     h1{
  21.         padding: 0;
  22.         margin: 0;
  23.     }
  24.     .clearfix:after {
  25.         content: ".";
  26.         display: block;
  27.         height: 0;
  28.         clear: both;
  29.         visibility: hidden;
  30.     }
  31.  
  32.     .wrap{
  33.         width: 980px;
  34.         margin: 0 auto;
  35.     }
  36.  
  37.     .pg-header{
  38.         background-color: #303a40;
  39.         -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  40.         -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  41.         box-shadow: 0 2px 5px rgba(0,0,0,.2);
  42.     }
  43.     .pg-header .logo{
  44.         float: left;
  45.         padding:5px 10px 5px 0px;
  46.     }
  47.     .pg-header .logo img{
  48.         vertical-align: middle;
  49.         width: 110px;
  50.         height: 40px;
  51.  
  52.     }
  53.     .pg-header .nav{
  54.         line-height: 50px;
  55.     }
  56.     .pg-header .nav ul li{
  57.         float: left;
  58.     }
  59.     .pg-header .nav ul li a{
  60.         display: block;
  61.         color: #ccc;
  62.         padding: 0 20px;
  63.         text-decoration: none;
  64.         font-size: 14px;
  65.     }
  66.     .pg-header .nav ul li a:hover{
  67.         color: #fff;
  68.         background-color: #425a66;
  69.     }
  70.     .pg-body{
  71.  
  72.     }
  73.     .pg-body .catalog{
  74.         position: absolute;
  75.         top:60px;
  76.         width: 200px;
  77.         background-color: #fafafa;
  78.         bottom: 0px;
  79.     }
  80.     .pg-body .catalog.fixed{
  81.         position: fixed;
  82.         top:10px;
  83.     }
  84.  
  85.     .pg-body .catalog .catalog-item.active{
  86.         color: #fff;
  87.         background-color: #425a66;
  88.     }
  89.  
  90.     .pg-body .content{
  91.         position: absolute;
  92.         top:60px;
  93.         width: 700px;
  94.         margin-left: 210px;
  95.         background-color: #fafafa;
  96.         overflow: auto;
  97.     }
  98.     .pg-body .content .section{
  99.         height: 500px;
  100.         border: 1px solid red;
  101.     }
  102. </style>
  103. <body onscroll="ScrollEvent();">
  104. <div class="pg-header">
  105.     <div class="wrap clearfix">
  106.         <div class="logo">
  107.             <a href="#">
  108.                 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
  109.             </a>
  110.         </div>
  111.         <div class="nav">
  112.             <ul>
  113.                 <li>
  114.                     <a  href="#">首页</a>
  115.                 </li>
  116.                 <li>
  117.                     <a  href="#">功能一</a>
  118.                 </li>
  119.                 <li>
  120.                     <a  href="#">功能二</a>
  121.                 </li>
  122.             </ul>
  123.         </div>
  124.  
  125.     </div>
  126. </div>
  127. <div class="pg-body">
  128.     <div class="wrap">
  129.         <div class="catalog" id="catalog">
  130.             <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
  131.             <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
  132.             <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
  133.         </div>
  134.         <div class="content" id="content">
  135.             <div menu="function1" class="section">
  136.                 <h1>第一章</h1>
  137.             </div>
  138.             <div menu="function2" class="section">
  139.                 <h1>第二章</h1>
  140.             </div>
  141.             <div menu="function3" class="section" style="height: 200px;">
  142.                 <h1>第三章</h1>
  143.             </div>
  144.         </div>
  145.     </div>
  146.  
  147. </div>
  148.     <script>
  149.         function ScrollEvent(){
  150.             var bodyScrollTop = document.body.scrollTop;
  151.             if(bodyScrollTop>50){
  152.                 document.getElementsByClassName('catalog')[0].classList.add('fixed');
  153.             }else{
  154.                 document.getElementsByClassName('catalog')[0].classList.remove('fixed');
  155.             }
  156.  
  157.             var content = document.getElementById('content');
  158.             var sections = content.children;
  159.             for(var i=0;i<sections.length;i++){
  160.                 var current_section = sections[i];
  161.  
  162.                 // 当前标签距离顶部绝对高度
  163.                 var scOffTop = current_section.offsetTop + 60;
  164.  
  165.                 // 当前标签距离顶部，相对高度
  166.                 var offTop = scOffTop - bodyScrollTop;
  167.  
  168.                 // 当前标签高度
  169.                 var height = current_section.scrollHeight;
  170.  
  171.                 if(offTop<0 && -offTop < height){
  172.                     // 当前标签添加active
  173.                     // 其他移除 active
  174.  
  175.                     // 如果已经到底部，现实第三个菜单
  176.                     // 文档高度 ＝ 滚动高度 + 视口高度
  177.  
  178.                     var a = document.getElementsByClassName('content')[0].offsetHeight + 60;
  179.                     var b = bodyScrollTop + document.documentElement.clientHeight;
  180.                     console.log(a+60,b);
  181.                     if(a == b){
  182.                         var menus = document.getElementById('catalog').children;
  183.                         var current_menu = document.getElementById('catalog').lastElementChild;
  184.                         current_menu.classList.add('active');
  185.                         for(var j=0;j<menus.length;j++){
  186.                             if(menus[j] == current_menu){
  187.  
  188.                             }else{
  189.                                 menus[j].classList.remove('active');
  190.                             }
  191.                         }
  192.                     }else{
  193.                         var menus = document.getElementById('catalog').children;
  194.                         var current_menu = menus[i];
  195.                         current_menu.classList.add('active');
  196.                         for(var j=0;j<menus.length;j++){
  197.                             if(menus[j] == current_menu){
  198.  
  199.                             }else{
  200.                                 menus[j].classList.remove('active');
  201.                             }
  202.                         }
  203.                     }
  204.                     break;
  205.                 }
  206.             }
  207.         }
  208.     </script>
  209. </body>
  210. </html>

滚动高度

7、提交表单

  1. document.geElementById('form').submit()
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>a标签提交表单</title>
  6. </head>
  7. <body>
  8.     <form id="f1">
  9.         <input type="text"/>
  10.         <input type="submit" value="提交"/>
  11.         <a onclick="Submit()">提交</a>
  12.     </form>
  13.  
  14.     <script>
  15.         function Submit() {
  16.             var form = document.getElementById('f1');
  17.             form.submit();
  18.         }
  19.     </script>
  20. </body>
  21. </html>

a标签提交表单

8、其他操作

  1. console.log                 输出框
  2. alert                       弹出框
  3. confirm                     确认框
  4.  
  5. // URL和刷新
  6. location.href               获取URL
  7. location.href = "url"       重定向
  8. location.reload()           重新加载
  9.  
  10. // 定时器
  11. setInterval                 多次定时器
  12. clearInterval               清除多次定时器
  13. setTimeout                  单次定时器
  14. clearTimeout                清除单次定时器
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>定时器</title>
  6. </head>
  7. <body>
  8.     <div id="status" style="color:red">
  9.  
  10.     </div>
  11.     <input type="button" value="删除" onclick="DeleteStatus()"/>
  12.  
  13.     <script>
  14.         function DeleteStatus() {
  15.             var s = document.getElementById('status');
  16.             s.innerText = '删除成功';
  17.             setTimeout(function () {
  18.                 s.innerText = "";
  19.             },5000);
  20.         }
  21.     </script>
  22. </body>
  23. </html>

定时器

三、事件　

对于事件需要注意的要点：

  • this
  • event
  • 事件链以及跳出

this标签当前正在操作的标签，event封装了当前事件的内容。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>event事件的内容</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.         }
  10.         .hide{
  11.             display:none;
  12.         }
  13.         .shade{
  14.             position: fixed;
  15.             top:0;
  16.             bottom:0;
  17.             left:0;
  18.             right:0;
  19.             background-color: rgba(0,0,0,.6);
  20.         }
  21.         .modal{
  22.             position: fixed;
  23.             height: 400px;
  24.             width:500px;
  25.             background-color: white;
  26.             top:50%;
  27.             left:50%;
  28.             margin-top: -200px;
  29.             margin-left: -250px;
  30.         }
  31.     </style>
  32.  
  33. </head>
  34. <body>
  35.     <div style="height: 2000px;background-color: #dddddd;">
  36.         <input type="button" value="登录" onclick="show()"/>
  37.     </div>
  38.  
  39.     <div id="shade" class="shade hide"></div>
  40.     <div id="modal" class="modal hide">
  41.         <input type="text" placeholder="用户名"/><br/>
  42.         <input type="password" placeholder="密码"/><br/>
  43.         <!--<a href="javascript:void(0)" onclick="cancle()">取消</a>-->
  44.     </div>
  45.  
  46.     <script>
  47.         function show() {
  48.             var tag1 = document.getElementById('shade');
  49.             var tag2 = document.getElementById('modal');
  50.  
  51.             tag1.classList.remove('hide');
  52.             tag2.classList.remove('hide');
  53.         }
  54.  
  55.         function cancle() {
  56.                         var tag1 = document.getElementById('shade');
  57.             var tag2 = document.getElementById('modal');
  58.  
  59.             tag1.classList.add('hide');
  60.             tag2.classList.add('hide');
  61.         }
  62.         window.onkeydown = function (event) {
  63.             console.log(event);
  64.             if(event.keyCode == 27){
  65.                 cancle();
  66.             }
  67.         }
  68.     </script>
  69. </body>
  70. </html>

event事件的内容(模态对话框)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>默认事件与自定义事件</title>
  6. </head>
  7. <body>
  8.     <!--自定义事件优先的标签:a,form-->
  9.     <!--默认事件优先的标签:checkbox-->
  10.     <!--return 事件,返回false则默认的事件不执行,true则会执行默认事件-->
  11.     <form action="https://www.baidu.com">
  12.         <input type="text" id="username"/>
  13.         <input type="submit" value="提交" onclick="return SubmitForm();"/>
  14.     </form>
  15.  
  16.     <script>
  17.         function SubmitForm() {
  18.             var user = document.getElementById('username');
  19.             if(user.value.length > 0){
  20.                 // 可以提交
  21.                 return true;
  22.             }else{
  23.                 //不可以提交
  24.                 alert('用户名输入不能为空');
  25.                 return false;
  26.             }
  27.         }
  28.     </script>
  29. </body>
  30. </html>

默认事件与自定义事件

　

Python自动化运维之23、Dom的更多相关文章

  1. python自动化运维篇

    1-1 Python运维-课程简介及基础 1-2 Python运维-自动化运维脚本编写 2-1 Python自动化运维-Ansible教程-Ansible介绍 2-2 Python自动化运维-Ansi ...

  2. Day1 老男孩python自动化运维课程学习笔记

    2017年1月7日老男孩python自动化运维课程正式开课 第一天学习内容: 上午 1.python语言的基本介绍 python语言是一门解释型的语言,与1989年的圣诞节期间,吉多·范罗苏姆为了在阿 ...

  3. python自动化运维学习第一天--day1

    学习python自动化运维第一天自己总结的作业 所使用到知识:json模块,用于数据转化sys.exit 用于中断循环退出程序字符串格式化.format字典.文件打开读写with open(file, ...

  4. 【目录】Python自动化运维

    目录:Python自动化运维笔记 Python自动化运维 - day2 - 数据类型 Python自动化运维 - day3 - 函数part1 Python自动化运维 - day4 - 函数Part2 ...

  5. Python自动化运维的职业发展道路（暂定）

    Python职业发展之路 Python自动化运维工程 Python基础 Linux Shell Fabric Ansible Playbook Zabbix Saltstack Puppet Dock ...

  6. Python自动化运维：技术与最佳实践 PDF高清完整版|网盘下载内附地址提取码|

    内容简介: <Python自动化运维:技术与最佳实践>一书在中国运维领域将有“划时代”的重要意义:一方面,这是国内第一本从纵.深和实践角度探讨Python在运维领域应用的著作:一方面本书的 ...

  7. Python自动化运维 技术与最佳实践PDF高清完整版免费下载|百度云盘|Python基础教程免费电子书

    点击获取提取码:7bl4 一.内容简介 <python自动化运维:技术与最佳实践>一书在中国运维领域将有"划时代"的重要意义:一方面,这是国内第一本从纵.深和实践角度探 ...

  8. python自动化运维之CMDB篇-大米哥

    python自动化运维之CMDB篇 视频地址:复制这段内容后打开百度网盘手机App,操作更方便哦 链接:https://pan.baidu.com/s/1Oj_sglTi2P1CMjfMkYKwCQ  ...

  9. python自动化运维之路~DAY5

    python自动化运维之路~DAY5 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.模块的分类 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数 ...

随机推荐

  1. Openstack部署工具

    Openstack发展很猛,很多朋友都很认同,2013年,会很好的解决OpenStack部署的问题,让安装,配置变得更加简单易用. 很多公司都投入人力去做这个,新浪也计划做一个Openstack的is ...

  2. 简单粗暴地理解 JavaScript 原型链

    尼玛!你特么也是够了! Don’t BB! Show me the code! function Person (name) { this.name = name; } function Mother ...

  3. Java日志记录的5条规则

    日志记录是在软件开发过程中常常需要考虑的关键因素. 当产品运行出错时,日志文件通常是我们进行错误分析的首要选择. 而且,在很多情况下,它们是我们手上唯一可以用来查明发生状况和问题根本原因的信息. 可见 ...

  4. java对Ldap操作3

    "));    }}

  5. bzoj3065: 带插入区间K小值

    无聊来写了下 一开始发现树高是O(n)的,然后就MLE了,进去看了下发现没有重构! 看了半天发现调用错了函数 然后进去又发现不满足sz = ch[0]->sz + ch[1]->sz + ...

  6. [RxJS + AngularJS] Sync Requests with RxJS and Angular

    When you implement a search bar, the user can make several different queries in a row. With a Promis ...

  7. 修改android应用包名 分类： android 学习笔记 2015-07-16 22:48 4人阅读 评论(0) 收藏

    由于项目需要,要修改已经开发好的应用包名,这本身很简单,但是如果你没找到门道,可能会白白浪费许多时间. 修改包名有三个地方要改,这三个地方的修改一定要按顺序来,否则你可能会遇到许多不必要的麻烦. 1. ...

  8. GUI编程笔记（java）11：使用Netbeans工具进行GUI编程

    Netbeans工具:是基于java语言进行GUI界面设计的工具 Visual Studio工具:是基于C#语言进行GUI界面设计的工具

  9. 安装Visual Studio 2013 中文社区版

    Visual Studio 2013 免费了,我收到邮件后,立即从邮件的下载连接安装了 Visual Studio Community 2013 with Update 4 . 安装后几天没打开,今天 ...

  10. windows下安装redis和php的redis扩展

    1.redis简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(s ...