JS-API、DOM-day07-5.6

作者: xcx时光你好 | 来源:发表于2018-05-10 22:03 被阅读0次

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性能相近

JS-API、DOM-day07-5.6

Web API

Web API介绍

DOM

#事件

总结学过的知识

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读