目录
DOM简介
什么是DOM
DOM树
获取元素
如何获取页面元素
根据ID获取getElementById()
根据标签名获取getElementsByTagName()
通过 HTML5 新增的方法获取
获取特殊元素（body，html）
事件基础
事件概述
事件三要素
执行事件的步骤
常见的鼠标事件
DOM简介
什么是DOM
文档对象模型（document object model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
DOM树
文档：一个页面就是一个文档，DOM 中使用 document 表示 元素：页面中的所有标签都是元素，DOM 中使用 element 表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示DOM 把以上内容都看做是对象，有属性和方法
获取元素
如何获取页面元素
获取页面中的元素可以使用以下几种方式:
根据 ID 获取 根据标签名获取 通过 HTML5 新增的方法获取特殊元素获取
根据ID获取getElementById()
使用getElementById()方法可以获取带有 ID 的元素对象。
document.getElementById('id');
// 1.文档页面加载是从上往下的，所以先得有标签，我们的script写到标签的下面// 2. get 获得element 元素 by 通过 驼峰命名法 // 3. 参数 id是大小写敏感的字符串 // 4. 返回的是一个元素对象
// 5.console.dir();打印我们返回的元素对象，可以更好的查看里面的属性和方法
<div id="time">-4-27</div><script>var timer = document.getElementById('time');console.log(timer);console.log(typeof (timer));console.dir(timer);
根据标签名获取getElementsByTagName()
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
可以获得多个！所以element加s
document.getElementsByTagName('标签名');
1.返回的是 获取过来元素对象的集合 ，以伪数组的形式存储的2.我们想要依次打印里面的元素对象，我们可以采用遍历的方式3.如果页面中只有一个li ，返回的还是伪数组的形式
注意：
因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要 遍历。得到元素对象是动态的,比如内容变了，JS是不需要改变的，会自动变化的如果获取不到元素 , 则返回为空的伪数组(因为获取不到对象)
<body><ul><li>知否知否，应是绿肥红瘦13</li><li>知否知否，应是绿肥红瘦2</li><li>知否知否，应是绿肥红瘦3</li><li>知否知否，应是绿肥红瘦4</li><li>知否知否，应是绿肥红瘦5</li></ul><script>// 1.返回的是 获取过来元素对象的集合 ，以伪数组的形式存储的var lis = document.getElementsByTagName('li');console.log(lis);console.log(lis[0]);// 2.我们想要依次打印里面的元素对象，我们可以采用遍历的方式for (var i = 0; i < lis.length; i++) {console.log(lis[i]);}</script></body>
还可以获取某个元素(父元素)内部所有指定标签名的子元素.
element.getElementsByTagName('标签名');
注意：父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。
<ol id="ol"><li>生僻字1</li><li>生僻字2</li><li>生僻字3</li><li>生僻字4</li></ol><script>// element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素var ol = document.getElementsByTagName('ol'); // 返回的是伪数组样式的 [ol]console.log(ol[0].getElementsByTagName('li')); // 这里只有一个ol，所以ol[0]就是这一个olvar ol = document.getElementById('ol');console.log(ol.getElementsByTagName('li')); // 可以给ol加上id
通过 HTML5 新增的方法获取
1.document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
var boxs = document.getElementsByClassName('box');console.log(boxs); // [div.box, div.box]
2. document.querySelector('选择器');// 根据指定选择器返回第一个元素对象
切记：里面的选择器要加符号
var firstBox = document.querySelector('.box'); // .box 类选择器console.log(firstBox);var nav = document.querySelector('#nav'); // #nav id选择器console.log(nav);var li = document.querySelector('li'); // 标签选择器console.log(li);
3. document.querySelectorAll('选择器');// 根据指定选择器返回所有元素对象集合(还是伪数组
var allBox = document.querySelectorAll('.box');console.log(allBox); // 返回所有类命为 box的盒子var lis = document.querySelectorAll('li');console.log(lis); // 返回所有 标签名为li的盒子
所有代码运行截图为：
获取特殊元素（body，html）
获取body元素
doucumnet.body；// 返回body元素对象
var bodyEle = document.body;console.log(bodyEle);console.dir(bodyEle); // 返回的是元素对象，更好的查看对象的属性和方法
获取html元素
document.documentElement；// 返回html元素对象
var htmlEle = document.documentElement;console.log(htmlEle);
代码运行截图如下：
事件基础
事件概述
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解： 触发--- 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
事件三要素
事件是由 三部分组成：事件源，事件类型，事件处理程序。我们也称为事件三要素
事件源：事件被触发的对象（点一个按钮弹出对话框，按钮就是事件源）事件类型：如何被触发的（鼠标点击onclick，鼠标经过，键盘按下等）事件处理程序：通过一个函数赋值的方式完成 做什么事情（要弹出对话框）
案例：点击按钮弹出警示框
<body><button id="btn">唐伯虎</button><script>// 点击一个按钮，弹出对话框var btn = document.getElementById('btn'); // 获得事件源btn.onclick = function () {alert('点秋香');}</script></body>
执行事件的步骤
1. 获取事件源 //var btn = document.getElementById('btn');
2. 注册事件（绑定事件） //btn.onclick
3. 添加事件处理程序（采取函数赋值形式） //btn.onclick = function () { }
<body><div>123</div><script>// 执行事件步骤// 点击div 控制台输出 我被选中了var div = document.querySelector('div');div.onclick = function () {console.log('我被选中了');}</script></body>
