小汤学编程之JavaScript学习day05——DOM、事件
一、DOM
1.DOM树状结构图 2.节点类型 3.document节点 4.element节点 5.CSS
二、事件链
1.JS的继承结构图 2.常用事件句柄 3.事件的绑定 4.表单效验 5.事件的传播 6.event对象 7.事件的委托/代理
一、DOM
DOM文档对象模型 (Document Object Model) 使 JavaScript 有能力与当前文档对话。
1.DOM树状结构图
任意的文档都可以绘制成树状结构,在DOM树上,每个元素都可与看做一个对象,每个对象都叫做一个节点(node)。docunment就是一个对象,这个对象指代的是这个文档。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。
2.节点类型
(不考虑注释)
节点类型 | 说明 |
---|---|
document | 文档节点 |
element | 元素节点 |
attribute | 属性节点 |
text | 文本节点 |
3.document节点
属性
属性 | 说明 |
---|---|
.nodeName | 节点名 |
.nodeType | 节点类型 |
.nodeValue | 节点属性 |
方法
方法 | 说明 |
---|---|
.getElementById("") | 返回带有指定Id的元素,结果为dom对象 |
.getElementByTagName("") | 返回带有指定标签名的所有元素,结果为dom对象数组 |
.getElementByClassName("") | 返回带有指定类名的所有元素,结果为dom对象数组 |
.getElementByName("") | 返回带有指定名称的所有元素,结果为dom对象数组 |
.querySelector("") | 返回文档中匹配指定css选择器的第一个元素,结果为dom对象 |
.querySelectorAll("") | 返回文档中匹配指定css选择器的所有元素,结果为dom对象数组 |
.createElement("") | 创建一个指定标签名的元素节点 |
.creatAttribute("") | 创建一个指定属性名的属性节点 |
.creatTextNode("") | 创建一个指定内容的文本节点 |
前六个为查找方法,后三个为创建方法。
创建方法通常与 appendChild() 方法一起使用,达到增加HTML结构的目的。
// 通过document创建一个h1元素节点
var newH1 = document.createElement("h1");
// 通过document创建一个class属性节点
var att1 = document.createAttribute("class");
att1.value = "my_class" ;
// 通过document创建一个文本节点
var text2 = document.createTextNode("我们正在学习JS的DOM.");
// 把属性节点设置到对应的元素节点上
newH1.setAttributeNode(att1);
// 把文本节点设置到对应的元素节点上
newH1.appendChild(text2);
// 将创建的h1加入到body中
document.body.appendChild(newH1);
4.element节点
属性
属性 | 说明 |
---|---|
.nodeName | 节点名(标签名) |
.nodeType | 节点类型 |
.nodeValue | 节点属性 |
.innerText | 设置或返回元素内部的文本 |
.innerHTML | 设置或返回元素的内部HTML |
.outerHTML | 设置或返回元素的外部HTML(包括自己本身的标签) |
.id/.className/.tagName | 设置或返回元素的id/class/标签名 |
.offsetHeight/.offsetWidth | 返回元素的高度/宽度 |
.offsetLeft/.offsetTop | 返回元素的水平/垂直偏移位置(相对于窗口) |
.childNodes/.children | 返回节点的子节点集合(childNodes会把折叠的空白也算作一个子节点,而children不会。) |
.firstchild/.firstElementChild | 返回元素的第一个子元素(.firstchild/.firstElementChild 返回元素的第一个子元素) |
.lastChild/.lastElementChild | 返回元素的最后一个子元素(.lastChild/.lastElementChild 返回元素的最后一个子元素) |
.nextSibling/.nextElementSibling | 返回位于相同节点树层级的下一个节点(nextSibling计算空白,而nextElementSibling不会。) |
.previousSibling/.previousElementSibling | 返回位于相同节点树层级的上一个节点(previousSibling 计算空白,而previousElementSibling不会。) |
.parentNode | 返回元素的父节点 |
方法
方法 | 说明 |
---|---|
.getElementByTagName("") | 返回带有指定标签名的所有元素,结果为dom对象数组 |
.removeChild() | 从元素中移除子节点 |
.remove() | 删除当前节点 |
.replaceChild( , ) | 用新节点替换某个子节点(第一个参数为新节点,后者为旧节点) |
.setAttribute()/.getAttribute() | 设置/获取元素的属性值 |
.setAttributeNode()/.getAttributeNode() | 设置/返回指定的属性节点 |
.insertBefore( , ) | 在指定的子节点前插入新的子节点(新节点参数在前,指定节点参数在后) |
.cloneNode() | 克隆节点并返回克隆(参数默认为false,表示只克隆节点跟属性,为true表示克隆节点跟属性及其后代) |
5.CSS
内联样式
我们可以通过 元素.style.属性
或者 元素.style["属性"]
来获取或者设置元素的内联样式。如果属性是多个单词需要使用小驼峰命名。
生效样式
很多样式我们是定义在内部或者外部,只查看内联样式没意义,我们可以查看元素的生效样式而不用管是定义在哪里。
- IE浏览器:
元素.currentStyle.属性
- 非IE浏览器:
getComputedStyle(元素)[属性]
兼容样式
由于IE跟非IE浏览器的样式访问不太一样,我们可以自定义一个方法,来兼容所有浏览器。
/*
ele:要查看样式的元素。
styleName:要查看的样式名,字符串形式。
*/
function getStyleValue(ele,styleName){return ele.currentStyle?ele.currentStyle[styleName]:getComputedStyle(ele,null)[styleName];
}
二、事件
有时候我们需要在达到某些条件的时候去执行 一段固定的JS代码。我们称之为事件。
1.事件的三要素
(1)事件源:用来发生事件的对象
(2)绑定事件:事件源与执行程序的绑定方式
(3)事件执行程序:事件触发后要执行的代码
2.常用事件句柄
句柄 | 说明 |
---|---|
onabort | 图像加载被中断 |
onblur | 元素失去焦点 |
onchange | 用户改变域的内容 |
onclick | 鼠标点击某个对象 |
ondblclick | 鼠标双击某个对象 |
onerror | 当加载文档或图像时发生某个错误 |
onfocus | 元素获得焦点 |
onkeydown | 某个键盘的键被按下 |
onkeypress | 某个键盘的键被按下或按住 |
onkeyup | 某个键盘的键被松开 |
onload | 某个页面或图像被完成加载 |
onmousedowm | 某个鼠标按键被按下 |
onmousemove | 鼠标被移动 |
onmouseout | 鼠标从某元素移开 |
onmouseover | 鼠标被移到某元素之上 |
onmouseup | 某个鼠标按键被松开 |
onreset | 重置按钮被点击 |
onresize | 窗口或框架被调整尺寸 |
onselect | 文本被选定 |
onsubmit | 提交按钮被点击 |
onunload | 用户退出页面 |
3.事件的绑定
- 方式一:直接在HTML中定义元素事件的相关属性
<button onclick="alert('hello')">按钮</button><button onclick="helloClk()">按钮</button><script>function helloClk(){alert('hello');}
</script>
缺点:html中写JS代码,强耦合,违反了“内容与行为相分离”的原则,少用。
- 方式二:直接在JS中定义元素事件的相关属性
<script>// 获取按钮元素var btn = document.getElementById("btn_id1");// 给按钮元素绑定事件句柄函数btn.onclick = helloClk;// 定义事件驱动函数function helloClk(){alert('hello');}
</script>
解决了强耦合性,但只能给一个事件对象绑定一个事件类型。 绑定多个同一类型的事件的话后面覆盖前面的。
- 方法三:高级事件处理方式(addEventListener)
<script>// 获取按钮元素var btn = document.getElementById("btn_id1");// 给按钮元素绑定事件句柄函数,可以绑定多个btn.addEventListener("click",btnClick1);// false表示事件冒泡阶段执行,true表示事件捕获阶段执行,默认falsebtn.addEventListener("click",btnClick2 ,false);function btnClick1(){alert('hello1');}function btnClick2(){alert('hello2');}// 把btn上的click事件的btnClick1解除绑定btn.removeEventListener("click",btnClick1);
</script>
- 可以为一个元素绑定多个监听函数,都会得到执行。
- 匿名事件无法解绑。
- IE使用的是detachEvent / attachEvent
4.表单效验
对于JAVA工程师来说,前端与后台的数据交互是及其重要的,而表单的提交就是前端与后台的重要的数据交互。为了提交表单时数据更加合理,减轻后台的压力,在提交表单时进行校验是非常有必要的。
- 第一步:在表单标签中绑定onsubmit事件,调用校验函数,通过返回值控制是否提交。
- 第二步:在校验函数中使用过md5方法对密码进行加密。
- 第三步:改为使用隐藏域来提交密码。
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.9.0/js/md5.min.js"></script>
...
<form id="my_form" action="#" method="post" onsubmit="return check()">用户名: <input id="user_name" name="userName" /> <br/>密 码: <input id="user_input_pwd" type="password" /> <br/><!-- 隐藏域,值用来保存密码md5加密后的结果,提交到后台 --><input id="user_hidden_pwd" type="hidden" name="userPwd" /><input type="submit" />
</form>
...
function check(){var name = document.getElementById("user_name").value;var pwdInput = document.getElementById("user_input_pwd") ;var pwd = pwdInput.value;var pwdHidden = document.getElementById("user_hidden_pwd") ;if(name.length < 6){alert("用户名长度必须不低于6位");return false ;}if(pwd.length < 6){alert("密码长度必须不低于6位");return false ;}pwdHidden.value = md5(pwd); return true;
}
5.事件的传播
事件传播示意图
JS中的事件创建后,会按照如下过程在HTML元素间进行传播。IE的事件模型是没有捕获阶段的。
三个阶段
- 事件捕获:事件对对象沿DOM树向下传播
- 目标出发:运行事件监听函数
- 事件冒泡:事件沿DOM树向上传播
6.event对象
事件处理函数中有一个绑定事件的对象,有时候我们需要用到里面的一些重要属性。
属性 | 说明 |
---|---|
.target | 返回出发此事件的元素 |
.type | 返回事件的类型,如click |
.clintX/.clintY | 返回当事件被触发时,鼠标指针的水平/垂直坐标 |
.offsetX/.offsetY | 返回当事件被触发时,鼠标指针相对于事件源的水平/垂直坐标 |
.keyCode | 对于按键事件,返回按键的码 |
.preventDefault | 取消事件的默认动作(若存在),比如超链接、表单 |
.stopPropagation() | 阻止事件的继续传播 |
.cancelable | 示事件是否有可取消的默认动作,设置成true表示阻止事件传播,同stopPropagation() |
7.事件的委托/代理
事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
比如需要给ul下的li绑定事件,可以利用事件传播机制,直接给ul绑上事件即可:
ul.onclick = function(event){if(event.target.nodeName.toLowerCase() == 'li'){alert(event.target.innerText);}
}
小汤学编程之JavaScript学习day05——DOM、事件相关推荐
- 小汤学编程之JavaScript学习day01——认识JS、JS基础语法
一.认识JS 1.JavaScript的组成 2.浏览器执行js简介 3.JavaScript是什么? 4.扩展内容 二.JS基础语法 1.代码书写位置 2.变量 ...
- 小汤学编程之JavaScript学习day04——自定义对象、原型与原型链、BOM
一.自定义对象 1.对象的定义 2.对象的使用 二.原型与原型链 1.JS的继承结构图 2.关键点 三.BOM 1.window对象 2.document对象 3.lo ...
- 小汤学编程之JavaEE学习day05——会话管理、文件上传与下载、Ajax
一.会话管理 1.HTTP协议 2.会话的概念 3.会话跟踪技术 4.会话跟踪技术分类(四种) 二.文件上传与下载 1.上传 2.下载 3.上传和下载合并优化成 ...
- 小汤学编程之JavaScript学习day02——运算符、流程控制与循环、函数
一.运算符 1.算术运算符 2.一元运算符 3.关系运算符 4.逻辑运算符 5.赋值运算符 6.运算符的优先级 二.流程控制与循环 1.顺序结构 2.分 ...
- 小汤学编程之JavaScript学习day03——对象、Array数组、String字符、Date日期、JSON
一.JS中的对象 二.Array数组 1.特点 2.数组的定义 3.常用方法 4.数组的遍历 三.String字符 1.定义 2.常用方法 四.Date日期 1.定义 ...
- 小汤学编程之JavaEE学习day06——LayUI
一.LayUI简介 1.下载 2.入门案例 二.栅格布局 三.图标 四.按钮 1.按钮类型 2.主题 3.尺寸 4.圆角 5.按钮组 五.后台布局 六.表格数据 ...
- 小汤学编程之jQuery学习day03——事件、效果、插件
一.事件 1.绑定事件 2.解绑事件 二.效果 1.基本效果 2.淡入淡出 3.自定义效果 三.插件 1.下载地址 2.语法 3.常用的校验 4.案例 ...
- 小汤学编程之JavaEE学习day08——Maven
一.Maven介绍 1.什么是Maven 2.Maven的功能 3.什么是构建 4.项目的构建方式 二.Maven的安装 1.下载 2.安装 3.配置 ...
- 小汤学编程之JavaEE学习day07——版本控制工具:SVN、GIT
一.SVN 1.SVN介绍 2.SVN安装 3.SVN操作 二.GIT 1.GIT介绍 2.集中式和分布式 3.GIT的基本使用 4.GIT时光机 5. ...
最新文章
- 掩码语言模型(Masked Language Model)mlm
- Jenkins+Ant+TestNG+Testlink自动化构建集成
- python3.5.3下载安装教程_在Python3.5下安装和测试
- 现代密码学3.3--伪随机生成器/PRG
- ORACLE 等待事件的分类
- HTML--HTML对象的关于位置和大小的属性的图解
- USB连接TF卡 SD卡硬件电路
- magento 在产品页添加评论 Add Review Form in Magento Product View Page
- 7005.ADS-B建设和规划情况介绍
- RTMP流媒体播放过程
- Windows Embedded Webcast 2008年1月预告
- 软件测试类型方法步骤英语,软件测试类英文面试题
- Kotlin 中文文档
- 普林斯顿微积分读本篇六:求解微分问题
- 云信duilib之菜单
- 重磅!2020北京智源大会完整日程公布,4天19场高端AI论坛邀你参加
- 最新版Mysql安装步骤
- 第三届智能科学国际会议ICIS2018征稿北京大学11月2日-5日召开。附史忠植院士简历(公号发“智能科学国际会议”下载PDF)
- 普通家用电风扇电机绕组
- phpstorm全局搜索
热门文章
- 搭建大数据开发环境-Hadoop篇
- [php]php总结(2)
- MySQL check table/optimize table/analyze table/REPAIR TABLE
- DataTable新增列设置DefaultValue问题。
- php 源文件加密工具PHP Screw
- 【项目合作】最高50万元!道路缝隙检测、目标跟踪优化、机器人平台开发
- Pywick:追求功能完备的PyTorch高级训练库
- 谷歌大脑提出DropBlock卷积正则化方法,显著改进CNN精度
- 【机器学习】机器学习从零到掌握之二 -- 教你实现K近邻算法
- 2021高校暑假时间汇总!最长70天