前端学习之JavaScript DOM以及DOM操作的基础知识
在了解了javascript的语言基础和特性后
javascript真正大放光彩的地方来了——这就是javascript DOM
Javascript DOM
DOM(Document Object Model),文档对象模型。
是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口;W3C已经定义了一系列DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。
简单的说就是一套操作文档内容的方法。
需要注意的是,我们需要把DOM当作一个整体,不能分割看待,即DOM(文档对象模型)是一套操作文档内容的方法。
- 文档:一个页面就是一个文档,DOM中使用document表示
- 元素:页面中的所有标签都是元素,DOM中使用element表示
- 节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示
DOM把以上内容看作都是对象
实例:
<!DOCTYPE html>
<html>
<head><title>Shopping list</title><meta charset="utf-8">
</head>
<body>
<h1>What to buy</h1>
<p id="buy" title="a gentle reminder">Don't forget to buy this stuff</p>
<ul id="purchases"><li>A tin od beans</li><li>Cheese</li><li>Milk</li>
</ul>
</body>
</html>
用树表示这个网页的结构:
1、获取DOM四种基本方法
1、getElementById()
2、getElementsByTagname()
3、getAttribute()
4、setAttribute()
常用的两种解析:
1. getElementById():
参数:元素的ID值。 (元素节点简称元素)
返回值:一个有指定ID的元素对象(元素是对象)
注:这个方法是与document对象相关联,只能由document对象调用。
用法:document.getElementById(Id)
例:
typeof document.getElementById("purchases");//object
代码演练:
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="time">2020-04-16</div><script>// 1. 因为我们文档页面从上往下加载,所以先得有标签 所以我们script写到标签的下面// 2. get 获得 element 元素 by 通过 驼峰命名法 // 3. 参数 id是大小写敏感的字符串// 4. 返回的是一个元素对象var timer = document.getElementById('time');console.log(timer);console.log(typeof timer);// 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法console.dir(timer);</script>
</body></html>
看一下控制台打印的是什么
可以看到 console.log(timer)打印出来的是整个div标签
timer类型是个对象
2. getElementsByTagName():
参数:元素名
返回值:一个对象数组。这个数组里每个元素都是对象,每个对象分别对应着文档里给定标签的一个元素。
注:这个方法可和一般元素关联。这个方法允许我们把通配符当作它的参数,返回在某份html文档里总共有多少个元素节点。
用法:element.getElementsByTagName(TagName)
例:
var items=document.getElementsByTagName("li");
items.length;//3
document.getElementsByTagName(“*”);//12
2、事件基础
3.1 事件概述
JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。
简单理解:触发——>响应机制
网页中每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击某按钮产生一个事件,然后去执行某些操作
3.2 事件三要素
事件源 、事件类型、事件处理程序,我们也称为事件三要素
(1) 事件源 事件被触发的对象 谁
(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
(3) 事件处理程序 通过一个函数赋值的方式 完成
代码实例
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><button id="btn">唐伯虎</button><script>// 点击一个按钮,弹出对话框// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素//(1) 事件源 事件被触发的对象 谁 按钮var btn = document.getElementById('btn');//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下//(3) 事件处理程序 通过一个函数赋值的方式 完成btn.onclick = function() {alert('点秋香');}</script>
</body></html>
运行结果
3.3 执行事件的步骤
1、获取事件源
2、注册事件(绑定事件)
3、添加事件处理程序(采取函数赋值形式)
代码实战
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div>123</div><script>// 执行事件步骤// 点击div 控制台输出 我被选中了// 1. 获取事件源var div = document.querySelector('div');// 2.绑定事件 注册事件// div.onclick // 3.添加事件处理程序 div.onclick = function() {console.log('我被选中了');}</script>
</body></html>
运行结果
鼠标点击123—>控制台打印
常用的DOM事件
- onclick事件---当用户点击时执行
- onload事件---当用户进入时执行
- onunload事件---用用户离开时执行
- onmouseover事件---当用户鼠标指针移入时执行
- onmouseout事件---当用户鼠标指针移出时执行
- onmousedown事件---当用户鼠标摁下时执行
- onmouseup事件---当用户鼠标松开时执行
后续~~~~
前端学习之JavaScript DOM以及DOM操作的基础知识相关推荐
- 前端学习记录 —— JavaScript(一)
前端学习记录 -- JavaScript(一) 前言 一.初识 JavaScript JavaScript 的特点 JavaScript的作用 编程语言与标记语言的区别 HTML/CSS/JS 的关系 ...
- 零基础web前端学习之JavaScript 和css 阻塞
web前端学习之JavaScript 和css 阻塞,JavaScript 是客户端和服务器端的脚本语言,可以插入HTML 页函中, 并且是目前较热门的Web 开发语言.同时, JavaScript ...
- 【前端 · 面试 】JavaScript 之你不一定会的基础题(二)
最近我在做前端面试题总结系列,感兴趣的朋友可以添加关注,欢迎指正.交流. 争取每个知识点能够多总结一些,至少要做到在面试时,针对每个知识点都可以侃起来,不至于哑火. 前言 在上一篇文章[前端 · 面试 ...
- mysql中需要提交的操作_MySQL常用操作及基础知识
原标题:MySQL常用操作及基础知识 1.启动和关闭mysql服务器: service mysql start service mysql stop 2.重启MySQL服务: service mysq ...
- 前端学习之JavaScript学习-2021-09-2029
JavaScript学习 1.什么是JavaScript 1.1.概述 Javascript是一门世界上最流行的脚本语言 一个合格的后端人员,必须要精通JavaScript 1.2.历史 JavaSc ...
- 前端学习笔记——JavaScript进阶
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.JavaScript 面向对象 1. 面向对象编程介绍 1.1 两大编程思想 1.2 面向过程编程 1.3 面向对 ...
- 前端学习,JavaScript实战总结
文章目录 声明JavaScript变量 JavaScript 使用=为变量赋值 JavaScript 使用=为变量赋初始值 理解JavaScript未定义变量 理解JavaScript变量的大小写敏感 ...
- 关于前端学习路线的一些建议(值得零基础拥有)
前言 对于刚开始学习前端的伙伴俩说,问得最多的问题就是 --前端技术现在如此繁杂,我到底应该如何学习.这个话题太大了,几句话回答不好:也由于这个问题确实困扰了很多前端开发人员,所以我也就着手系统的输出 ...
- 前端学习笔记一:HTML(1)预备知识及一个简单的网页
先唠唠嗑: 选择计算机相关的专业纯粹是因为爱屋及乌(x .因此在之前的大学学习生涯中就没有专业方向的概念,(虽然代班在班会上提到过,但是大学新生嘛,都懂得(划掉 ).所上过的课程都是老师教什么就学什么 ...
- 戏说前端 JavaScript 之『防抖节流』基础知识
往事不堪回首 犹记在很久之前的某次面试中,和那技术大哥谈的正欢呢,冷不防他来了句:谈一谈防抖和节流吧. 抹了把凉汗,我用颤抖的.不自信的语气回答道:呃,防抖就是应该是防止抖动的意思,节流大概是节省流量 ...
最新文章
- 蚂蚁金服大佬自述:保持学习力,永远胜过不切实际的一夜暴富幻想!
- 两代“狗”开发者首次解答30多个问题,一定有你想了解的!(附论文下载)
- 基于opencv的手写数字字符识别
- [C++调试笔记]初始化
- C#获取本机可用端口
- 天猫方糖 篇一:新版天猫放糖改造立体声
- 计算机图形学应用:java2d和3d_?硬核儿童节礼物:MIT学神、太极作者胡渊鸣送你一门计算机课程...
- qq linux五笔输入法,qq五笔输入法
- 电梯plc的io分配_用PLC构成液体混合控制系统IO分配及梯形图编程
- Qt TCP服务端、客户端;QTcpSocket
- Ubuntu16.04 cp xorg.conf.failsafe xorg.conf后无法设置分辨率的解决办法
- 业务流程图设计-Visio设计
- Exception in thread “main“ redis.clients.jedis.exceptions.JedisDataException: NOAUTH Authentication
- java ppt转pdf_JAVA如何把word,excel,ppt转成PDF,已经过测试成功。
- 《IT学生解惑手册》电子版免费下载!
- Android 获取最近几天的日历日程
- 成功解决Solving environment: failed with initial frozen solve. Retrying with flexible solve.
- GROMACS Tutorial 1-Lysozyme in Water-translated with notes
- 休假管理系统——设计类图
- 长亮科技带病IPO成功 另类持股承诺被疑闯关秘诀