JS-API、DOM-day07-5.6

Web API

Web API介绍

API的概念

API（Application Programming Interface,==应用程序编程接口==）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

任何开发语言都有自己的API
API的特征输入和输出(I/O)
- var max = Math.max(1, 2, 3);
API的使用方法(console.log('adf'))

Web API的概念

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

掌握常见浏览器提供的API的调用方式

==ECMAScript - JavaScript的核心==

定义了JavaScript 的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，==ECMAScript是一套标准，定义了一种语言的标准与具体实现无关==

BOM - 浏览器对象模型

一套==操作浏览器功能的API==

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套==操作页面元素的API==

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM

DOM的概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构和www文档的风格(目前，HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

DOM又称为文档树模型

==文档：一个网页可以称为文档==
==节点：网页中的所有内容都是节点（标签、属性、文本、注释等）==
==元素：网页中的标签==
==属性：标签的属性==

DOM经常进行的操作

==获取元素==
==对元素进行操作(设置其属性或调用其方法)==
==动态创建元素==
==事件(什么时机做相应的操作)==

获取页面元素

为什么要获取页面元素

例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作

==根据id获取元素==

var div = document.getElementById('main');
console.log(div);

// 获取到的数据类型 HTMLDivElement，对象都是有类型的

注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。

案例解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>我是第一个div</div>
    <div id="main">keke</div>
    <div>xioaming</div>
    <div>honghong</div>
    <p id="pp">你是个p</p>
</body>
<script type="text/javascript">
    // document 文档类型
    // get 获取 Element 元素 By 根据 Id 标识

    //如果页面上没有对应的id，此时返回null

    //HTMLDivElement
    var main=document.getElementById('main');
    // console.log(main); 
    
    // console.log('ab');
    //打印对象
    console.dir(main);

    //对象是有类型的
    // var arr=new Array();
    // console.dir(arr);
    //HTMLParagraphElement
    var pp=document.getElementById('pp');
    console.dir(pp);

</script>
</html>

==根据标签名获取元素==

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

案例解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        var divs=document.getElementsByTagName('div');
        console.log(divs);
        console.log(divs.length);//0
    </script>
</head>
<body>
    <div>我是第一个div</div>
    <div id="main">keke</div>
    <div>xioaming</div>
    <div>honghong</div>
    <p id="pp">你是个p</p>
    <span>you are span</span>
</body>
<script type="text/javascript">
   console.log(divs.length);//4
   // //HTMLCollection 集合 伪数组 
   // var divs=document.getElementsByTagName('div');
   // console.log(divs);//HTMLCollection(4) [div, div#main, div, div, main: div#main]
   // for(var i=0;i<divs.length;i++) {
   //   console.log(divs[i]);
   //   //div中的每一个元素是什么类型？
   //   //div中每一个元素都是对象 都是 HTMLDivElement
   // }

   // PS:getElementsByTagName()获取到的集合是动态集合 getElementsByTagName 如：head中的代码
   var strongs=document.getElementsByTagName('strong');
        console.log(strongs);
</script>
</html>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="head">
        <div>1111</div>
        <div>2222</div>
        <p>你是个p1</p>
        <span>you are span1</span>
    </div>
    <div id="main">keke</div>
    <div>xioaming</div>
    <div>honghong</div>
    <p id="pp">你是个p</p>
    <span>you are span</span>
</body>
<script type="text/javascript">
      var head=document.getElementById('head');
      var divs=head.getElementsByTagName('div');
      console.log(divs);
</script>
</html>

==根据name获取元素*==

var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

==根据类名获取元素*==

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

==根据选择器获取元素*==

var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

总结

    掌握
        getElementById()
        getElementsByTagName()
    了解
        getElementsByName()
        getElementsByClassName()
        querySelector()
        querySelectorAll()

案例解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="main">我是1</div>
    <div name='main'>我是2</div>
    <div class="a">class1 </div>
    <div class="b">class2 </div>
    <p class="a">zzzzz</p>
</body>
<script type="text/javascript">
     //根据标签的name属性 获取元素
     //document.getElementsByName()
     // var divs=document.getElementsByName('main');
     //     console.log(divs);
      //根据class属性获取元素
      //浏览器兼容性  IE9以后才支持
      // document.getElement sByClassName()
      //query 查询 Selector 选择器  根据选择器来查找元素
      // document.querySelector();  需要加上前缀#、.

      // var main=document.querySelector('#main');
      // console.log(main);
       //只能获取一个元素
      // var element=document.querySelector('.a');
      // console.log(element);
       
       //获取所有匹配的元素
      //  var elements=document.querySelectorAll('.a');
      // console.log(elements);
      

      //只返回第一个匹配的元素
     // querySelector()
     //返回所有匹配的元素
      // querySelectorAll()
</script>
</html>

#事件

事件：触发-响应机制

事件三要素

事件源:触发(被)事件的元素
事件名称: click 点击事件
事件处理程序:事件触发后要执行的代码(函数形式)

事件的基本使用

var box = document.getElementById('box');
box.onclick = function() {
  console.log('代码会在box被点击后执行');  
};

案例

1.美女相册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       body {
         background-color: #ccc;
      }
      #box {
        margin-left: 150px;
      }
      h2 {
        font-family: '隶书';
        font-weight: 400;
        font-size: 30px;
        margin-left: 150px;
      }
      a img {
        float: left;
        margin-left: 10px;
      }
      #place {
        
        margin-top: 20px;
      }
    </style>
