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

JS　       CSS       HTML

DOM 0写法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <table border="1" width="300px">
  9.         <tr onmousemove="t1(0);" onmouseout="t2(0)"><td>1</td><td>2</td><td>3</td></tr>
  10.         <tr onmousemove="t1(1);" onmouseout="t2(1)"><td>1</td><td>2</td><td>3</td></tr>
  11.         <tr onmousemove="t1(2);" onmouseout="t2(2)"><td>1</td><td>2</td><td>3</td></tr>
  12.     </table>
  13.  
  14.     <script>
  15.         //DOM 0实现的效果
  16.         function t1(n){
  17.             var mytrs = document.getElementsByTagName('tr')[n];
  18.             console.log(mytrs);
  19.             mytrs.style.backgroundColor = "red";
  20.         }
  21.  
  22.         function t2(n){
  23.             var mytrs = document.getElementsByTagName('tr')[n];
  24.             console.log(mytrs);
  25.             mytrs.style.backgroundColor = "";
  26.         }
  27.     </script>
  28. </body>
  29. </html>
  30.  
  31. Demo

Demo

DOM 1写法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <style>
  8.     .c1{
  9.         background-color: cadetblue;
  10.         width: 300px;
  11.     }
  12. </style>
  13. <body>
  14.     <div class="c1">
  15.         <table border="1" width="300px">
  16.         <tr><td>1</td><td>2</td><td>3</td></tr>
  17.         <tr><td>1</td><td>2</td><td>3</td></tr>
  18.         <tr><td>1</td><td>2</td><td>3</td></tr>
  19.     </table>
  20.     </div>
  21.  
  22.     <script>
  23.         //DOM 1实现的效果
  24.         var myTrs = document.getElementsByTagName("tr");
  25.         var len = myTrs.length;
  26.         for(var i=0;i<len;i++){
  27.             myTrs[i].onmouseover = function(){  //绑定事件
  28.                this.style.backgroundColor = "red"; //谁调用这个函数,这个this就指向谁
  29.             }
  30.             myTrs[i].onmouseout = function(){
  31.                 this.style.backgroundColor = "";
  32.             }
  33.  
  34.         }
  35.  
  36.     </script>
  37. </body>
  38. </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. 解决 nginx 出现 413 Request Entity Too Large 的问题

    1.若nginx用所用的 php 请求解析服务是 fpm, 则检查 /etc/php5/fpm/php.ini 文件中的参数 upload_max_filesize = 20M post_max_si ...

  2. 10.30 rest_framework总结

    2018-10-30 20:25:23 终于学完了rest_framework  这个框架! 这个框架有一些基本组件!最重要的就是看源码!要一个类一个类的去找!按顺序! 并且要自己配置类的时候要先看源 ...

  3. p1010幂次方---（分治）

    题目描述 任何一个正整数都可以用222的幂次方表示.例如 137=27+23+20137=2^7+2^3+2^0 137=27+23+20 同时约定方次用括号来表示,即aba^bab 可表示为a(b) ...

  4. 静态方法（staticmethod）和类方法（classmethod）

    类方法:有个默认参数cls,并且可以直接用类名去调用,可以与类属性交互(也就是可以使用类属性) 静态方法:让类里的方法直接被类调用,就像正常调用函数一样 类方法和静态方法的相同点:都可以直接被类调用, ...

  5. 布局fixed和sticky

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

  6. node.js+ react + redux 环境搭建

    1.安装node.js 2. yarn init: 初始化,主要包含以下条目 name: 项目名 version: 版本号 description: 项目简要描述 entry point: 文件入口, ...

  7. python全栈开发 * 36知识点汇总 * 180721

    36 操作系统的发展史 进程一.手工操作--穿孔卡片 1.内容: 程序员将对应于程序和数据的已穿孔的纸带(或卡片)装入输入机,然后启动输入机把程序和数据输入计算机内存,接着通过控制 台开关启动程序针对 ...

  8. ASP.NET Core ResponseCaching：基于 VaryByHeader 定制缓存 Key

    ASP.NET Core ResponseCaching 提供了缓存http响应内容的能力,通过它可以在本地内存中直接缓存http响应内容,这是速度最快的服务端缓存,省却了网络传输与生成响应内容的开销 ...

  9. SetupFactory 制作安装包

    SetupFactory9.0.3.0Trial汉化破解版+使用教程 https://download.csdn.net/download/u010188178/10652645

  10. poi导入excel表格数据到数据库的时候，对出生日期的校验

    出生日期格式为8位数字的字符串 如:yyyyMMdd 规则:yyyy大于1900并小于当前时间,月.日 按日期规则校验 //解决读过来的字符串显示为科学计数法问题 BigDecimal bd = ne ...