DOM的理解

DOM：文档对象模型，通过DOM操作HTML的每个元素

DOM节点：HTML每个元素在JavaScript中都是一个对象，根节点是document

获取元素节点对象：

1.document.getElementById(id)——通过id获取元素

2.document.getElementsByTagName(标签名)——通过标签名获取元素——得到节点对象数组，通过遍历和下标获取节点

3.document.getElementByClassName(类名)——通过类名获取元素——得到节点对象数组，通过遍历和下标获取节点

4.通过节点之间的关系获得节点：

childNodes属性：当前节点所有直接子节点 语法：nodeObject.childNodes

firstChild:获得第一个元素 语法：nodeObject.firstChild

lastChild:获得最后一个元素 语法：nodeObject.lastChild

parentNode:获取当前节点的父节点 语法：nodeObject.parentNode

nextSibling:获取下一个兄弟节点 语法：nodeObject.nextSibling

previousSibling:获取上一个兄弟节点 语法：nodeObject.previousSibling

验证获取节点的信息：

1.节点类型：

元素节点——<div>、<p>——1

属性节点——id、class、name属性——2

文本节点——元素中的文本内容——3

注释节点——对应html的注释——4

文档节点——表示整个文档（DOM的根节点document）——5

获取节点类型语法——nodeObject.nodeType

2.节点名称：

元素节点——HTML标签的名称（大写）

属性节点——属性的名称

文本节点——#text

文档节点——#document

获取节点名称语法：nodeObject.nodeName

3.节点值：

一般用来返回文本节点里的内容

获取节点值语法：nodeObject.nodeValue/inner Text

设置和获取属性：

获取指定属性名的属性值——object.getAttribute(属性名)

设置指定属性名的属性值——object.setAttribute(属性名，属性值)

DOM事件：

在页面中的某个操作

时间类型：

onclick:单机事件

onmousedown:按下任意鼠标键触发

onmouseout:鼠标移出元素触发

onmousemove:鼠标在元素内移动触发

onmouseup:释放鼠标触发

onmouseover:鼠标移动到元素上触发

触发事件的方式：

在标签中调用，在<script>标签中调用事件