当前位置: 首页 > 编程日记 > 正文

JS加强学习-DOM学习01

JavaScript由三个部分组成:ECMAScript、DOM、BOM。前面已经学习了ECMAScript中的基础内容,现在可以开始学习DOM部分了,在DOM中更多的是实际效果的展现。

1. DOM定义

DOM:document object model 文档对象模型

它是将整个页面文档封装成了一个对象,并且这个文档对象由很多不同的节点组成。

节点包括三部分: 元素节点(标签节点)、属性节点、文本节点。

2. 获取页面的方式

2.1 getElementById

Id: document.getElementById()  唯一的对象元素

我们在css样式中遇到过标签的id,由于id的唯一性所以在css中不常用,而在DOM中却相反,因为在给页面做DOM属性设置时常为单一对象描述,所以id可以在DOM编写中使用到,每个id的值必须唯一。

2.2 getElementsByTagName

标签: document.getelementsByTagName("标签名")  获取对象数组

我们还可以通过获取标签的方式来获取元素,最后我们获得的是由同样的标签组成的数组。

注意:即使只有一个标签也会组成一个数组。

2.3 getElementsByClassName

类名: document.getelementsByClassName() 获得对象数组

在CSS中我们常用的类选择器也能在DOM中用来获取页面元素,但是document.getElementsByClassName("类名")有很强的兼容性问题,一般不用。

3. 事件

3.1 事件的定义

当我们获取完页面元素后,会对这些获取到的元素设置属性。

而在这时会涉及到事件这个概念。

事件就是用户在文档或浏览器窗口中发生的一些特定的交互瞬间。

事件需要触发和响应两个阶段,触发是指具体的一些交互瞬间,响应是这些交互瞬间引发或得到的某一效果。

3.2 事件三要素

3.2.1 事件源(发生事件的源头):是指被获取到并被引用事件的页面元素。

3.2.2 事件名称:是指具体的交互瞬间的类型。

3.2.3 事件处理程序 :要执行的代码或是结果,常为函数。

3.3 注册事件

获取页面元素又可以称为获取事件源,在获取完事件源之后需要给它设定具体事件,这就叫注册事件。

注册事件分为两种方法:

行内式:on+事件名组成注册事件,直接在对应的标签上注册事件。

内嵌式:on+事件名组成注册事件,用事件源.的形式注册事件。

主要使用on+事件名来注册,其他方法以后遇到了再做补充。

转载于:https://www.cnblogs.com/chendu/p/5742946.html

相关文章:

android 游戏引擎libgdx demo cuboc分析

开始学习android游戏开发也有一段时间了,挑选libgdx这个游戏引擎来进行学习和开发。Libgdx是一款支持2D与3D游戏开发的游戏类库,并且它是夸平台的。例如你可以在windos下开发,同样的代码也可以运行在android上。 刚开始学习这个游戏引擎可能会感觉无从下手&#…

倒计时1天 | 张钹院士领衔,AI开发者大会20大论坛全攻略!

