BOM对象和DOM对象

BOM对象和DOM对象简单概述

BOM对象（Browser Object Model），即浏览器中的对象。

window：窗口对象，可以用来控制当前窗口，或者打开新的窗口。

–在浏览器中window对象与global对象等价；
–所有的全部对象都是window对象的属性；
–window.open("url")-打开新的窗口；
–弹出对话框的三个方法：
- alert（弹出框只有一个确定）
- confirm（弹出框有一个确定和一个取消，确定会返回true，取消会返回false）
- prompt（弹出框有一个确定和一个取消，还有一个输入框，返回的是输入的内容）
–document也是window对象的属性之一
–延时函数：JS内置定时器
单次定时：setTimeout(函数，时间)，指在多少时间后执行函数，函数只执行一次。
重复定时：setInterval(函数，时间)，指过多少时间重复执行函数，函数一直执行。

navigator：浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。
–常用navigator.userAgent：由客户机发送服务器的user-agent头部的值，我们一般用这个值来判定用户所使用的是什么浏览器，用作兼容性处理。

screen：屏幕对象，用来获取屏幕相关信息，不常用

history：历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以用来前进或后退一个页面
–history.forward()和history.back()我们可以前进或后退一个页面
–history.go(n)可以一次前进或后退多页

location：地址对象，可以用来获取当前URL的信息
–location.href属性用来显示当前页面的地址

document.write(location.href);  //返回当前页面的整个URL  

–location.reload(); 用来刷新页面

localStorage/sessionStorage：存储对象，可以用来存储数据，和cookie相似，区别是它是为了更大容量存储设计的，在使用上也更加方便
–具备四个接口：setItem（设置）/getItem（得到）/removeItem（移除）/clear（清除）
–可以通过事件来监听数据的变化
–localStorage:永久生命周期，不同标签页面可以共享
–sessionStorage:会话生命周期，不同标签页面无法共享

DOM对象（Document Object Model），即文档对象模型

HTML DOM对象
–在HTML中，一个节点即为一个对象

–通过console.dir可在控制台中展开一个DOM对象
–所有的DOM对象都继承与HTML Element类

document
document对象代表着我们的文档，我们可以通过以下方法来获取标签内容：
–getElementById ( )：通过ID属性获取对象，当页面上有重复的id的对象时，只能获取第一个；
–getElementsByClassName ( ) ：通过class属性获取对象；
–getElementsByTagName ( ) ：通过标签名获取对象；
–getElementsByName ( )：通过name属性获取对象，只对支持name属性的元素有效，一般常用在获取input内容。

操作style属性
–可以通过增加style属性修改对象的样式；
–对style的修改会以内联样式的形式在DOM树上显示；
–注意CSS名称的转换，如line-height->lineHeight。

操作class
-通过className直接指定对象的CSS类，注意的是如果加入一个CSS类，前面要加一个空格。
-通过classList对对象的CSS类进行操作–不支持ie8以下
–classList.add 添加一个CSS类
–classList.removre 移除一个CSS类
–classList.contains 查看某个CSS类是否存在

操作内容
–通过innerHTML改变对象内容的内容
–通过outerHTML改变整个对象（不推荐）

操作属性
–setAttribute设置属性

target.setAttribute("id"); //可以得到id的值

–getAttribute获取属性

target.getAttribute("id","aaaa"); //可以设置id的值为aaa

也可以设任意属性名称和值。
–attributes获取所有的属性清单
标签自带的属性可以使用a.href来设置，不自带的不行

Element 对象

常用的属性 / 方法 描述 element.appendChild() 向元素添加新的子节点，作为最后一个子节点。 element.removeChild() 从元素中移除子节点。 element.replaceChild() 替换元素中的子节点 element.remove() 移除元素 element.append() 添加元素

-新建对象:document.createElement
-删除对象:Element.remove
-添加对象:Element.append
其他的属性和方法详见w3cschool。

事件Event
事件是指动态响应的函数，如：
–当用户点击鼠标时的响应函数
–当用户敲击键盘时的响应函数
每个事件函数都有一个事件对象作为参数，该对象包含了事件的信息，如:
–用户按下的鼠标在屏幕的哪个位置
–用户敲击的是键盘上的哪个键

事件句柄的绑定有两种方式：
-直接写在HTML标签上：
<div onclick="alert('abc')"></div>
-通过JavaScript获取到元素，在通过addEventListener添加函数

<div id="myDiv"></div><script type=""tetx/javascript">    var myDiv=document.getElementById("myDiv");    myDiv.addEventListener('click',function(){           alert('abc');        });</script>

常用的鼠标事件：

常用的属性 / 方法 描述 onclick 单击事件 ondbclick 双击事件 onmousedown 鼠标在对象上按下 onmousemove 鼠标在对象上移动 onmouseup 鼠标在对象上松开

常见的键盘事件:

常用的属性 / 方法 描述 onkeydown 键盘按下 onkeyup 键盘弹起 onkeypress 键盘敲击动作

本博客仅用于记录web前端学习情况