</head>
<body>
     <h2>美女画廊</h2>
    <div id="box">  
    <a href="images/1.jpg" title="美女A">
        <img src="images/1-small.jpg" alt="" width="100">
    </a>
    <a href="images/2.jpg" title="美女B">
        <img src="images/2-small.jpg" alt="" width="100">
    </a>
    <a href="images/3.jpg" title="美女C">
       <img src="images/3-small.jpg" alt="" width="100">
    </a>
    <a href="images/4.jpg" title="美女D">
       <img src="images/4-small.jpg" alt="" width="100">
    </a>
    <div style="clear:both"></div>
    <img src="images/placeholder.png" alt="" id="places" width="450">
    
    <p>显示标题中的文字</p>
    </div>
</body>
<script type="text/javascript">
    var box=document.getElementById('box');
    var links=box.getElementsByTagName('a');
    
    // var isMouseOver=true;
    for(var i=0;i<links.length;i++) {
        link=links[i];

        // link.onclick=function()

        link.onmouseover=function() {
            
            var places=document.getElementById('places');
             places.src=this.href; 
                return false;
        }
    }
</script>
</html>

属性操作

非表单元素的属性

href、title、id、src、className

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src);

案例：

点击按钮显示隐藏div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .show {
        display: block;;
    }
    .hidden {
        display: none;
    }
    </style>
</head>
<body>
    <input type="button" id="btn" value="点我">
    <div id="box"></div>
</body>
<script type="text/javascript">
    var btn=document.getElementById('btn');
        var isShow=true;
        btn.onclick=function() {
             var box=document.getElementById('box');
             if (isShow) {
                  box.className='hidden';
                  this.value='显示';
                  isShow=false;
             }else {
                  box.className='show';
                  this.value='隐藏';
                  isShow=true;
             }
        }
</script>
</html>

点击按钮切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" id="btn" value="点我"><br>
    <img src="images/1.jpg" alt="" width="300" height="250" id="pic">
    
</body>
<script type="text/javascript">
    var btn=document.getElementById('btn');
    var flag=1;
    btn.onclick=function() {
        var pic=document.getElementById('pic'); 
        if (flag==1) {
            pic.src='images/2.jpg';
            flag=2;
        }else if (flag==2) {
            pic.src='images/1.jpg';
            flag=1;
        }
    }
</script>
</html>

innerHTML和innerText

var box = document.getElementById('box');
    box.innerHTML = '我是文本<p>我会生成为标签</p>';
    console.log(box.innerHTML);
    box.innerText = '我是文本<p>我不会生成为标签</p>';
    console.log(box.innerText);