2020年7月3—4日,由 CSDN 主办的第三届 AI 开发者大会(AI ProCon 2020)(大会官网:https://aiprocon.csdn.net/)将以线上直播的形式与大家相见。本次大会历时2天,一次性设立6大主题、20大精彩分论…

在页面中导入文件

1. <% Response.WriteFile ("Yourfile.inc") %> 2. Server.Execute("Yourfile.inc")

How Tomcat works — 四、tomcat启动(3)

上一节说到StandardService负责启动其子组件&#xff1a;container和connector&#xff0c;不过注意&#xff0c;是有先后顺序的&#xff0c;先启动container&#xff0c;再启动connector&#xff0c;这一节先来看看container。 目录 Pipeline和VavleStandardEngine类和Standar…

DataList分页

<% Page Language"C#" %> <% Import Namespace"System.Data" %> <% Import Namespace"System.Data.OleDb" %> <Script Language"C#" Runat"Server"> /* Create By 飞刀 http://www.aspcn.com 20…

【中文】Joomla1.7扩展介绍之Googlemaps Plugin

Googlemaps Plugin 插件分类&#xff1a;Maps 支持版本&#xff1a;1.5 /1.6 /1.7 关注程度&#xff1a;【最流行的】 所属类型&#xff1a;插件、多语种 可以在 Joomla 1.5.x (native), 1.6.x and 1.7.x. 的内容条目、模块或者组件中显示一个&#xff08;或多个&#xff09;…

一文读懂:GoogleNet的Inception从v1到v4的演变

来源 | 机器学习炼丹术GoogleNet和VGG是ImageNet挑战赛中的第一名和第二名。共同特点就是两个网络的层次都更深了。但是&#xff1a;VGG继承了LeNet和AlexNet的一些框架结构而GoogleNet则做了更大胆的尝试&#xff0c;虽然深度有22层&#xff0c;但是参数却是Alexnet的1/12.而V…

几何画板画一个五边形内部的方法

五边形属于多边形里面比较简单的&#xff0c;就是在四边形的基础上增加一条边而已&#xff0c;五边形在平面几何学上指所有由五条边围衬成及有五个角的多边形。完美五边形和正五边形都是五边形的一种特殊类型。几何画板作为专业绘图工具&#xff0c;可以轻松就画出五边形&#…

GDAL Data Model(转)

即描述一个GDAL data store能够包含的信息的类型。 Dataset 一个dataset &#xff08;即一个GDALDataset 对象&#xff09;是一组相关的raster bands和一些属于它们的公共信息的集合。尤其是dataset有一个适用于它所有bands的关于raster size的概念&#xff0c;它是用pixels 和…

实战:人脸识别实战项目(源码共享)

首先我想问个问题&#xff1a;现在什么工程师最值钱&#xff1f;毫无疑问&#xff0c;我想超 90% 的都会说&#xff1a;人工智能工程师。也难怪&#xff0c;随着近几年人工智能的发展&#xff0c;已经逐渐渗透到了各个领域&#xff0c;比如&#xff1a;医疗、教育、机械自动化、…

Calendar如何只显示“一、二、三...日”,不显示“星期”

秋水无恨 asp.net Calendar DayNameFormat Globalization DayNames http://www.csdn.net/develop/Read_Article.asp?id15715 Calendar的DayNameFormat&#xff0c;如FirstLetter &#xff0c;FirstTwoLetters &#xff0c;Full &#xff0c;Short 但是争对英文而言的&#xf…

gulp插件之browser-sync安装报错

2019独角兽企业重金招聘Python工程师标准>>> 最近做前端开发&#xff0c;一直用gulp来写一些自动化脚本。之前用的npm的镜像为edunpm&#xff0c;很简单&#xff0c;因为这个镜像非常的快。 但是不知道为什么browser-sync插件总是下载不成功。。。 后来用nrm切换到t…

TensorFlow、PyTorch之后,“国产”AI框架还有没有机会?

出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09;众所周知&#xff0c;在机器学习框架领域&#xff0c;PyTorch、TensorFlow已分别成为目前学界和业界使用最广泛的两大实力玩家&#xff0c;而紧随其后的Keras、MXNet等框架也由于其自身的独特性受到开发者的喜爱。 202…

结构成员访问的三种方法

结构成员访问的三种方法 #include "stdio.h"#include "string.h"#include <stdlib.h>main (){struct student{int num;char * name;int score;}stu;struct student *p&stu;stu.num1;(*p).name"tom";p->score78;printf("%d\n&q…

数据库字段命名及设计规范

1.设计原则 1) 标准化和规范化数据的标准化有助于消除数据库中的数据冗余。标准化有好几种形式&#xff0c;但 Third Normal Form&#xff08;3NF&#xff09;通常被认为在性能、扩展性和数据完整性方面达到了最好平衡。简单来说&#xff0c;遵守3NF 标准的数据库的表设计原则是…

更改管理GPO的域控制器

1.GPO先被存储到扮演PDC模拟器操作主机角色的域控制器&#xff0c;然后再由它将其复制到其他域控制器&#xff0c;域成员计算机再通过域控制器来应用GPO.2.可通过DC选项与组策略两种方式来将管理GPO的域控制器从PDC模拟器操作主机更改为其他域控制器。转载于:https://blog.51ct…

怎样使元素可编辑

作者&#xff1a;http://lucky.myrice.comE-mail:amxh21cn.com 在IE5.5中&#xff0c;可以设定元素的编辑属性。语法如下&#xff1a; object.contentEditable [ sEditable]; 其中的sEditable为下列三个之一&#xff1a; ◇inherit ◇false ◇true <script lang…

知乎多场景内容匹配方案荣获CSDN AI优秀案例奖

7月3日&#xff0c;由CSDN主办的2020 AI开发者大会拉开帷幕&#xff0c;以直播形式进行吸引了上万名技术从业者参与。大会颁发了2020 AI企业及技术应用系列奖项&#xff0c;其中知乎凭借“多场景内容匹配方案”荣获“AI优秀案例奖”。 过去一年&#xff0c;人工智能技术研发和…

批量创建用户和设置密码

(1) 首先创建用户名文件和密码文件 # touch user_name passwd active:/srv # cat passwd win00:123456 win01:123456 active:/srv # cat user_name win00:x:520:520::/home/win00:/bin/bash win01:x:521:521::/home/win01:/bin/bash (2) 然后执行命令导入用户名和密码 a…

Eclipse 小插件

http://www.junginger.biz/eclipse/

肝了三天,万字长文教你玩转 tcpdump,从此抓包不用愁

图源 | 视觉中国来源|Python编程时光&#xff08;ID: Cool-Python&#xff09;今天要给大家介绍的一个 Unix 下的一个 网络数据采集分析工具 -- Tcpdump&#xff0c;也就是我们常说的抓包工具。与它功能类似的工具有 wireshark &#xff0c;不同的是&#xff0c;wireshark 有图…

【中文】Joomla1.7扩展介绍之Fabrik (强大的表单处理能力)

Fabrik 插件分类&#xff1a; Contacts & Feedback > Forms 支持版本&#xff1a;1.5 /1.7 关注程度&#xff1a;【最流行的】 所属类型&#xff1a;组件、模块、插件、多语言 Fabrik 2.1.1 is a security fix, please update immediately Fabrik 2.1.1是一个安全…

CPU的序列号

可以取CPU的序列号。 string cpuInfo "";//cpu序列号 ManagementClass cimobject new ManagementClass("Win32_Processor"); ManagementObjectCollection moc cimobject.GetInstances(); foreach(ManagementObject mo in moc) { cpuInfo mo.Properties…

Sqli-labs less 9

Less-9 本关我们从标题就可以看到 《基于时间-单引号》&#xff0c;所以很明显的这关要我们利用延时注入进行&#xff0c;同时id参数进行的是 的处理。这里我们大致的将延时注入的方法演示一次。 这里用sleep()函数。 这里因为我们利用的是时间的延迟&#xff0c;贴图就没有意…

用ASP.NET上传图片并生成带版权信息的缩略图

作者&#xff1a;活靶子 出处&#xff1a;AspxBoy.Com <% Page Language"C#" ResponseEncoding"gb2312" %><% import Namespace"System" %><% import Namespace"System.IO" %><% import Namespace"Sys…

服务器ping你可以ping通,你ping服务器ping不同的解决方案!!

这几天让公司的服务器弄的蛋疼啊&#xff01;&#xff01;三天两头的出问题&#xff0c;主管脸色不大好看&#xff0c;我这里也郁闷的要死。所以发誓一定要把好安全关&#xff01;&#xff01; 今天在自己的虚拟机上边装了一个winserver2003标准版&#xff0c;搭建好环境之后发…

重磅!CSDN 发布「AI开源贡献奖Top5」「AI新锐公司奖Top10」「AI优秀案例奖Top30」三大榜单...

2020 年无疑是特殊的一年&#xff0c;AI 在开年的这场“战疫”中表现出惊人的力量。站在“新十年”的起点上&#xff0c;CSDN发起【百万人学AI】评选活动。我们继续聚焦AI的技术落地&#xff0c;关注开源和新生的力量。作为CSDN第三届AI评选活动&#xff0c;本次活动受到数百家…

linux 模拟生成 CAN 设备

/*************************************************************************************** linux 模拟生成 CAN 设备* 说明&#xff1a;* 最近在看CANopenSocket的过程中看到能够生成模拟的CAN设备&#xff0c;于是查了点资料&#xff0c;结…

关于委托的精彩解说

作者&#xff1a;TomMax (笑望人生) 出处&#xff1a;csdn community 主 题&#xff1a; “.net百题问答的活动”--许多人问过的--《 C#委托及事件 》作 者&#xff1a; TomMax (笑望人生) 信 誉 值&#xff1a; 100 所属论坛&#xff1a; .NET技术 C# 问题点数&am…

[转载]ESFramework 4.0 快速上手(15) -- 客户端登录验证

ESFramework 4.0 快速上手&#xff08;15&#xff09; &#xff0d;&#xff0d; 客户端登录验证 在之前版本的Rapid引擎中&#xff0c;是没有提供客户端登陆验证的机制的&#xff0c;如果要验证用户的帐号密码信息&#xff0c;我们只有自己手动通过自定义信息来实现。在2011.…