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>标签中调用事件