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

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. macOS 10.13 High Sierra odoo11 开发配置--完整版

    1.抹盘安装macOS Sierra 10.13: 制作macOS安装启动盘参见:http://www.iplaysoft.com/macos-usb-install-drive.html 2.安装g ...

  2. 工具 - 怎么看微信h5的源码？

    这个问题在我看网易的h5案例的时候萌生的.因为想看他的源码,但是手机微信打开肯定看不了. 以下几种看代码的方法:(页面案例用网易大大刷屏的h5<二零一六娱乐圈画卷>,真的是一个值得我等众生 ...

  3. [Ubuntu] Git可视化比较工具 P4Merge 的安装/配置及使用

    1 下载 下载地址. 链接到上面的下载页后,先找到左边导航的 Clients ,如下图 1 所示. 接着找到 P4Merge: Visual Merge Tool , 如下图 2 所示. 最后,选择好 ...

  4. Sublime Text 3 3143 注册码和遇到的PyV8无法下载问题

    packagecontrol官网:https://packagecontrol.io/installation sublime安装之后,安装Package Control管理插件. sublime3 ...

  5. [Golang] 编译程序时打上git提交信息标记

    1.加入代码 //version.go package version import ( "flag" "fmt" "os" ) var ( ...

  6. kylin 使用RESTful API 请求

    目前根据Kylin的官方文档介绍,Kylin的认证是basic authentication,加密算法是Base64,在POST的header进行用户认证我使用的用户和密码是(格式:username: ...

  7. Mac上Vim的配置文件及插件

    Vim是公认的终端编辑神器,配置文件设置的好,再加上各种功能的插件,更能使其如虎添翼,下面就分享出博主的配置文件,也是从网上大神那里拷过来的.配置文件在用户目录下~/.vimrc ,如果没有,就自己创 ...

  8. 22.2、react生命周期与react脚手架(二)

    一.类:es6 <script type="text/babel"> class Person{ age = 10; constructor(name){ this.n ...

  9. less的写法 calc以及变量

    less的文档还是很容易读懂的, 一:结构的嵌套:照着html结构写,目前没有出现错误: 二:变量引用:1,单个变量通常用@变量名 2,多个变量写在一起, 三:calc计算: 目前我觉得最具实用性的就 ...

  10. 小程序里let和var以及const区别

    在JavaScript中有三种声明变量的方式:var.let.const. var:声明全局变量,换句话理解就是,声明在for循环中的变量,跳出for循环同样可以使用. [JavaScript] 纯文 ...