HTML转义符

 "      &quot;
    '       &apos;
    &       &amp;
    <       &lt;   // less than  小于
    >       &gt;   // greater than  大于
    空格     &nbsp;
    ©       &copy;

innerHTML和innerText的区别
innerText的兼容性处理

表单元素属性

value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性
checked 复选框选中属性
selected 下拉菜单选中属性

案例

点击按钮禁用文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" id="btn" value="点我">
    <input type="text" value="" id="txt" >
</body>
<script type="text/javascript">
    var btn=document.getElementById('btn');
    btn.onclick=function() {
        var txt=document.getElementById('txt');
        txt.disabled='disabled';
    }
</script>
</html>

给文本框赋值，获取文本框的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #more input {
        display: block;
        margin-top: 4px;
    }
    </style>
</head>
<body>
    <div id="more">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="button" id="btn" value="获取文本框的值">
    </div>
</body>
<script type="text/javascript">
//设置文本框的值
    var more=document.getElementById('more');
    var inputs=more.getElementsByTagName('input');
    for(var i=0;i<inputs.length;i++) {
        var input=inputs[i];
         if (input.type=='text') {
                    input.value=i;
                }
        
//点击按钮获取文本框的值   2 当点击按钮的时候，获取所有文本框的值，并使用 | 分割输出
// 0|1|2
        var btn=document.getElementById('btn');
    //  btn.onclick=function() {
    //      var str=''; 
 //            for(var i=0;i<inputs.length;i++) {
    //          var input=inputs[i];
 //                if (input.type=='text') {
 //                 str+=input.value+'|';   
 //                }
    //      }
    //      str=str.substr(0,str.length-1);
    //      console.log(str);
    //  }
    // }



        btn.onclick=function() {
            function getZhi() {
                var str=''; 
                for(var i=0;i<inputs.length;i++) {
                    var input=inputs[i];
                       if (input.type=='text') {
                           str+=input.value+'|';    
                        }
                }
                  str=str.substr(0,str.length-1);
                 return str;
            }

            }
            getZhi();   
        }
</script>
</html>

检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .pink {
        background-color: pink;
    }
    </style>
    <!-- 检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框 -->
</head>
<body>
    <input type="text" id="userName" value=""><br>
    <input type="password" id="passWord"><br>
    <input type="button" id="btn" value="提交">
</body>
<script type="text/javascript">
    var userName=document.getElementById('userName');
    var passWord=document.getElementById('passWord');
    var btn=document.getElementById('btn');
    
        btn.onclick=function() {
            //检测用户名是否是3-8位
            if (userName.value.length<3 || userName.value.length>8) {
             userName.className='pink';
            }else {
             userName.className='';
            }
            // 密码是否是6-12位
            if (passWord.value.length<6 || passWord.value.length>12) {
                passWord.className='pink';
             return;
            }else {
              passWord.className='';
            }
            console.log('执行登录');
        }
    
</script>
</html>

设置下拉框中的选中项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" id="btn" value="设置">
    <select id="selectt">
        <option value="">上海</option>
        <option value="">北京</option>
        <option value="">武汉</option>
        <option value="">杭州</option>
        <option value="">南京</option>
        <option value="">浙江</option>
    </select>
</body>
<script type="text/javascript">
    var btn=document.getElementById('btn');
    btn.onclick=function() {
        var selectt=document.getElementById('selectt');
        var options=selectt.getElementsByTagName('option');
        for(var i=0;i<options.length;i++) {
            var option=options[i];
            var randomI=parseInt(Math.random()*options.length);
            option=options[randomI];
            option.selected=true;
        }
    }
</script>
</html>

搜索文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <input type="button" id="btn" value="搜索">
</body>
<script type="text/javascript">
    
</script>
</html>

全选反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>
<body>
    <div class="wrap">
      <table>
          <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll" />
                </th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
          </thead>
          <tbody id="j_tb">
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPhone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPad Pro</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPad Air</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>Apple Watch</td>
                <td>2000</td>
            </tr>

          </tbody>
      </table>
      <input type="button" value="反 选" id="btn">
  </div>
