zoukankan      html  css  js  c++  java
  • JavaScript Dom0 Dom1

    行为  样式  结构相分离的页面

    JS        CSS       HTML

    DOM 0写法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <table border="1" width="300px">
            <tr onmousemove="t1(0);" onmouseout="t2(0)"><td>1</td><td>2</td><td>3</td></tr>
            <tr onmousemove="t1(1);" onmouseout="t2(1)"><td>1</td><td>2</td><td>3</td></tr>
            <tr onmousemove="t1(2);" onmouseout="t2(2)"><td>1</td><td>2</td><td>3</td></tr>
        </table>
    
        <script>
            //DOM 0实现的效果
            function t1(n){
                var mytrs = document.getElementsByTagName('tr')[n];
                console.log(mytrs);
                mytrs.style.backgroundColor = "red";
            }
    
            function t2(n){
                var mytrs = document.getElementsByTagName('tr')[n];
                console.log(mytrs);
                mytrs.style.backgroundColor = "";
            }
        </script>
    </body>
    </html>
    
    Demo
    Demo

    DOM 1写法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        .c1{
            background-color: cadetblue;
            width: 300px;
        }
    </style>
    <body>
        <div class="c1">
            <table border="1" width="300px">
            <tr><td>1</td><td>2</td><td>3</td></tr>
            <tr><td>1</td><td>2</td><td>3</td></tr>
            <tr><td>1</td><td>2</td><td>3</td></tr>
        </table>
        </div>
    
    
    
        <script>
            //DOM 1实现的效果
            var myTrs = document.getElementsByTagName("tr");
            var len = myTrs.length;
            for(var i=0;i<len;i++){
                myTrs[i].onmouseover = function(){  //绑定事件
                   this.style.backgroundColor = "red"; //谁调用这个函数,这个this就指向谁
                }
                myTrs[i].onmouseout = function(){
                    this.style.backgroundColor = "";
                }
    
            }
    
        </script>
    </body>
    </html>
    Demo

    第一种非常低效,每次都要在标签上绑定。

    第二种相对高效一点,首先获取DOM对象,然后一次绑定。

  • 相关阅读:
    nginx和phpfpm保持长连接
    单件模式+打开窗体+窗体构造函数参数
    Java REST框架一览(转)
    什么原因成就了一位优秀的程序员?(转)
    使用 sqlRest 将数据库转换为 REST 风格的 Web 服务(转)
    浏览器插件之ActiveX开发系列(转载)
    Java JSON技术框架选型与实例(转)
    SQL参数绑定
    ab压力测试工具使用
    Jintegra使用注意事项
  • 原文地址:https://www.cnblogs.com/xiangsikai/p/10418007.html
Copyright © 2011-2022 走看看