JavaScript笔记整理5 -- JavaScript BOM对象 与 事件

BOM对象

BOM 即 Browser Object Model（浏览器对象模型）

作用：为了访问和操作浏览器各组件提供了一系列的(全局)属性和(全局)方法。
结构：

• window（浏览器窗口对象，最顶级的对象，可省略不写）
  • document（当前的文档对象）
    • DOM （文档对象模型，操作当前HTML文档）
  • history（历史对象，记录浏览器的历史访问记录）
  • location（地址栏对象，获取当前浏览器上的地址栏相关数据）
  • navigator（浏览器对象，获取浏览器的相关数据，比如浏览器名称、版本…）
  • screen （屏幕对象）

window 浏览器窗口对象

window对象的常用属性

window.innerWidth

功能：获取浏览器内部的宽度。

window.innerHeight

功能：获取浏览器内部的高度。

window.outerWidth

功能：获取浏览器外部的宽度。

window.outerHeight

功能：获取浏览器外部的高度。

Window对象的常用方法

Window.isNaN(str)

功能：判断字符串str是不是数字。
规则：将一个变量的数据类型自动转换为Number，如果是NaN，就返回true；否则，返回false

Window.parseInt(str)

功能：从一个字符串str提取整数。
提取规则：

1. 如果字符串第一个字符不是数字就会返回NaN
2. 遇到非数字就终止提取。遇到非数字就停止提取

Window.parseFloat(str)

功能：从一个字符串str提取小数。
提取规则：

1. 如果字符串第一个字符不是数字就会返回NaN
2. 如果遇到除第一个.以外的非数字就会停止提取。

Window.alert(str)

功能：弹出警告框，内容为字符串str 。

Window.prompt(str1,str2)

功能：弹出对话框，提示内容为str1，输入框初始内容为str2。

Window.confirm(str)

功能：弹出用户确认框，提示内容为str，当用户点击确定按钮时，返回ture；点击取消，返回false 。

Window.close()

功能：关闭当前浏览器窗口。

Window.open(url,name,options)

• url：要打开的窗口地址
• name：窗口的名称
• option：窗口特征（具体百度）

功能：在浏览器打开新的窗口，返回值代表当前打开的窗口对象（可用于调用close()方法）。

Window.setTimeout(code,MiliSec) 延时器

• code：要执行的代码，代码可以是一个（匿名）函数
• MiliSec：时间，单位：毫秒

功能：指定的时间MiliSec到了以后就执行一次code，且只执行一次。

• 起到延时器的作用

Window.setInterval(code,MiliSec) 定时器

• code：要执行的代码，代码可以是一个（匿名）函数
• MiliSec：时间，单位：ms（毫秒）

功能：每隔指定的时间就执行code，且无限次执行。

• 起到定时器的作用
• 在调用前一般注意要清除上一个定时器。

Window.clearInterval(timer) 清除定时器

• timer：要清除定时器的返回值

功能：清除指定的定时器。

例子如下：

<script type="text/javascript">
	var count=0;
	//定时器：开启定时器：1.调用方法 2.间隔时间
	var timer=setInterval(function(){
		console.log(++count);
		if(count==5){
			//停止定时器
			clearInterval(timer);
		}
	},1000);
	
	//延时器：只执行一次的定时器
	setTimeout(function(){
		console.log("时间到");
	},5001);

### screen 屏幕对象 #### screen对象的常用属性 ##### screen.width 功能：获取屏幕的宽度。 ##### screen.height 功能：获取屏幕的高度。 - 除了windows的任务栏以外的高度。

navigator 浏览器对象

navigator对象的常用属性

navigator.appName

功能：获取浏览器的名称。

• 可用于判断浏览器的阵营，例如if(navigator.appName=="Microsoft Internet Explorer")判断浏览器是否为IE浏览器。

navigator.appVersion

功能：获取浏览器的版本。

location 地址栏对象

location对象的常用属性

location.href

功能：设置或者获取到浏览器地址的URL地址

• 常用于实现页面跳转

location对象的常用方法

location.reload()

功能：刷新当前浏览器。

history 历史对象

history对象的常用属性

history.length

功能：返回当前浏览器历史列表里的URL数量。

history对象的常用方法

history.back()

功能：加载history列表中的前一个URL。

history.forward()

功能：加载history列表中的下一个URL。

history.go(n)

功能：加载history列表中的某个具体页面。

• n位数字，表示前进的页面数。
• history.go(0) 相当于 location.reload()刷新当前页面
• history.go(-1) 相当于 history.history.back() 后退
• history.go(1) 相当于 history.forward() 前进