</body>
<script type="text/javascript">
    var j_cbAll=document.getElementById('j_cbAll');
    var j_tb=document.getElementById('j_tb');
    var inputs=j_tb.getElementsByTagName('input');
    j_cbAll.onclick=function() {
        
        for(var i=0;i<inputs.length;i++) {
            var input=inputs[i];
            if (input.type!='checkbox') {
                continue;
            }
                 input.checked=this.checked;
        }
    }


    for(var i=0;i<inputs.length;i++) {
            var input=inputs[i];
            if (input.type!='checkbox') {
                continue;
            }
            
            input.onclick=function() {
                var isAllChecked=true;
                for(var i=0;i<inputs.length;i++) {
                        var input=inputs[i];
                        if (input.type!='checkbox') {
                              continue;
                        }
                        if (!input.checked) {
                            isAllChecked=false;
                        } 
                        // j_cbAll.checked=isAllChecked;  
                }
                j_cbAll.checked=isAllChecked;
            }
        
    }

    

    var btn=document.getElementById('btn');
        
    btn.onclick=function() {
      for(var i=0;i<inputs.length;i++) {
            var input=inputs[i];
            if (input.type!='checkbox') {
                  continue;
            }
            input.checked=!input.checked;

                allCheckbox();  
             
            }
       }  
    
        function allCheckbox() {
            var isAllChecked=true;
                for(var i=0;i<inputs.length;i++) {
                        var input=inputs[i];
                        if (input.type!='checkbox') {
                              continue;
                        }
                        if (!input.checked) {
                            isAllChecked=false;
                        } 
                        // j_cbAll.checked=isAllChecked;  
                }
                j_cbAll.checked=isAllChecked; 
        }

</script>
</html>

自定义属性操作

getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
removeAttribute() 移除标签行内属性
与element.属性的区别: 上述三个方法用于获取任意的行内属性。

样式操作

使用style方式设置的样式显示在标签行内

var box = document.getElementById('box');
    box.style.width = '100px';
    box.style.height = '100px';
    box.style.backgroundColor = 'red';

注意
通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

类名操作

修改标签的className属性相当于直接修改标签的类名

var box = document.getElementById('box');
    box.className = 'show';

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" id="btn" value="关灯">
</body>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript">
    var isOpen=true;
    my$('btn').onclick=function() {
        
        if (isOpen) {
            document.body.style.backgroundColor='black';
            this.value='开灯';
            isOpen=false;
        } else{
            document.body.style.backgroundColor='white';
            this.value='关灯';
            isOpen=true;
        }
    }
</script>
</html>

点击按钮改变div的背景颜色并要求改变位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    </style>
</head>
<body>
    <input type="button" id="btn" value="点我">
    <div id="box"></div>
</body>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript">
    var btn=document.getElementById('btn');
    
    btn.onclick=function() {
            box.style.width='200px';
            box.style.height='200px';//在js中宽高度属性值要加px
            box.style.backgroundColor='pink';
            box.style.position='absolute';
            box.style.left='200px';
            box.style.top='200px';
      
    }
</script>
</html>

图片切换二维码案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
        .nodeSmall {
            width: 50px;
            height: 50px;
            background: url(images/bgs.png) no-repeat -159px -51px;
            position: fixed;
            right: 10px;
            top: 40%;
        }
        .erweima {
            position: absolute;
            top: 0;
            left: -150px;
        }
        .nodeSmall a {
            display: block;
            width: 50px;
            height: 50px;
        }
        .hide {
            display: none;
        }
        .show {
            display: block;
            position: absolute;
            right: 50px;
            top:0px; 
        }
    </style>
</head>
<body>
    <div class="nodeSmall" id="node_small">
        <div class="erweima hide" id="er">
            <img src="images/456.png" alt=""/>
        </div>
    </div>
</body>
<script type="text/javascript">
    var node_small=document.getElementById('node_small');
    var er=document.getElementById('er');
    node_small.onmouseover=function() {
        er.className='show';
    }
    node_small.onmouseout=function() {
        er.className='hide';
    }
