JavaScript（3）DOM和BOM

1，BOM

1.1什么是BOM

BOM(browser object model)浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心内容是Windows。BOM由一系列相关的对象构成，并且每个对象都提供了很多的方法与属性。

1.2BOM的结构

1.3 window对象

window对象是浏览器顶级对象，它具有双重角色。

1. 它是JavaScript访问浏览器窗口的一个接口对象
2. 它是一个全局对象，所有定义在全局作用域的变量,函数都是它的属性或方法。由于所有全局属性和方法都属于window对象，因此在调用时可以省略window。如在调用alert()方法时，可以写成window.alert(),单通常都会直接写alert()。

1.4常用方法

		window.alert('a'); //用于页面弹出一个警告框，一般用来调试程序
        window.confirm('提示信息'); //消息确认提示框，有<确定/取消>两种按钮
        

1.5常用的事件

①页面加载

		window.onload = function (){}  //传统方式加载。当文档内容完全加载完成后会触发该事件-即调用处理函数。window.onload是传统事件注册方式，只会调用一，如果在页面中写了多个事件，只会执行最后一个加载事件。
        window.addEventListener('load',function () {})   //监听事件的加载
        window.addEventListener('DOMContentLoaded',function () {})  //监听事件方式加载

②调整窗口大小

window.onresize = function (){} //1,窗口的大小发生变化就会触发此事件。2，当使用这个事件来实现响应式布局时可以使用window。innerWidth属性获取当前屏幕的宽度
//示例:
		window.onresize = function (){
            console.log('当前窗口宽度' + window.innerWidth);
            console.log('当前窗口高度' + window.innerHeight);
        } 

随着窗口变大变小，会不断输出当前的窗口大小。

1.6定时器方法

window提供了两种定时器方法

• setTimeout()

		window.setTimeout(回调函数,延迟毫秒数) //延迟x毫秒后，执行回调函数
        /*
        * window对象可以省略
        * 回调函数可以直接写在定时器方法内，也可以只写方法名
        * 延迟的单位是毫秒，默认为0标识立即执行
        * 一般会给定时器一个名称
        * */

• setInterval()

window.setInterval(回调函数,执行时间)  //每隔x时间后，执行一次

1.7location对象

①什么是location
window对象中提供了location属性，该属性用于获取或设置浏览器地址中的location对象。
URL(Uniform Resource Location)叫统一资源定位符，是互联网上标准资源的地址。它由以下几部分组成

②location属性

③location方法

方法	返回值
assign()	和href一样跳转页面
replace()	替换当前页面，不记录历史，无法进行后退
reload()	重新加载页面，相当于按f5，如果参数为true，相当于按ctrl＋f5

1.8navigator对象

navigator对象包含有关浏览器的信息。

		navigator.plugins  //获取当前浏览器安装的插件
        navigator.userAgent  //获取当前的浏览器信息

2，DOM

2.1DOM是什么

DOM一般指文档对象模型。文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格

2.2 DOM树

DOM 把XML文档视为一种树结构，这种树结构被称为节点树。

2.3 节点

节点树中的节点彼此之间都有等级关系。父、子和同级节点用于描述这种关系。父节点拥有子节点，位于相同层级上的子节点称为同级节点。在节点树中，顶端的节点成为根节点 根节点之外的每个节点都有一个父节点 节点可以有任何数量的子节点 叶子是没有子节点的节点 同级节点是拥有相同父节点的节点 下面的图片展示出节点树的一个部分，以及节点间的关系：因为 XML 数据是按照树的形式进行构造的，所以可以在不了解树的确切结构且不了解其中包含的数据类型的情况下，对其进行遍历。

2.4获取元素

①根据id获取
getElementById：参数字符串，返回值是对应元素名的对象。调用document。
②根据标签名获取元素
getelEmentsByTagName：参数是标签的字符串，返回值是同名元素对象组成的数组。
③元素对象内部获取标签元素
获取元素对象的内部，本身也可以通过标签获取元素方法，通过连续打点调用。目的是缩小元素范围与css中的后代选择器类似。
④根据name属性获取元素
getElementByName：参数是字符串，返回值是NodeList相同元素对象组成的数组。
⑤根据class属性获取元素
getElementByClassName：参数是字符串class属性值，返回值是一个相同属性值的集合数组。
⑥根据选择器获取元素
方法1:调用document对象的 querySelector方法，通过css 中的选择器去选取第一个符合条件的标签元素。
方法2:调用document对象的querySelectorAll方法，通过css中的选择器去选取所有符合条件的标签元素。

2.5操作元素

①改变内容

elem.hasAttribute() //判断是否包含属性
elem.removeAttribute()  //移除属性

②表单属性
dom对象表单属性用于设置或返回元素的表单属性值。form属性用于指定将包含的一个或多个表单。
③表单元素

属性	说明
type	表单元素类型
value	表单元素值
checker	表单元素选中状态
selected	表单元素选择状态
disabled	表单元素禁用开关

④样式元素

属性	使用	说明
style	element.style	操作行内样式
className	elemen.className	操作类名样式

⑤操作属性
对属性的操作可以设置属性值，也可以获取属性值。

• setAtrribute()
  对象名称.setAtrribute('属性名‘，’属性值‘)

• getAtrribute() 用于获取对象中的指定属性名称的值。
  属性值 = 对象.getAtrribute(‘属性名’)

• removeAttribute() 用于删除对象中指定的属性
  对象.remove.Attribute(‘属性名’)

• 自定义属性

获取方式	返回
element.dataset.属性	属性值
element.dataset[‘属性’]	属性值

2.6DOM事件

①什么是事件
所谓事件就是指文档或浏览器窗口中发生的一些特定的交互瞬间。JavaScript与HTML之间的交互就是通过事件来实现的。对于web应用来说，鼠标点击，鼠标移动，按下键盘某个键都是属于事件，而这些相应操作就会触发相应的响应机制来进行事件处理。
②事件的要素

• 事件：触发事件的元素
• 事件类型：触发了哪种类型的事件，如click，mouseover，focus，keyup
• 事件处理程序：事件触发后要执行的程序代码，通常是一个函数。

③事件的类型

鼠标事件	触发条件
onclick	鼠标左键点击时触发
ondblclick	鼠标双击时触发
onmouseover	鼠标经过时触发
onmouseout	鼠标离开时触发
onmousemove	鼠标移动时触发
onmouseup	鼠标按键弹起时触发
onmmousedown	鼠标按键按下时触发
onfocus	获取鼠标焦点时触发
onblur	失去鼠标焦点时触发
onchange	文本框内容改变时触发
onselect	文本框内容被选中时触发
onload	网页加载时触发