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

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. Ubuntu下开启Mysql远程访问的方法

    首先想说,JetProfiler对分析项目中MySQL问题以及优化,是个非常好的工具.但是看网上文章,中文介绍真的不多.是因为国内现在都不用MySQL了吗? 因为公司JetProfiler是共用的,安 ...

  2. STL之template类模板

    #include <iostream> using namespace std; template<class T>//类模板 class Person{ public://构 ...

  3. 布局fixed和sticky

    sticky非常非常非常好用怎么用看代码: 这里为什么没有设置高度呢,因为这个高度应该是浏览器高度,浏览器高度在时刻变化怎么办? js处理: 此JS里面会有执行方法一步一步看 这个里面有JS方法 这个 ...

  4. php 判断手机号 和 手机号中间四位以**** 代替

    代码: //自定义函数手机号隐藏中间四位 function get_phone($str){ $str=$str; $resstr=substr_replace($str,'****',3,4); r ...

  5. nginx基本用法和HTTPS配置

    nginx作用讲解:1.反向代理:需要多个程序共享80端口的时候就需要用到反向代理,nginx是反向代理的一种实现方式.2.静态资源管理:一般使用nginx做反向代理的同时,应该把静态资源交由ngin ...

  6. IDEA为了使用方便，需要改的几条配置

    自动编译开关 在Eclipse中自动编译开关是开着的,如下所示那么,在IDEA中,务必要手动将其打开,非常重要! 忽略大小写开关 IDEA默认是匹配大小写,此开关如果未关.你输入字符一定要符合大小写. ...

  7. 解决端口耗尽问题: tcp_tw_reuse、tcp_timestamps

    一.本地端口有哪些可用 首先,需要了解到TCP协议中确定一条TCP连接有4要素:local IP, local PORT, remote IP, remote PORT.这个四元组应该是唯一的. 在我 ...

  8. Failed to load driver class com.mysql.jdbc.Driver from HikariConfig class classloader sun.misc.Launcher$AppClassLoader@18b4aac2

    1.错误日志 Failed to load driver class com.mysql.jdbc.Driver from HikariConfig class classloader sun.mis ...

  9. 利用python脚本（xpath）抓取数据

    有人会问re和xpath是什么关系?如果你了解js与jquery,那么这个就很好理解了. 上一篇:利用python脚本(re)抓取美空mm图片 # -*- coding:utf-8 -*- from ...

  10. Angela启动步骤

    1.在web目录下执行 grunt watch (如果不在目录下执行不能识别,当然首先安装node.js) 2.随便改一个文件,会自动重新生成代码(在dest目录下会生成可执行的代码) 3.如果有de ...