##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. 从Note 5看三星大招 究竟能不能秒杀iPhone

    5看三星大招 究竟能不能秒杀iPhone" title="从Note 5看三星大招 究竟能不能秒杀iPhone"> 从当年HTC发布第一代Android手机G1开始 ...

  2. 用Python拨打电话

    用python拨打电话,先看小视频 跟selenium操作浏览器原理类似,这是用appium操作移动设备的一个自动化功能,自娱自乐,主要是通过小案例引出相关技术 一.环境配置: 1.安装 jdk 1. ...

  3. Java8-19-lambda 重构代码

    通过本书的前七章,我们了解了Lambda和Stream API的强大威力. 你可能主要在新项目的代码中使用这些特性.如果你创建的是全新的Java项目,这是极好的时机,你可以轻装上阵,迅速地将新特性应用 ...

  4. 无线城域网 WMAN

    无线城域网 WMAN (Wireless Metropolitan Area Network) 1.1.概述 2002 年 4 月通过了 802.16 无线城域网的标准.欧洲的 ETSI 也制订类似的 ...

  5. Redis list实现原理 - 双向循环链表

    双向链表 双向表示每个节点知道自己的直接前驱和直接后继,每个节点需要三个域 查找方向可以是从左往右也可以是从右往左,但是要实现从右往左还需要终端节点的地址,所以通常会设计成双向的循环链表; 双向的循环 ...

  6. SpringBoot入门系列（一）如何快速创建SpringBoot项目

    这段时间也没什么事情,所以就重新学习整理了Spring Boot的相关内容.今天开始整理更新Spring Boot学习笔记,感兴趣的朋友可以关注我的博客:https://www.cnblogs.com ...

  7. 使用Navicat或者其他数据库工具连接阿里云EDS（数据库服务器）实例过程详解

    使用Navicat或者其他数据库工具连接阿里云EDS(数据库服务器)实例过程详解 背景:这几天从阿里云上面购买了云服务器,最垃圾的那种,还送oss和EDS数据库服务器,只不过EDS数据库服务器只有一个 ...

  8. 从零认识 DOM (一): 对象及继承关系

    先上图为敬! 说明: 图中包括了大部分 DOM 接口及对象, 其中: 青色背景为接口, 蓝色背景为类, 灰色背景表示为 ECMAScript 中的对象 忽略了一部分对象, 包括: HTML/SVG 的 ...

  9. webpack从0到1超详细超基础学习教程

    概念 自己是一个一听到webpack就头大,看着一堆不知道那是什么玩意的东西总觉得自己做好前端就行了,但是在使用vue-cli的时候总觉得要改其中的一些东西进行项目初始化的时候能够更好使用!所以想要根 ...

  10. 微信小程序转化为uni-app项目

    前言: 之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的功能,但是由于自己前端抠脚的原因没有写出来,然后自己在网上搜索的时候发现了有个微信小程序里面的页面及其的符合我的需求.那么问题 ...