JavaScript中BOM,DOM和事件的用法详解

目录
  • BOM
    • 概念
    • 对象组成
    • Window：窗口对象
    • Location：地址栏对象
    • History：历史记录对象
  • DOM
    • 概念
    • W3C DOM 标准被分为 3 个不同的部分
    • 核心DOM模型
    • HTML DOM
  • 事件监听机制
    • 概念
    • 常见的事件
    • 事件简单学习

BOM

概念

BOM全称Browser Object Model浏览器对象模型，将浏览器的各个组成部分封装成对象。

对象组成

  • Window：窗口对象
  • Navigator：浏览器对象
  • Screen：显示器屏幕对象
  • History：历史记录对象
  • Location：地址栏对象

Window：窗口对象

方法

与弹出框有关的方法

alert() 显示带有一段消息和一个确认按钮的警告框。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 如果用户点击确定按钮，则方法返回true 如果用户点击取消按钮，则方法返回false prompt() 显示可提示用户输入的对话框。 返回值：获取用户输入的值

与打开关闭有关的方法

close() 关闭浏览器窗口。 谁调用我 ，我关谁 open() 打开一个新的浏览器窗口 返回新的Window对象

与定时器有关的方式

setTimeout() 在指定的毫秒数后调用函数或计算表达式。

参数：

  • js代码或者方法对象
  • 毫秒值

返回值：唯一标识，用于取消定时器

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 clearInterval() 取消由 setInterval() 设置的 timeout。

属性

获取其他BOM对象

history location Navigator Screen:

获取DOM对象

document

特点

Window对象不需要创建可以直接使用 window使用。 window.方法名(); window引用可以省略。  方法名();

Location：地址栏对象

创建(获取)：

window.location location

方法：

reload() 重新加载当前文档。刷新

属性

href 设置或返回完整的 URL。

History：历史记录对象

创建(获取)：

window.history history

方法：

back() 加载 history 列表中的前一个 URL。 forward() 加载 history 列表中的下一个 URL。 go(参数) 加载 history 列表中的某个具体页面。

参数：

正数：前进几个历史记录 负数：后退几个历史记录

属性

length 返回当前窗口历史列表中的 URL 数量。

DOM

概念

DOM全称Document Object Model 文档对象模型，将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。

W3C DOM 标准被分为 3 个不同的部分

1.核心 DOM - 针对任何结构化文档的标准模型

Document：文档对象 Element：元素对象 Attribute：属性对象 Text：文本对象 Comment:注释对象 Node：节点对象，其他5个的父对象

2.XML DOM - 针对 XML 文档的标准模型

3.HTML DOM - 针对 HTML 文档的标准模型

核心DOM模型

Document：文档对象

创建(获取)：在html dom模型中可以使用window对象来获取

1. window.document

2. document

方法：

1.获取Element对象：

  • getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
  • getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
  • getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
  • getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

2.创建其他DOM对象：

createAttribute(name) createComment() createElement() createTextNode()

Element：元素对象

获取/创建：通过document来获取和创建

方法

1. removeAttribute()：删除属性

2. setAttribute()：设置属性

Node：节点对象，其他5个的父对象

特点：所有dom对象都可以被认为是一个节点

方法

CRUD dom树：

appendChild()：向节点的子节点列表的结尾添加新的子节点。

removeChild()    ：删除（并返回）当前节点的指定子节点。

replaceChild()：用新节点替换一个子节点。

属性

parentNode 返回节点的父节点。

HTML DOM

  • 标签体的设置和获取：innerHTML
  • 使用html元素对象的属性
  • 控制元素样式

使用元素的style属性来设置

如： //修改样式方式1 div1.style.border = "1px solid red"; div1.style.width = "200px"; //font-size--> fontSize div1.style.fontSize = "20px";

提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

事件监听机制

概念

概念：某些组件被执行了某些操作后，触发某些代码的执行。

  • 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
  • 事件源：组件。如： 按钮 文本输入框...
  • 监听器：代码。
  • 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。

常见的事件

点击事件

onclick：单击事件

ondblclick：双击事件

焦点事件

onblur：失去焦点

onfocus:元素获得焦点。

加载事件

onload：一张页面或一幅图像完成加载。

鼠标事件

  • onmousedown 鼠标按钮被按下。
  • onmouseup 鼠标按键被松开。
  • onmousemove 鼠标被移动。
  • onmouseover 鼠标移到某元素之上。
  • onmouseout 鼠标从某元素移开。

键盘事件

  • onkeydown 某个键盘按键被按下。
  • onkeyup 某个键盘按键被松开。
  • onkeypress 某个键盘按键被按下并松开。

