DOM~~

1.  DOM简介

1.1  什么事DOM

文档对象模型（Document Object Model, 简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

1.2  DOM树

· 文档：一个页面就是一个文档，DOM中使用document表示

·元素：页面中的所有标签都是元素，DOM中使用element表示

·节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

 DOM把以上内容都看做是对象

2.  获取元素

2.1  如何获取页面元素

DOM在我们实际开发中主要用来操作元素

获取页面中的元素可以使用以下几种方式：

·根据ID获取

·根据标签名获取

·通过HTML5新增的方法获取

·特殊元素获取

2.2  根据ID获取

使用getElementByld（）方法可以获取带有ID的元素对象

//1.因为我们文档页面从上往下加载，所以先得有标签，所以我们script写到标签的下面
//2.get获得element元素by通过驼峰命名法
//3.参数id是大小写敏感的字符串
//4.返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
//5.console.dir 打印我们返回的元素对象  更好的查看里面的属性和方法
console.dir(timer);

2.3  根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合

document.getElementsByTagName('标签名');

注意 ：

1.  因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历

2.  得到元素对象是动态的 

//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]);
}
//3.如果页面中只有一个li 返回的还是伪数组的形式
//4.如果页面中没有这个元素返回空的伪数组的形式指定的单个元素
//5.element.getElementsBYtagName('标签名');  父元素必须是
var ol = document.getElementsByTagName('ol');  // [ol]
console.log(ol[0].getElementsByTagName('li'));
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));

还可以获取某个元素（父元素）内部所有指定标签名的子元素

element.getElementsByTagName('标签名');

注意：父元素必须是单个对象（必须指明是哪一个元素对象）获取的时候不包括父元素自己

2.4  通过HTML5新增的方法获取

1.document.getElementsByClassName('类名'); //根据类名返回元素对象集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);

2.document.querySelector('选择器');  //根据指定选择器返回第一个元素对象  切记  里面的选择器需要加符号  .box  #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);

3.document.querySelectorAll('选择器');  //根据指定选择器返回
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);

2.5  获取特殊元素（body，html）

获取body元素

1.document.body  //返回body元素对象

//1.获取body元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);

获取html元素

1.document.documentElement  //返回html元素对象

//2.获取html元素
//var htmlEle = document.documentElement;
var htmlEle = document.documentElement;
console.log(htmlEle);

3.  事件基础

3.1  事件概述

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为

网页中的每个元素都可以产生某些可以触发JavaScript的事件

//  点击一个按钮，弹出对话框
// 1.事件是有三部分组成  事件源  事件类型  事件处理程序  我们也称为事件三要素
//(1) 事件源  事件被触发的对象     谁   按钮
var btn = document.getElementById('btn');
//(2) 事件类型  如何触发  什么事件  比如鼠标点击（onclick）还是鼠标经过  还是键盘按下
//(3) 事件处理程序  通过一个函数赋值的方式完成
btn.onclick = function(){
    alert('点秋香');
}