(day46)DOM、BOM、事件
目录
一、BOM
(一)定义
- BOM:浏览器对象模型,可以和浏览器进行”对话“
- 在调用window对象的方法和属性时,可以省略window对象的引用
(二)window对象
所有浏览器都支持对象,它表示浏览器窗口
- window.innerHeight:浏览器窗口的内部高度
- window.innerWidth:浏览器窗口的内部宽度
- window.open():打开新窗口
- window.close():关闭当前窗口
(三)window的子对象
(1)navigator对象
浏览器对象,通过这个对象可以判定用户使用的浏览器,包含了浏览器相关信息
- navigator.appName:Web浏览器全称
- navigator.appVersion:Web浏览器厂商和版本的详细字符串
- navigator.userAgent:客户绝大部本信息
- navigator.platform:浏览器所在操作系统
(2)screen对象
不常用
- screen.availWidth:可用的屏幕宽度
- screen.availHeight:可用的屏幕高度
(3)history对象
包含浏览器的历史,可以前进或者后退
- history.fowward():前进一页
- history.back():后退一页
(4)location对象
获得当前页面的地址(url),并且重定向
- location.href:获取url
- location.href = "URL":跳转到指定页面
- location.reload():重新加载页面
(5)弹出框
警告框alert
点击确定才能继续操作
确认框confirm
点击确认返回true,点击取消返回false
提示框prompt
点击确认返回输入的值,点击取消返回null
(6)计时事件
setTimeout()
过多长时间后再执行JS语句
var t = setTimeout("JS语句/函数调用",毫秒)
clearTimeout
取消setTimeout设置
clearTimeout(t)
setInterval()
按照指定的周期(毫秒计)循环调用函数或者JS语句
clearInterval()
取消setInterval()设置的循环调用
二、DOM
(一)定义
DOM是页面的文档对象模型,通过它,可以访问HTML文档的所有元素。
- DOM标准规定html文档的每个成分都是一个节点
- 文档节点(document对象):代表整个文档
- 元素节点(element对象):代表一个元素(标签)
- 文本节点(text对象):代表元素中的文本
- 属性节点(attribute对象):代表一个属性,元素才有属性
- 注释是注释节点(comment对象)
- 可以创建动态的html
- 改变页面中的所有html元素
- 改变页面中的所有html属性
- 改变页面中的所有css样式
- 对页面中的所有事件做出反应
(二)查找标签
(1)直接查找
- document.getElementById:根据ID获取一个标签
- document.getElementsByClassName:根据class名获取包含改标签的数组
- document.getElementsByTagName:根据标签名获取所有标签的数组
(2)间接查找
- parentElement:父节点标签
- children:所有子标签(数组)
- firstElementChild:第一个子标签
- lastElementChild:最后一个子标签
- nextElementSibling:下一个兄弟标签
- previousElementSibling:上一个兄弟标签
(三)节点操作
(1)创建节点
document.createElement("标签名")
// 语法
createElement(标签名)
// 示例
var divEle = document.createElement("div");
// 增加属性方法1
divEle.setAttribute("id","d1")
//增加属性方法2,该方法无法增加自定义属性
divEle.id = "d1"
(2)添加节点
- somenode.appendChild(newnode):最佳一个子节点(作为最后的子节点)
- somenode.insertBefore(newnode, 某个节点):在某个子节点前面增加节点
var imgEle = document.createElement("img");
imgEle.setAttribute("src","https://images.cnblogs.com/cnblogs_com/wick2019/1592198/t_191116084835%E7%BA%B9%E9%BE%99%E5%B0%91%E5%A5%B3.png?a=1574073646113");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);
(3)删除节点
somenode.removeChild(要删除的节点):通过父元素调用该方法删除
(4)替换节点
somenode.replaceChild(newnode,某个节点)
(5)属性节点
innerText:获取标签内文本
innerHTML:获取标签html代码,包括文本
getAttribute("属性名"):获取属性值
setAttribute("属性名",“属性值”):设置属性值,可以添加自定义属性
标签对象.属性:获取和设置属性,不可以设置自定义属性
removeAttribute("属性名"):移除属性
var divEle = document.getElementById("d1"); divEle.innerText // 获取文本 divEle.innerHTML // 获取html代码,包括文本 divEle.innerText = "1" divEle.innerHTML = "<p>2</p>" divEle.setAttribute("age","18") divEle.getAttribute("age") divEle.removeAttribute("age")
(6)获取用户输入
标签对象.value:适用于input/select/textarea标签
var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);
(7)class的操作
- className:获取所有样式类名
- classList.remove(cls):删除指定类
- classList.add(cls):添加类
- classList.contains(cls):存在返回true,否则返回false
- classList.toggle(cls):切换,存在就删除,否则添加
(8)css属性操作
// 语法
obj.style.属性名
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
// 对含有中横线的CSS属性,将中横线后面的第一个字母换成大写
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
三、事件
HTML事件触发浏览器中的动作(action)
(一)常用事件
- onclick:当用户点击某个对象时调用的事件句柄
- onblclick:当用户双击某个对象时调用的事件句柄
- onfocus:元素获得焦点
- onblur:元素失去焦点
- onchange:域的内容被改变,比如select下拉选择标签
- onkeydown:某个键盘按键被按下
- onkeypress:某个键盘按键被按下并松开
- onkeyup:某个按键被松开
- onload:页面或图像完成加载
- onmousedown:鼠标按钮被按下
- onmousemove:鼠标被移动
- onmouseout:鼠标从某元素移开
- onmouseover:鼠标移到某元素之上
- onselect:在文本框中的文本被选中时发生
- onsubmit:确认按钮被点击,使用的对象是form
(二)绑定方式
(1)行内绑定
this是实参,表示触发事件的当前元素
函数定义过程中的ths是形参
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
(2)标签查找动态绑定
<div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵";
}
</script>
(day46)DOM、BOM、事件的更多相关文章
- js自定义事件、DOM/伪DOM自定义事件
一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...
- 漫谈js自定义事件、DOM/伪DOM自定义事件
一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...
- DOM&BOM笔记
day01正课:1. DOM概述2. ***DOM树3. *查找 1. DOM概述: DHTML:动态网页技术的统称 DHTML=HTML+CSS+JS 鄙视题: HTML XHTML DHTML X ...
- 10-JavaScript之DOM的事件操作
JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...
- 前端 ----关于DOM的事件操作
关于DOM的事件操作 一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for ...
- python 全栈开发,Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)
昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...
- 前端基础 DOM & BOM
推荐阅读:http://www.cnblogs.com/yuanchenqi/articles/6893904.html#_label3 BOM对象 window 对象 所有浏览器都支持 window ...
- 前端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 ...
- jquery技巧之让任何组件都支持类似DOM的事件管理
本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法 ...
- 关于动态生成dom绑定事件失效的原因
之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试 ...
随机推荐
- ES6-Symbol.iterator 迭代器
一个数据结构只要部署了Symbol.iterator属性就能使用 for...of遍历 与 ...运算符 操作 Object身上没有Symbol.iterator,当直接使用时会报错 let obj ...
- golang实战--家庭收支记账软件(面向过程)
1.开发流程 2.目标 模拟实现一个基于文本界面的(家庭记账软件) : 初步掌握编程技巧和调试技巧: 主要包含以下知识点:局部变量和基本数据类型.循环语句.分支语句.简单屏幕格式输出.面向对象编程: ...
- idea2019最新注册码(亲测有效)
序言 最近发现经常用的idea注册用的License Server 又不能用了,估计是被"约谈了".内容如下: 虽然Community版本是免费使用的,但是在使用的过程中会出现各种 ...
- Linux iSCSI 磁盘共享管理
Linux iSCSI 磁盘共享管理 iSCSI 服务是通过服务端(target)与客户端(initiator)的形式来提供服务.iSCSI 服务端用于存放存储源的服务器,将磁盘空间共享给客户使用,客 ...
- Python 学习 第15篇:日期和时间
datetime模块中包含五种基本类型:date.time.datetime.timedelta和tzinfo,tz是time zone的缩写,tzinfo用于表示时区信息. 一,date类型 dat ...
- 如何通过 Freemark 优雅地生成那些花里胡哨的复杂样式 Excel 文件?
欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...
- Python - 常规操作Excel - 第二十六天
前言 作为一名资深程序员,通过代码熟练操作Excel是必不可少的技能,本章主要讲解Python通过openpyxl第三方库(官方文件说明)对Excel进行操作,使Excel程序化操作更为简单快捷. o ...
- Java面向对象——三大特性
Java面向对象——三大特性 摘要:本文主要介绍了面型对象的三大特性. 封装 什么是封装 封装,就是指一个类隐藏了对象的属性和实现细节,对自己的数据和方法进行访问权限控制,只允许某些类和对象进行访问和 ...
- MySQL5.7增量备份恢复全实战
一. 简介 1. 增量备份 增量备份是指在一次全备份或上一次增量备份后,以后每次的备份只需备份与前一次相比增加或者被修改的文件.这就意味着,第一次增量 备份的对象是进行全备后所产生的增加和修改的文件; ...
- Flask--g属性
目录 Flask之g属性 使用 session,flash,g的区别 Flask之g属性 专门用来存储用户信息的g对象,g的全称的为global g对象在一次请求中的所有的代码的地方,都是可以使用的 ...