选择和改变

  • onchange 域的内容被改变。
  • onselect 文本被选中。

表单事件

  • onsubmit 确认按钮被点击。
  • onreset 重置按钮被点击。

事件简单学习

功能： 某些组件被执行了某些操作后，触发某些代码的执行。

造句：  xxx被xxx,我就xxx 我方水晶被摧毁后，我就责备对友。 敌方水晶被摧毁后，我就夸奖自己。

如何绑定事件

  • 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
  • 事件：onclick--- 单击事件
  • 通过js获取元素对象，指定事件属性，设置一个函数

代码：

	<body>
		<img id="light" src="img/off.gif"  onclick="fun();">
		<img id="light2" src="img/off.gif">

		<script>
			function fun(){
				alert('我被点了');
				alert('我又被点了');
			}

			function fun2(){
				alert('咋老点我？');
			}

			//1.获取light2对象
			var light2 = document.getElementById("light2");
			//2.绑定事件
			light2.onclick = fun2;

		</script>
	</body>

案例1：电灯开关

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>电灯开关</title>

</head>
<body>

<img id="light" src="img/off.gif">

<script>
	/
		分析：
			1.获取图片对象
			2.绑定单击事件
			3.每次点击切换图片
				 规则：
					 如果灯是开的 on,切换图片为 off
					 如果灯是关的 off,切换图片为 on
				 使用标记flag来完成

	 /

	//1.获取图片对象
	var light = document.getElementById("light");

	var flag = false;//代表灯是灭的。 off图片

	//2.绑定单击事件
	light.onclick = function(){
		if(flag){//判断如果灯是开的，则灭掉
			light.src = "img/off.gif";
			flag = false;

		}else{
			//如果灯是灭的，则打开

			light.src = "img/on.gif";
			flag = true;
		}

	}

</script>
</body>
</html>

效果如下：

