1.获取页面元素可以使用以下几种方式:
根据ID获取:
使用getElementById()方法可以获取带有Id的元素对象
根据标签名获取:
使用getElementsByTagName()方法可以返回带有指定标签名的对象集合
通过HTML5新增的方法获取:
1.document.getElementsByClassName('类名'):根据类名获取某些元素集合
2.document.querySelector('选择器'):返回指定选择器的第一个元素对象
3.ocument.querySelectorAll('选择器'):根据指定选择器返回
特殊元素获取
1.获取body元素:
document.body
2.获取html元素:
document.documentElement
2.事件基础:
1.事件是由三部分组成 事件源 事件类型 事件处理程序
(1)数据源:事件被触发的对象
(2)事件类型:如何触发 什么事件 比如鼠标点击 还是鼠标经过 还是键盘按下
(3)事件处理程序:通过一个函数赋值的方式
节点操作:
为什么要学节点:
获取元素通常使用两种方式:
1.利用DOM提供的方法获取元素
document.getElementById()
document.getElementByTagname()
document.querySelector()等
逻辑性不强、繁琐
2.利用节点层级关系获取元素
利用父子兄弟关系获取元素。逻辑性强,兼容性差
节点概述:
网页中所有内容都是节点(标签、属性、文本、注释等jie),在DOM中,节点使用node来表示
一般的,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性
元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3(文本节点包含文字、空格、换行等)
父级节点
node.parentNode
子节点
parentNode.childNodes:所有的子节点包含元素节点文本节点等
如果只想获得里面的元素节点,则需要专门处理。一般不提倡使用
parentNode.children:返回所有子元素节点。只返回子元素节点
获取第一个和最后一个子节点
parentNode.firstChild:获取元素的第一个子节点,不管是文本节点还是元素节点
parentNode.lastChild:获取元素的最后一个子节点,不管是文本节点还是元素节点
parentNode.firstElementChild:返回第一个子元素节点,找不到则返回null
parentNode.lastElementChild:返回最后一个子元素节点,找不到则返回null
但是这两个有兼容性问题,仅支持ie9以上使用
实际开发中我们使用
兄弟节点
获取下一个兄弟节点
nextSibling:包含元素节点 文本节点等
nextElementSibling:得到下一个兄弟元素节点,兼容性差仅支持ie9以上
获取上一个兄弟节点
previousibling:包含元素节点 文本节点等
previousElementSibling:得到上一个兄弟元素节点,兼容性差仅支持ie9以上
创建节点
document.createElement('元素')
添加节点
node.appendChild(child):将一个节点添加到指定父节点的子节点列表末尾
node.insertbefore(child,指定元素)将一个节点添加到父节点的指定子节点前面
删除节点
node.removeChild(child)