</script>
</html>

当前输入的文本框高亮显示

点击按钮改变div的大小和位置

列表隔行变色、高亮显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    ul li {
        list-style: none;
    }
    </style>
</head>
<body>
    <ul id="more">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
<script type="text/javascript">
    var more=document.getElementById('more');
    var lists=more.getElementsByTagName('li');
        for(var i=0;i<lists.length;i++) {
            li=lists[i];
            if (i%2==0) {  //因为索引是从0开始的  所以原来的奇数成偶数  背景颜色变了
                li.style.backgroundColor='pink';
            }else {
                li.style.backgroundColor='skyblue';
            }
             
            var bg;
            li.onmouseover=function() {
             bg=this.style.backgroundColor;
             this.style.backgroundColor='yellow';

            }

            li.onmouseout=function() {
             this.style.backgroundColor=bg;
            }
        }


</script>
</html>

tab选项卡切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 <style>
        * {margin:0; padding: 0;}
        ul {
            list-style-type: none;
        }
        .box {
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }
        .hd {
            height: 45px;
        }
        .hd span {
            display:inline-block;
            width: 90px;
            background-color: pink;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
        }
        .hd span.current {
            background-color: purple;
        }
        .bd div {
            height: 255px;
            background-color: purple;
            display: none;
        }
        .bd div.current {
            display: block;
        }
    </style>

</head>
<body>
    <div class="box">
        <div class="hd" id="hd">
            <span class="current">体育</span>
            <span>娱乐</span>
            <span>新闻</span>
            <span>综合</span>
        </div>
        <div class="bd" id="bd">
            <div class="current">我是体育模块</div>
            <div>我是娱乐模块</div>
            <div>我是新闻模块</div>
            <div>我是综合模块</div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var hd=document.getElementById('hd');
    var spans=hd.getElementsByTagName('span');
    var bd=document.getElementById('bd');
    var divs=bd.getElementsByTagName('div');

    for(var i=0;i<spans.length;i++) {
        // var spans[i].setAttribute('index',i);
        // spans[i].index = i;
        var span=spans[i];
        //通过自定义属性  记录当前span的索引
        span.setAttribute('index',i);
        span.onmouseover=function() {
            for(var j=0;j<spans.length;j++) {
                var span=spans[j];
                span.className='';
            }
            this.className='current';

            for(var k=0;k<divs.length;k++) {
                var div=divs[k];
                div.className='';
            }
            //当前span对应的div显示
            //获取自定义属性的值  因为自定义属性是字符串类型 而他要替代i 所以要转换成数值类型
             var index=parseInt(this.getAttribute('index'));
            // divs[i].className='current'; 中的i为数值型
              divs[index].className='current';
        }
    }
</script>
</html>

总结学过的知识

DOM 文档对象模拟

常见的DOM操作：
获取元素： getElementById()  getElementsByTagName()
给元素注册事件：onclick onmouseover onmouseout  onfocus(获取焦点)   
操作元素的属性： 
   非表单元素：href title src alt
   表单元素：type value checked disabled selected 后三个属性只有一个值 是布尔类型的 true or  false
样式操作：className style
自定义属性：setAttribute() 设置  getAttribute()获取  removeAttribute() 移除

创建元素的三种方式

==document.write()==

document.write('新设置的内容<p>标签也可以生成</p>');

==innerHTML==

var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';

==document.createElement()==

var div = document.createElement('div');
document.body.appendChild(div);

性能问题

innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。
可以借助字符串或数组的方式进行替换，再设置给innerHTML
优化后与document.createElement性能相近

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,335评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,895评论 3赞 387
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,766评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,918评论 1赞 285
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,042评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,169评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,219评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,976评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,393评论 1赞 304
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,711评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,876评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,562评论 4赞 336
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,193评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,903评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,142评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,699评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,764评论 2赞 351

JS-API、DOM-day07-5.6

Web API

Web API介绍

DOM

#事件

总结学过的知识

推荐阅读更多精彩内容