JavaScript Dom0 Dom1
行为 样式 结构相分离的页面
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的更多相关文章
- DOM的发展，DOM0,DOM1,DOM2,DOM3
Documentc Object Model文档对象模型是针对XML但经过扩展用于HTML的应用程序接口(API Application programming Interface).DOM把整个界面 ...
- JavaScript之Dom1|DOM2|DOM3之DOM1【节点层次】
长文慎读. 导航: 1.节点层次 2.Node类型 3.Document类型 4.Element类型 5.Text类型 6.Comment类型 7.CDATASection类型 8.DocumentT ...
- javascript and dom1
<script type="text/javascript"> //数组 var beatles=Array(4); var beatles=Array(); cons ...
- Web 前端编程运维必备
Html 1.Html 标签初知 2.Html 标签种类 3.Html 符号 4.Html Title 标签 5.Html meta 标签 6.Html Link 标签 7.Html p 标签 8.H ...
- JavaScript大杂烩10 - 理解DOM
操作DOM 终于到了JavaScript最为核心的部分了,通常来说,操作DOM,为页面提供更为友好的行为是JavaScript根本目标. DOM树 - HTML结构的抽象 既然DOM是操纵HTML ...
- JavaScript之DOM概念
一.DOM概念 1.DOM是什么? 1.1 起源.DOM起源于Netscape与Microsoft 公司的DHTML(动态HTML). 1.2 名词解释.Document Object Model,文 ...
- 说说JavaScript中的事件模型
1.javascript中为元素添加事件处理程序的方法有以下几种方式,可以为javascript元素添加事件处理程序 (1) 直接将事件处理代码写在html中(2) 定义一个函数,赋值给html元素的 ...
- DOM0、DOM2级事件
JavaScript DOM0.DOM2级事件 1.DOM0级事件:on+事件类型 在html行内直接绑定,也就是通过行内js绑定的例如<span onclick="alert('1' ...
- web开发资源导航
实用工具 前端在线工具 兼容性速查 html5兼容性查询 node-es6支持度 es6兼容性表查询 设备es6支持度 游览器H5支持度 浏览器内核检测工具 手机设备信息检测 浏览器市场份额 文档手册 ...
随机推荐
- IDEA破解教程
IDEA目前堪称最完美的java开发工具,相信用惯了eclipse的朋友一定不这么认为,但是这并不是终点,终点是如何安装破解版的IDEA,官网给我们的两个下载:1.免费试用:2.免费.开源.作为一名程 ...
- hibernate配置二级缓存
ehcache.xml: < ?xml version=”1.0″ encoding=”UTF-8″?>< !– defaultCache节点为缺省的缓存策略 maxElements ...
- hive reduce 阶段GC Exception
某个reduce中的value堆积的对象过多,导致jvm频繁GC. 解决办法: 1. 增加reduce个数,set mapred.reduce.tasks=300,. 2. 在hive-site.xm ...
- Hadoop 跨集群访问
[原文地址] 跨集群访问 发表于 2015-06-01 | 简单总结下跨集群访问的多种方式. 跨集群访问HDFS 直接给出HDFS URI 我们平常执行hadoop fs -ls /之类的操作 ...
- html table 固定表头和列
/**************************************************************** jQuery 插件. 功能: 固定表格标题行或列头 Version: ...
- Android无法删除项目+导入项目报错
Android无法删除项目+导入项目报错 Android无法删除项目:关闭eclipse或关闭电脑,然后重启,继续删除就可以了 导入项目报错:右键–>配置–>中就可以看到了,更改一下就可以 ...
- DataGrid表格某单元格数据填入是否正确的验证---MiniUI使用
示例: <div id="datagrid1" class="mini-datagrid" oncellvalidation="onCellVa ...
- 把vim改装为source sight
本文在ubuntu18.04上实践. 主要为VIM 安装4个插件: taglist,srcexpl,NERD_tree,ctrlp 1,taglist.vim :https://www.vim.org ...
- 转：ArcGIS API For JavaScript官方文档（二十）之图形和要素图层——①Graphics概述
原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...
- Xmodem协议简介
1. Xmodem协议 1.1. 简介 在上一章中,BootLoader和APP在串口下的升级其实都用到了一种文件传输协议,即Xmodem协议,该协议因其简单,易实现和使用的特点在很多 ...