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

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的更多相关文章

  1. DOM的发展，DOM0,DOM1,DOM2,DOM3

    Documentc Object Model文档对象模型是针对XML但经过扩展用于HTML的应用程序接口(API Application programming Interface).DOM把整个界面 ...

  2. JavaScript之Dom1|DOM2|DOM3之DOM1【节点层次】

    长文慎读. 导航: 1.节点层次 2.Node类型 3.Document类型 4.Element类型 5.Text类型 6.Comment类型 7.CDATASection类型 8.DocumentT ...

  3. javascript and dom1

    <script type="text/javascript"> //数组 var beatles=Array(4); var beatles=Array(); cons ...

  4. Web 前端编程运维必备

    Html 1.Html 标签初知 2.Html 标签种类 3.Html 符号 4.Html Title 标签 5.Html meta 标签 6.Html Link 标签 7.Html p 标签 8.H ...

  5. JavaScript大杂烩10 - 理解DOM

    操作DOM 终于到了JavaScript最为核心的部分了,通常来说,操作DOM,为页面提供更为友好的行为是JavaScript根本目标.   DOM树 - HTML结构的抽象 既然DOM是操纵HTML ...

  6. JavaScript之DOM概念

    一.DOM概念 1.DOM是什么? 1.1 起源.DOM起源于Netscape与Microsoft 公司的DHTML(动态HTML). 1.2 名词解释.Document Object Model,文 ...

  7. 说说JavaScript中的事件模型

    1.javascript中为元素添加事件处理程序的方法有以下几种方式,可以为javascript元素添加事件处理程序 (1) 直接将事件处理代码写在html中(2) 定义一个函数,赋值给html元素的 ...

  8. DOM0、DOM2级事件

    JavaScript DOM0.DOM2级事件 1.DOM0级事件:on+事件类型 在html行内直接绑定,也就是通过行内js绑定的例如<span onclick="alert('1' ...

  9. web开发资源导航

    实用工具 前端在线工具 兼容性速查 html5兼容性查询 node-es6支持度 es6兼容性表查询 设备es6支持度 游览器H5支持度 浏览器内核检测工具 手机设备信息检测 浏览器市场份额 文档手册 ...

随机推荐

  1. 【Static Program Analysis - Chapter 4】格理论(Lattice Theory)与程序分析

    # 从一个例子说起, **任务:给定这样一段代码,假设我们想分析出这段代码中,每个数值型变量和表达式的符号,即正数,负数或0.** 此外,还有可能出现两种情况就是: 1.我们无法分析出结果,即我们无法 ...

  2. C# WinForm窗体隐藏右上角最小化、最大化、关闭按钮

    C# WinForm窗体隐藏右上角最小化.最大化.关闭按钮 如何赢藏WinForm窗体的右上角按钮  设置设置ControlBox = false: 设置ControlBox = false:

  3. 怎么用js编写1——100的质数？

    这里来自csdn问答的一个问题,怎么用js编写1——100的质数? http://ask.csdn.net/questions/214429 质数也就是素数,即只能被1和自身整除的数,因此可以构造循环 ...

  4. STM32进入HardFault_Handler处理办法

    STM32进入HardFault_Handler处理办法 HardFault_Handler出现的情况一般有两种: 一种是:数组越界 一种是:堆栈溢出,程序指针指飞 方法一 在中断HardFault_ ...

  5. js 判断当前操作系统是ios还是android还是电脑端

    js判断客户端是否是IOS或者是Android //如果返回true 则说明是Android function is_weixin() { var ua = window.navigator.user ...

  6. openshift 配置 bitbucket 的webhook

    参考 https://docs.openshift.org/latest/dev_guide/builds/triggering_builds.html oc set triggers bc < ...

  7. Javascript htmldecode

    // HtmlDecode http://lab.msdn.microsoft.com/annotations/htmldecode.js // client side version of the ...

  8. tomcat8.5.11安装教程

    备份,省得以后自己又忘了. 1.下载tomcat 2.环境变量设置 打开环境变量设置 注意,要点击下面红框处的新建按钮,而不要点击上面的.新建系统变量: 注意,变量名一定得设置为CATALINA_HO ...

  9. day14 十四、三元运算符，推导式，匿名内置函数

    一.三元(目)运算符 1.就是if...else...语法糖 前提:if和else只有一条语句 # 原来的做法 cmd = input('cmd:>>>') if cmd.isdig ...

  10. 视频转GIF动态图怎样实现

    怎样将视频转GIF动态图呢?随着现在社交方式的不断发展,GIF动态图也成了现在聊天中必不可少的,一种娱乐形式.那么当我们在看视频时,看到了精彩的片段,我们应该怎样将这些精彩的视频片段制作成GIF动态图 ...