##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和事件的简单学习的更多相关文章

  1. JavaScript Dom 绑定事件

    JavaScript  Dom 绑定事件 // 先获取Dom对象,然后进行绑定 document.getElementById('xx').onclick document.getElementByI ...

  2. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  3. JavaScript DOM编程艺术第二版学习(1/4)

    接下来项目需要网页相关知识,故在大牛的指引下前来阅读本书. 记录方式:本书分四部分阅读,完成阅读之后会多写一篇包括思维导图的算是阅读指南的东西,浏览的童鞋看着指南可以跳过一些不必要的坑~ 当前水平:H ...

  4. JavaScript DOM 注册事件

    一个HTML是一个DOM树,每一个节点都是DOM对象,整个HTML其实也是一个DOM对象,根节点是<html>; 在HTML页面初始化的时候,JavaScript会自动帮DOM对象注册消息 ...

  5. JavaScript使用自定义事件实现简单的模块化开发

    WEB前端最常见驱动方式就是事件了, 所有交互等等都是通过事件,前端的常见事件有: UI事件: 焦点事件: 鼠标事件: 滚轮事件: 文本事件: 键盘事件: 变动事件: 现在网页上有一个输入框, 如果我 ...

  6. 浏览器环境下的javascript DOM对象继承模型

    这张图是我直接在现代浏览器中通过prototype原型溯源绘制的一张浏览器宿主环境下的javascript DOM对象模型,对于有效学习和使用javascript DOM编程起到高屋建瓴的指导作用, ...

  7. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  8. JavaScript学习 - 基础(七) - DOM event(事件)

    DOM event(事件) 定义事件: // 定义事件: //方式一,直接在标签上定义事件 // 方式二: var a11 = document.getElementsByName('a11')[0] ...

  9. 前端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 ...

随机推荐

  1. iOS多线程开发之GCD(基础篇)

    总纲: GCD基本概念 GCD如何实现 GCD如何使用 队列和任务组合 一.GCD基本概念 GCD 全称Grand Central Dispatch(大中枢队列调度),是一套低层API,提供了⼀种新的 ...

  2. CSS 双飞翼布局

    10 Jul 2016 » CSS 双飞翼布局:总共分三栏,左侧栏Left,中间主栏Main,右侧栏Right 第一步,建立三个div,不过注意,中间Main需要加一个wrap div. 整个结构看起 ...

  3. WordPress 安装主题、插件时问题解决办法

    --当能够在外网访问到自己的博客时,很多人都会很兴奋吧!如果环境是自己配置的,而不是用的集成环境肯定也会有点小小的成就感. --但是在我兴奋的时候遇到了个小麻烦,下载插件提示我输入FTP信任凭据,输了 ...

  4. 一起了解 .Net Foundation 项目 No.11

    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Microsoft Web ...

  5. python数据分析工具 | pandas

    pandas是python下强大的数据分析和探索工具,是的python在处理数据时非常快速.简单.它是构建在numpy之上的,包含丰富的数据处理函数,支持时间序列分析功能,支持灵活处理缺失数据. pa ...

  6. JAVA基础之IO流知识总结

    一.IO流体系图 IO常用的几个流: [I/O流原理作用] Input/Output:输入输出机制 输入机制:允许java程序获取外部设备的数据(磁盘,光盘,网络等). 输出机制:保留java程序中的 ...

  7. 使用NPOI将Excel表导入到数据库中

    public string ExcelFile() { //指定文件路径, string fileName=@"d:\Stu.xls"; //创建一个文件流,并指定其中属性 usi ...

  8. frida报错frida.InvalidArgumentError: device not found问题解决方案

    一.问题描述     python安装好frida框架后,在安卓端启动了frida-server,启动要hook的应用,在cmd中执行python脚本,报错frida.InvalidArgumentE ...

  9. TP5使用Redis处理电商秒杀

    本篇文章介绍了ThinkPHP使用Redis实现电商秒杀的处理方法,具有一定的参考价值,希望对学习ThinkPHP的朋友有帮助! TP5使用Redis处理电商秒杀 1.首先在TP5中创建抢购活动所需要 ...

  10. linux-TFTP服务

    1.TFTP协议简介TFTP,全称是 Trivial File Transfer Protocol(简单文件传输协议),基于 UDP 实现,该协议简单到只能从远程服务器读取数据或向远程服务器上传数据. ...