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

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. 程序中的@Override是什么意思？

    @Override是Java5的元数据,自动加上去的一个标志,告诉你说下面这个方法是从父类/接口 继承过来的,需要你重写一次,这样就可以方便你阅读,也不怕会忘记 @Override是伪代码,表示重写( ...

  2. CF 977E Cyclic Components

    E. Cyclic Components time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  3. vue中key的作用 v-for里警告 v-if的复用

    vue总是会复用页面上已经存在的dom,区别的方法是加上key就可以,还设有v-for时候的警告也是如此key的作用是区别这条跟那条的.<body> <div id="ap ...

  4. An overview of gradient descent optimization algorithms

    原文地址:An overview of gradient descent optimization algorithms An overview of gradient descent optimiz ...

  5. vue2.0 vs vue

    vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> < ...

  6. 数据库查询的数据导出到xls表，集合数据导出到xls表

    //实体类package com.outxls; public class Student { private Integer studentId; private String studentNam ...

  7. [No0000C6]Visual Studio 2017 函数头显示引用个数

    Visual Studio 2017  函数头显示引用个数

  8. Weex小笔记（自己理解，有错请指正）

    在Eros中,做的内容是封装了一些常用的框架,并且优化开发流程为将前端Vue文件打包出资源文件导入项目工程中(本地加载模式,需要注册文件.验证文件),然后原生移动端通过OC写module(功能模块类) ...

  9. [Day10]继承、抽象类

    1.继承:在一个现有类的基础上去构建一个新的类,构建出来的新类被称为子类,现有类被称作父类,子类会自动拥有父类所有可继承的属性和方法. 2.继承的格式 : class 子类 extends 父类{} ...

  10. WordCount扩展与优化

    合作者:201631062327,201631062128码云地址:https://gitee.com/LIUJIA6/WordCount3 一:项目说明 本次项目是在上次作业WorldCount的基 ...