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