首页 > 编程语言 > 详细

JavaScript Dom0 Dom1

时间:2019-02-22 14:38:06      阅读:207      评论:0      收藏:0      [点我收藏+]

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

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对象,然后一次绑定。

JavaScript Dom0 Dom1

原文:https://www.cnblogs.com/xiangsikai/p/10418007.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!