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

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

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

获取元素

1.根据id获取

getElementById（‘id’）

2.根据标签名获取

getElementsByTagName（‘标签名’）方法

返回的是获取过来元素得对象集合 以伪数组的形式储存

3.根据类名获取

getElementsByClassName('类名')

返回的是获取过来元素得对象集合 以伪数组的形式储存

4.querySelector获取

返回指定选择器的第一个元素对象

querySelector（'.类名/# id名/标签名'）

5.querySelectorAll获取

返回指定选择器的所有元素对象集合  以伪数组的形式储存

6.获取body元素

7.获取html元素

事件基础

事件是由三部分组成 事件源  事件类型  事件处理程序  我们称之为时间三要素

1.事件源：事件被触发的对象

2.事件类型：如何出发

3.事件处理程序：通过一个函数赋值的方法完成

执行事件的步骤

1.获取事件源

2.注册事件（绑定事件）

3.添加事件处理程序（采取函数赋值的形式）

常见鼠标事件

操作元素

1.改变元素内容

2.改变元素属性

1.元素.属性  来改变

2.元素.setAttribute（'属性','值'）主要改变自定义属性

3.删除属性 元素.removeArribute('属性')

3.获取属性值

1.element.属性  获取属性值。

2.element.getAttribute（'属性'）

区别：

element.属性 获取内置属性值（属性本身自带的属性）

element.getAttribute（'属性'）主要获得自定义的属性（标准）我们程序员自定义的属性

总结

节点操作

一般地，节点至少拥有node Tupe（节点类型），nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点 nodeType 为 1

属性节点 nodeType 为 2

文本节点 nodeType 为 3（文本节点包含文字，空格，换行等）

我们在实际开发中，节点操作主要操作的是元素节点

1.父级节点

parentNode属性可返回某节点的父节点，注意是最近的一个父节点

如果指定的节点没有父节点则返回null

2.子级节点

note.childNodes

子节点childNodes获取的是所有的子节点包含元素节点，文本节点等等

note.children

获取的所有子元素节点（开发中常用）

3.兄弟节点

node.nextElementSibling

返回当前元素的下一个兄弟元素节点，找不到则返回null

node.previousElementSiblint

返回当前元素的上一个兄弟节点，找不到则返回null

4.添加节点

node.appendChild(child)

将一个节点添加到指定父节点的子节点列表末尾

note 父节点    child  子节点

node.insertBefore(child,指定元素)

将一个节点添加到父节点的指定子节点前面

node父节点    child直接点

5.删除节点

node.removeChild(child)

删除一个节点

6.复制节点

note.clonenNode()

复制一个节点

（false或者不写）只复制节点本身，不复制里面的子节点

（true）复制节点本身以及里面的所有子节点

监听事件注册方式

type:事件类型字符串，比如click,mouseover,注意这里不带on

listener:事件处理函数，事件发生时，会调用该监听函数

useCapture:可选参数，是一个布尔值，默认是false，学完DOM事件流后再说

删除事件方式

1.传统注册方式

eventTarget.onclick = null；

2.方式监听注册方式

①everTarget.removeEventListener(type,listener[,useCapture]);