以上就是JavaScript中BOM,DOM和事件的用法详解的详细内容，更多关于JavaScript BOM DOM 事件的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JavaScript的DOM与BOM的区别与用法详解

    JavaScript的DOM与BOM的区别与用法详解

    目录 1. 简述:何为DOM,何为BOM? 2. DOM及其相关操作 2.1DOM树 2.2DOM的一些常见的操作元素方法 获取节点的DOM方法 获取/设置元素的属性值的DOM方法 创建节点(Node)的DOM方法 增添节点的DOM方法 删除节点的DOM方法 DOM常见的一些属性 3. BOM及其相关操作 3.1 BOM总述 3.2 BOM常见对象的介绍 window对象 location对象 history对象 navigator对象 总结 1. 简述:何为DOM,何为BOM? 在文章开始之初

  • Javascript基础知识（三）BOM，DOM总结

    window对象: 打开和关闭窗口: window.open() 三个参数:1.载入新窗口的页面的URL 2.新窗口的名字 3.特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值. window.close() 系统对话框: 1.alert("hello world!"); 2.confirm("Are you sure?");---选择 3.prompt("你的名字是说明?",""); 时间间隔 setT

  • javascript学习笔记（三）BOM和DOM详解

    javascript学习笔记（三）BOM和DOM详解

    js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W3C 的标准: [所有浏览器公共遵守的标准] 2. BOM 是 各个浏览器厂商根据 DOM 在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] 3. window 是 BOM 对象,而非 js 对象: DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API). BOM

  • 实现JavaScript的组成----BOM和DOM详解

    我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了很多对象,用来访问浏览器的功能,这些功能于网页内容无关(这些是DOM的事),目前,BOM已经被W3C搬入了HTML5规范中. window对象: BOM的core,表示浏览器的一个实例,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在

  • JavaScript中BOM和DOM详解

    目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM事件操作 鼠标事件 键盘事件 触屏事件 特殊事件 表单事件 浏览器兼容处理 兼容性写法,封装工具 BOM(浏览器对象模型)

  • JavaScript中BOM,DOM和事件的用法详解

    JavaScript中BOM,DOM和事件的用法详解

    目录 BOM 概念 对象组成 Window:窗口对象 Location:地址栏对象 History:历史记录对象 DOM 概念 W3C DOM 标准被分为 3 个不同的部分 核心DOM模型 HTML DOM 事件监听机制 概念 常见的事件 事件简单学习 BOM 概念 BOM全称Browser Object Model浏览器对象模型,将浏览器的各个组成部分封装成对象. 对象组成 Window:窗口对象 Navigator:浏览器对象 Screen:显示器屏幕对象 History:历史记录对象 Lo

  • js中hasOwnProperty的属性及实例用法详解

    1.js不会保护hasOwnProperty被非法占用,如果一个对象碰巧存在这个属性, 就需要使用外部的hasOwnProperty 函数来获取正确的结果. 2.当检查对象上某个属性是否存在时,hasOwnProperty 是唯一可用的方法. 实例 var foo = { hasOwnProperty: function() { return false; }, bar: 'Here be dragons' }; foo.hasOwnProperty('bar'); // 总是返回 false

  • JavaScript第七种数据类型Symbol的用法详解

    目录 一.什么是Symbol 二.作为属性名的Symbol 三.Symbol中的方法 1.Symbol.for() 2.Symbol.keyFor() 一.什么是Symbol Symbol是ES6中引入的一种新的基本数据类型,用于表示一个独一无二的值.它是JavaScript中的第七种数据类型,与undefined.null.Number(数值).String(字符串).Boolean(布尔值).Object(对象)并列. Symbol特点: Symbol的值是唯一的,用来解决命名冲突问题 Sy

  • JS中正则表达式全局匹配模式 /g用法详解

    本文章来详细介绍js中正则表达式的全局匹配模式 /g用法,代码如下: var str = "123#abc"; var re = /abc/ig; console.log(re.test(str)); //输出ture console.log(re.test(str)); //输出false console.log(re.test(str)); //输出ture console.log(re.test(str)); //输出false 在创建正则表达式对象时如果使用了"g&q

  • Python 中 Virtualenv 和 pip 的简单用法详解

    本文介绍了Python 中 Virtualenv 和 pip 的简单用法详解,分享给大家,具体如下: 0X00 安装环境 我们在 Python 开发和学习过程中需要用到各种库,然后在各个不同的项目和作品里可能用的版本还不一样,正因为有这种问题的存在才催生了virtualenv的诞生.virtualenv 可以在电脑上创建一个虚拟环境,可以针对每一个项目创建一个虚拟环境,这样就不用担心各个不同的项目用不同版本的库的时候出现的冲突了. 下面的内容只适用于 Linux/OSX,未经 Windows 环

  • JavaScript中windows.open()、windows.close()方法详解

    windows.open()方法详解: window.open(URL,name,features,replace)用于载入指定的URL到新的或已存在的窗口中,并返回代表新窗口的Window对象.它有4个可选的 参数: URL:一个可选的字符串,声明了要在新窗口中显示的文档的 URL.如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档. name:一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字.字母和下划线,该字符声明了新窗口的名称.这个名称可以用作标记

  • 有关C++中随机函数rand() 和srand() 的用法详解

    一.rand() 函数名:   rand 功   能:   随机数发生器 用   法:   int rand(void); 所在头文件: stdlib.h 函数说明 : rand()的内部实现是用线性同余法做的,它不是真的随机数,因其周期特别长,故在一定 的范围里可看成是随机的. rand()返回一随机数值的范围在0至RAND_MAX 间.RAND_MAX的范围最少是在32767之间(int).用 unsigned int 双字节是65535,四字节是4294967295的整数范围.0~RAND

  • Java中volatile关键字的作用与用法详解

    volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在Java 5之后,volatile关键字才得以重获生机. volatile 关键字作用是,使系统中所有线程对该关键字修饰的变量共享可见,可以禁止线程的工作内存对volatile修饰的变量进行缓存. volatile 2个使用场景: 1.可见性:Java提供了volatile关键字来保证可见性. 当一个共享变量被volatile修饰时,它会保证修

  • 基于JavaScript中字符串的match与replace方法(详解)

    基于JavaScript中字符串的match与replace方法(详解)

    1.match方法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. match()方法的返回值为:存放匹配结果的数组. 2.replace方法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. replace方法的返回值为:一个新的字符串. 3.说明 以上2个方法的参数在使用正则表达式时主要添加全局g,这样才能对字符串进行全部匹配或者替换. 示例代码: <!DOCTYPE html> <html lang

  • python 函数中的内置函数及用法详解

    python 函数中的内置函数及用法详解

    今天来介绍一下Python解释器包含的一系列的内置函数,下面表格按字母顺序列出了内置函数: 下面就一一介绍一下内置函数的用法: 1.abs() 返回一个数值的绝对值,可以是整数或浮点数等. print(abs(-18)) print(abs(0.15)) result: 18 0.15 2.all(iterable) 如果iterable的所有元素不为0.''.False或者iterable为空,all(iterable)返回True,否则返回False. print(all(['a','b',

随机推荐