js的BOM和DOM

1、BOM

2、DOM

---

1、BOM:

BOM（Browser Object Model）是指浏览器对象模型，使js有能力与浏览器进行交互。

window的子对象：
location对象:

• location.href 获取url
• location.href = ‘url’ 跳转到指定页面
• location.reload() 重新加载页面

弹出框：警告框、确认框、提示框
警告框：

• alert(“语句”);

确认框：

• confirm(“语句”)

提示框：

• prompt(“请在下方输入”，“你的答案”)

---

计时相关：

• setTimeout: 指定时间之后做一件事

• clearTimeout() 指定时间后不想运行了就停止

• setInterval: 每隔多少时间做事

• clearInterval() 停止

var timer = setTimeout(function(){alert(123);},3000)
//取消setTimeout设置
clearTimeout(timer);

---

2、DOM:

DOM（Document Object Model）文档对象模型，当网页被加载时，浏览器会创建页面的文档对象模型。

DOM标准规定HTML文档中的每个成分都是一个节点（node）:

• 文档节点(document对象)：代表整个文档
• 元素节点(element对象)：代表一个元素（标签）
• 文本节点(text对象)：代表元素（标签）中的文本
• 属性节点(attribute对象)：代表一个属性，元素(标签)才有属性

查找标签：

• document.getElementById 根据ID获取一个标签
• document.getElementsByClassname 根据class属性获取
• document.getElementByTagName 根据标签名获取标签合集

间接查找：

parentElement	父节点标签元素
children	所有子标签
firstElementChild	第一个子标签元素
lastElementChild	最后一个子标签元素
nextElementSibling	下一个兄弟标签元素
previousElementSibling	上一个兄弟标签元素

事件：

onclick	当用户点击某个对象时调用的事件句柄
ondblclick	当用户双击某个对象时调用的事件句柄
onfocus	元素获得焦点
onblur	元素失去焦点。应用场景：表单验证
onchange	域的内容被改变。应用场景：表单元素（select联动）
onkeydown	某个键盘按键被按下 。应用场景：用户在最后一个输入框按下回车键，表单提交
onkeypress	某个键盘按键被按下并松开
onkeyup	某个键盘按键被松开
onload	一张页面或一副图象完成加载
onmousemove	鼠标被移动
onmousedown	鼠标按钮被按下
onmouseout	鼠标从某元素移开
onmouseover	鼠标移到某元素之上
onselect	在文本框中的文本被选中时发生
onsubmit	确认按钮被点击，使用的对象是form

绑定方式（常用）：

<div id='d1'>点我</div>
<script>
	var divEle = document.getElementById('d1');
	divEle.onclick = function(){
	this.innerText = '哈哈';
}

</script>