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

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. CSS实现自适应九宫格布局 大全

    看到微博和朋友圈都实现了图片九宫格,曾经有次面试也问到了九宫格这个问题,当时想到的是先固定每个单元格的宽高,然后进行浮动.今天想折腾一下,实现自适应父元素宽度的布局.这次我只写了四种方式去实现九宫格, ...

  2. vscode 同步配置

    按照插件完成配置之后,将token保存在本地,编辑配置文件:ctrl+3.sync高级选项.编辑本地扩展设置.将token粘贴进去即可,团队所有vscode均应该按照此配置来保持统一:

  3. JS创建对象的几种方式整理

    javascript是一种“基于prototype的面向对象语言“,与java有非常大的区别,无法通过类来创建对象.那么,既然是面象对象的,如何来创建对象呢? 一:通过“字面量”方式创建对象 方法:将 ...

  4. R 544

    F2: 什么dfs根本不会啊,只会瞎贪心... 我们考虑先连哪些边,对于u,v两个点,如果u,v所在的联通块都与1相连的话,那我们肯定先不连这种边吧. 因为太亏了啊... 总而言之我们要在不影响答案的 ...

  5. poj2251_kuagnbin带你飞专题一

    Dungeon Master Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 32684   Accepted: 12529 ...

  6. 浏览器打开exe文件

    <win-r> regedit 打开注册表,然后自定义协议 自定义协议注册表.reg 打开后导入 Windows Registry Editor Version 5.00 [HKEY_CL ...

  7. 【python】——三级菜单

    作业需求: 打印三级菜单 可返回上一级 可随时退出程序 #!/usr/bin/env python # -*- coding:utf-8 -*- #Author: __Json.Zzgx__ menu ...

  8. Android 函数

    inflate: https://blog.csdn.net/u012702547/article/details/52628453 public View inflate(XmlPullParser ...

  9. gui小计算器的程序写法

    import java.awt.BorderLayout; import java.awt.EventQueue; import javax.swing.JFrame; import javax.sw ...

  10. 我对于B-树索引的内部结构与索引类型所做的笔记

    图 3-1 B-树索引的内部结构 分支块和页块 B-树索引有两种类型的块: 用于查找的分支块和用于存储值的叶块.B-树索引的上层分支块包含指向下层索引块的索引数据.在图 3-1 中,根分支块包含条目 ...