javascript dom学习笔记

一、获取页面中元素的几种方式
获取元素方法    说明
document.getELementById(“ID选择器”)    根据ID获取
document.getElementsByTagName(“标签名”)    根据标签名获取
document.getElementsByClassName(“类名”)    通过H5新增的方法获取
document.querySelector(“选择器”)    这个只会返回第一个
document.querySelectorAll(“选择器”)    这个选择全部
document.body    获取body元素
document.documentElement    获取HTML元素

二.、事件属性
鼠标事件    说明
onfocus    获取焦点
onblur    失去焦点
onclick    鼠标点击
onmouseover    鼠标经过
onmouseout    鼠标离开
onmousemove    鼠标移动触发
onmouseup    鼠标弹起触发
onmousedown    鼠标按下触发
属性方法    说明
className = “类名”    添加类名,会覆盖原来的类名，可以一次增加多个类名
element.dataset.自定义方法    H5新增的获取自定义属性的方法
element.属性    获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’)    获取属性；主要获得自定义的属性（标准）–(Attribute是属性的意思)
element.属性    设置内置属性值（元素本身自带的属性）
element.setAttribute(‘属性’, ‘值’)    设置属性；主要针对于自定义属性
element.removeAttribute(‘属性’)    删除属性；主要针对于自定义属性

三、节点
属性方法    说明
parentNode.parentNode    获取父节点
parentNode.childNodes    获取所有的子节点 (包含元素节点和文本节点)
parentNode.children    获取所有的子元素节点 (他只返元素节点，不包括文本节点)
parentNode.firstChild    获取第一个子节点 (包含元素节点和文本节点)
parentNode.firstElementChild    获取第一个子元素节点 (他只返回元素节点，不包括文本节点)
parentNode.lastChild    获取最后一个子节点 (包含元素节点和文本节点)
parentNode.lastElementChild    获取最后个子元素节点 (他只返回元素节点，不包括文本节点)
parentNode.nextSibling    获取下一个兄弟节点 (包含元素节点和文本节点等等)
parentNode.nextElementSibling    获取下一个兄弟元素节点 (只返回元素节点)
parentNode.previousSibling    获取上一个兄弟节点 (包含元素节点和文本节点等等)
parentNode.previousElementSibling    获取上一个兄弟元素节点 (只返回元素节点)