JS操作BOM和DOM

一、JS的实现包含三个部分

1.ECMAScript(核心) 描述了JS的语法和基本对象。

2.浏览器对象模型（BOM）与浏览器交互的方法和接口

3.文档对象模型 （DOM）处理网页内容的方法和接口

二、BOM

BOM 表示的是 Browser Object Model，浏览器对象模型，BOM的核心的对象是Window对象： 由于BOM的window包含了document，因此可以直接使用window对象的document属性，从window.document我们可以知道，BOM中window对象包含了DOM对象。操作BOM就是操作BOM的window对象。

1.window对象

Window对象包含几个子对象：document、location、navigator、screen、history、frames。

window对象的方法：

alert() 显示带有一段消息和一个确认按钮的警告框。
blur() 把键盘焦点从顶层窗口移开。
clearInterval() 取消由 setInterval() 。
clearTimeout() 取消由 setTimeout()。
close() 关闭浏览器窗口。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
focus() 把键盘焦点给予一个窗口。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
prompt() 显示可提示用户输入的对话框。
scrollTo() 把内容滚动到指定的坐标。
setInterval() 按照指定的周期（毫秒）来调用函数（定时器）。
setTimeout() 在指定的毫秒数后调用函数（延时器）。

在这里我只是列举了一些常见到的或用到的方法

三、DOM

DOM可以获取到文档中所有的对象节点，其中包括：
1.文档节点
2.元素节点
3.属性节点
4.文本节点
5.注释节点

获取对象节点

        var uname = document.getElementById("div");
        //通过ID获取节点
        var uname1 = document.getElementsByClassName("shuai")[0];//返回一个数组
        //通过class名获取节点
        var uname2 = document.getElementsByName("hao")[0];//返回一个数组;
        //通过name获取节点
        var uname3 = document.getElementsByTagName("div")[0];//返回一个数组
        //通过标签获取节点
        var uname4 = document.querySelector("#div");
        //通过选择器获取节点



        parentNode//获取父节点
        childNodes;//获取所有子节点
        attributes;//获取元素的属性节点
        previousSibling;//获取上一个兄弟节点
        nextSibling;//获取下一个兄弟节点

    
        parentElement   //父元素
        previousElementSibling   //上一个兄弟元素
        nextElementSibling   //下一个兄弟元素
        children  //子元素
        firstElementChild  //第一个子元素
        lastElementChild  //最后一个子元素

DOM树
DOM事件等级
DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。
因为1级DOM标准并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。

DOM0级处理事件就是将一个函数赋值给一个事件处理属性。
DOM2级事件定义了addEventListener 和 removeEventListener两个方法，分别用来绑定和解绑事件，方法中包含三个参数
DOM3级事件：
UI事件，当用户与页面上的元素交互时触发
焦点事件，当元素获得或失去焦点时触发
鼠标事件，当用户通过鼠标在页面执行操作时触发
滚轮事件，当使用鼠标滚轮或类似设备时触发
文本事件，当在文档中输入文本时触发
键盘事件，当用户通过键盘在页面上执行操作时触发