JavaScript----DOM和事件的简单学习
##DOM简单学习
* 功能：控制html文档的内容
* 代码：获取页面标签（元素）对象：Element
* document.getElementById("id值"):通过元素id获取元素对象
* 操作Elements对象：
1、修改属性值：
1、明确获取的对象是哪一个？
2、查看API文档，找其中有哪些属性可以设置。
2、修改标签内容：
* 属性：innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素对象</title>
<script>
//通过id获取元素对象
window.onload = function() {
/*let light = document.getElementById("light");
alert("我要换图片了...");
light.src = "imgs/open.gif";*/
let title = document.getElementById("title");
alert("我要换内容了...")
title.innerHTML = "世界第一中国队";
}
</script>
</head>
<body>
<h1 id="title">悔创阿里杰克马</h1>
<img id="light" src="imgs/close.gif">
</body>
</html>
##事件简单学习
* 功能：某些组件被执行了某些操作后，出发某些代码的执行。
* 造句：xxx被xxx，我就xxx
* 我方水晶被摧毁后，我就责备队友。
* 敌方水晶被摧毁后，我就夸奖自己。
* 如何绑定事件
1、直接在html标签上，指定事件的属性（操作），属性值就是js代码。
1、事件：onclick：单击事件
2、通过JS获取元素对象，指定时间属性，设置一个函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script>
//1
function clickMe() {
alert("我被点了")
}
//2
var light2 = document.getElementById("light2");
light2.onclick = clickMe();
</script>
</head>
<body>
<img id="light" src="imgs/close.gif" onclick="clickMe();">
<img id="light2" src="imgs/close.gif">
</body>
</html>
* 案例：模拟电灯开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关</title>
<script>
window.onload = function () {
var light = document.getElementById("light");
var flag = false;//代表灯是灭的
light.onclick = function () {
if (flag) {
light.src = "imgs/close.gif";
flag = false;
} else {
light.src = "imgs/open.gif";
flag = true;
}
}
}
</script>
</head>
<body>
<img id="light" src="imgs/close.gif">
</body>
</html>
JavaScript----DOM和事件的简单学习的更多相关文章
- JavaScript Dom 绑定事件
JavaScript Dom 绑定事件 // 先获取Dom对象,然后进行绑定 document.getElementById('xx').onclick document.getElementByI ...
- Javascript中DOM技术的的简单学习
第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...
- JavaScript DOM编程艺术第二版学习（1/4）
接下来项目需要网页相关知识,故在大牛的指引下前来阅读本书. 记录方式:本书分四部分阅读,完成阅读之后会多写一篇包括思维导图的算是阅读指南的东西,浏览的童鞋看着指南可以跳过一些不必要的坑~ 当前水平:H ...
- JavaScript DOM 注册事件
一个HTML是一个DOM树,每一个节点都是DOM对象,整个HTML其实也是一个DOM对象,根节点是<html>; 在HTML页面初始化的时候,JavaScript会自动帮DOM对象注册消息 ...
- JavaScript使用自定义事件实现简单的模块化开发
WEB前端最常见驱动方式就是事件了, 所有交互等等都是通过事件,前端的常见事件有: UI事件: 焦点事件: 鼠标事件: 滚轮事件: 文本事件: 键盘事件: 变动事件: 现在网页上有一个输入框, 如果我 ...
- 浏览器环境下的javascript DOM对象继承模型
这张图是我直接在现代浏览器中通过prototype原型溯源绘制的一张浏览器宿主环境下的javascript DOM对象模型,对于有效学习和使用javascript DOM编程起到高屋建瓴的指导作用, ...
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
- JavaScript学习 - 基础(七) - DOM event(事件)
DOM event(事件) 定义事件: // 定义事件: //方式一,直接在标签上定义事件 // 方式二: var a11 = document.getElementsByName('a11')[0] ...
- 前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍
昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...
随机推荐
- 测试工程师不懂AI，还有未来吗？
阿里妹导读:近几年人工智能.机器学习等词漫天遍地,似乎有一种无AI,无研发,无AI,无测试的感觉.有人说:不带上"智能"二字,都不好意思说自己是创新.我们先暂且不评论对错,只探讨这 ...
- sql问题处理
批量杀死MySQL连接 select concat('KILL ',id,';') from information_schema.processlist where Info like 'selec ...
- ndk-stack使用方法（转）
最近在mac上编译android 版本,各种崩溃让人蛋疼,网上学习了下ndk-stack使用方法. 自己备忘下: 1.运行终端. 跳转到你android sdk 目录 因为你的adb 在里面. 如 c ...
- LeetCode 题解 | 1. 两数之和
题目描述: 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [2, 7, 11, 15], t ...
- SpringBoot入门系列（三）资源文件属性配置
前面介绍了Spring的@Controller和@RestController控制器, 他们是如何响应客户端请求,如何返回json数据.不清楚的朋友可以看看之前的文章:https://www.cnbl ...
- Slog64_项目上线之ArthurSlog个人网站上线3
ArthurSlog SLog-64 Year·1 Guangzhou·China September 9th 2018 ArthurSlog Page GitHub NPM Package Page ...
- 【django】 接收所有文件，前端展示文件（包括视频，文件，图片）ajax请求
如果是后台上传文件: setting配置: STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ...
- 【MySQL 原理分析】之 Explain & Trace 深入分析全模糊查询走索引的原理
一.背景 今天,交流群有一位同学提出了一个问题.看下图: 之后,这位同学确实也发了一个全模糊查询走索引的例子: 到这我们可以发现,这两个sql最大的区别是:一个是查询全字段(select *),而一个 ...
- 一起了解 .Net Foundation 项目 No.16
.Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Orchard CMS O ...
- 盘点Mac上搭建本地WebServer的几种方式
第一种: 通过Nginx搭建本地WebServer 安装nginx brew install nginx 安装完后在终端输入nginx指令,启动nginx查看效果 确定安装好之后,在根目录创建一个文件 ...