document 当前文档对象

DOM对象

DOM 即 Document Object Model（文档对象模型）
作用：为了操作HTML文档提供一些属性和方法。

• 属于w3c

对不同方面的区别：

• JS主要是对HTML文件进行增删改查
• PHP主要是对数据库进行增删改查

DOM对象的属性

document.body

功能：获取到body标签对象。

document.documentElement

功能：获取到根元素HTML标签对象。

document.forms

功能：获取到所有表单元素，返回一个集合。

document.images

功能：获取到所有图片元素，返回一个集合。

DOM对象的方法

document.getElementById(“id属性值”)

功能：id属性选择器，即通过id的属性值来获取元素，它只能获取单个元素。

docement.getElementsByTagName(“标签名”)

功能：通过标签名（例如div…）获取元素，返回数组集合。

docement.getElementsByName(“name属性值”)

功能：name属性选择器，即通过标签的name属性来获取元素，返回数组集合。

• 可以用于实现全选、反选、删除、取消功能。

document.getElementsByClassName(“class属性值”)

功能：class属性的选择器，即通过标签的class属性来获取元素，返回数组集合。

祖先对象.getElementsByTagName(“标签名”)

功能：后代元素标签选择器。

docement. createElement(“标签名”)

功能：创建标签对象，返回的是标签对象，变量名为标签的id名。

父标签对象.appendChild(标签对象)

功能：添加标签对象。

父标签对象.removeChild(标签对象)

功能：删除标签对象。

DOM对象对HTML标签内容的操作

标签对象.innerText

功能：获取或修改标签文本

标签对象.innerHTML

功能：获取或修改双标签里面的HTML内容。

DOM对象对HTML标签属性的操作

(1)查询
    标签对象.属性
    标签对象.getAttribute("属性")
(2)增、改：
    标签对象.属性=值
    标签对象.setAttribute("属性",值)
(3)删除：
    标签对象.removeAttribute("属性")

DOM对象对class属性的操作

方法：将class属性的修改为className。

格式：

1. 标签对象.className="值"
2. 标签对象.setAttribute("class","值")

DOM对象对style属性的操作–>CSS DOM

• 注意：JS只能对CSS的行内样式进行操作

      行内样式为：<标签 style="CSS样式">

      格式：标签对象.style.css属性="值"

事件

：比如当鼠标事件、键盘事件、状态改变事件…这些行为被称为事件。

• js是一门事件驱动式的脚本语言，即 当事件发生时，会被JS捕获到然后赋予其一些功能代码。

事件绑定的方式

补充：对于js事假绑定很好的解释，参考链接：js中事件绑定的几种方式

1. 行内绑定事件

：将事件写在HTML标签里。

格式：<标签 事件名="函数名()|事件的处理程序"/>

2. 动态绑定事件

：将事件名写在JS代码里面。

格式：标签对象.事件名=事件的处理程序

• 事件的处理程序一般是匿名函数
• 动态绑定关于匿名函数的解释，参考链接：js 动态绑定一定要匿名函数吗

3. 事件监听

：在js代码中给标签对象添加监听事件。

1. W3C格式
   格式：要监听的标签对象.addEvenListener('事件名',事件处理程序)

• 事件名没有on前缀，比如：click
• 事件的处理程序一般是匿名函数

2. IE格式
   格式：已监听的标签对象.attachEvent('事件名',事件的处理程序)

事件列表

onclick 当鼠标点击时

点击页面任何一处触发js事件：document.onclick

ondblclick 当鼠标双击时

onmousemove当鼠标移动时

onmouseover 当鼠标经过（悬停）时

onmouseout 当鼠标离开时

onmousedown当鼠标按下时

onmouseup当鼠标弹起时

onkeydown当键盘按下时

event.KeyCode------获取按钮的编码
String.fromCharCode(event.Keycode)------把按键转换成字符

onkeyup当键盘弹起时

onsubmit 当表单提交时

：主要用来实现表单验证（阻止表单的提交）

• 这个事件要绑定在form上。

阻止表单提交的方法：
form表单中 格式：onsubmit="return函数";
函数结果包括返回值 格式：允许提交return ture;，不允许提交return false;。

onload 当页面加载完成后

：指当body标签里面的所有标签都加载完成后再来执行JS代码。onload事件要和window对象来绑定，即window.onload

onresize 当窗口改变时

onfocus 当获取焦点时

多用于表单验证。

onblur 当失去焦点时

多用于表单验证。

onchange 当内容发生改变时

多用于select标签对象。