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
JS加强学习-DOM学习01相关推荐
- JS学习笔记六:js中的DOM操作
1. JS学习笔记六:js中的DOM操作 文章目录 1. JS学习笔记六:js中的DOM操作 1.1. 获取Dom节点 1.2. 元素属性的操作方式 1.3. DOM节点的创建.插入和删除 1.4. ...
- Vue 学习 之 7.01 学习笔记
Vue 学习 之 7.01 学习笔记 1.还是复习前面的那个"品牌案例管理",但是数据不是静态写死哦,而是动态的管理,向数据库发送相关请求实现,因此,小节和昨天所学就是掌握Vu ...
- DOM学习之路--Mr.Ember
DOM学习之路--Mr.Ember 摘要:打好基础从DOM基础开始 一. 事件冒泡和捕获 当一个元素事件被触发时,不仅只在对象本身触发一次,还经历了三个阶段: (1)捕获阶段:文档先由根对象(docu ...
- Vue.js实战之系统学习第一节
为什么叫系统学习呢?因为我以前接触过Vue.js,但是没学过它的原理,只是简单的使用了,使用的时候就觉得很好用,没有其他的什么感觉,但当我进入职场后,学习了很多的前端技术后,才发现这个技术的友好,被它 ...
- Vue.js实战之系统学习第七节
想看上一节的请点击: Vue.js实战之系统学习第六节 接下来我们要学习第七节了,时间过的好快. 组件详解 组件是Vue.js的核心功能,也是整个框架设计最精彩的地方,当然也是最难掌握的.本章节将带你 ...
- [js学习] javaScript学习
JavaScript学习day1 什么是JavaScript JavaScript是一种运行在客户端的脚本语言 脚本语言:不需要编译,运行过程中由js解释器逐行来进行解释并执行 现在也可以基于Node ...
- DOM深入学习 --- DOM 树介绍,如何遍历 DOM 树节点(一)
DOM 树 HTML 文档的主干是标签(tag). 根据文档对象模型(DOM),每个 HTML 标签都是一个对象.嵌套的标签是闭合标签的"子标签(children)".标签内的文本 ...
- MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都在它的源码 ...
- 学习 Linux_01: 引导程序
学习 Linux_01: 引导程序 当PC启动时,执行ROM中的BIOS程序:首先自检,然后从引导驱动器上的主引导记录(MBR)加载第一个扇区.MBR包含主分区表,因此可执行代码少于512byte,这 ...
最新文章
- linux avahi-daemon进程 网络服务 简介
- Codeforces Round #171 (Div. 2)
- 解决python2.7 UnicodeDecodeError和UnicodeEncodeError问题
- 99% 的同学写不出好代码,都是因为这个问题!
- (40)Gulp中使用BootStrap
- 如何解决空虚感?(转)
- asp.net在发送邮件时出现服务器响应为: You are not authorized to send mail, authentication is required 解决方案...
- 一个java内存泄漏的排查案例
- mysql+instr查询,mysql中使用instr进行模糊查询方法介绍
- 跟我一起学docker(九)--持续系统集成了解下git
- ubuntu安装mysql教程
- 【MATLAB】修改黑色炫酷主题darcula.prf
- JQuery视频总结
- 菜鸟教程笔记:TypeScript
- java解析返回报文_Java解析json报文实例解析
- JDBC连接MySQL数据库出现的错误及解决方法整理
- linux网络编程——聊天室总结
- IllegalStateException: Fragment already added
- shell两行输出为一行
- 数据库(单表查询与多表联查)