JavaScript - DOM 操作
DOM是JavaScript操作HTML的接口，掌握DOM操作是前端开发的基础技能。
基础 DOM 查询
| 主题 | 说明 | 相关方法 |
|---|---|---|
| 选择器查询 | document.querySelector()返回单个元素、document.querySelectorAll()返回NodeList集合。 | querySelector querySelectorAll |
| 传统方法 | getElementById()、getElementsByClassName()、getElementsByTagName()、getElementsByName()。 | getElementById getElementsByClassName |
| 元素关系 | parentNode/parentElement父元素、children子元素、firstChild/lastChild首尾子节点。 | parentNode children firstChild |
| 兄弟元素 | nextSibling/previousSibling兄弟节点、nextElementSibling/previousElementSibling兄弟元素。 | nextSibling previousSibling |
基础 DOM 操作
| 主题 | 说明 | 相关方法 |
|---|---|---|
| 创建元素 | document.createElement()创建新元素、document.createTextNode()创建文本节点。 | createElement createTextNode |
| 添加删除 | appendChild()末尾添加、insertBefore()指定位置插入、remove()删除自身、removeChild()删除子元素。 | appendChild removeChild insertBefore |
| 修改元素 | innerHTML/innerText/textContent修改内容、className/classList操作类名、style操作行内样式。 | innerHTML classList style |
| 属性操作 | getAttribute()获取属性、setAttribute()设置属性、removeAttribute()删除属性、dataset数据属性。 | getAttribute dataset |
进阶 事件处理
| 主题 | 说明 | 相关关键字 |
|---|---|---|
| 事件绑定 | onclick等HTML属性绑定(不推荐)、addEventListener()事件监听、removeEventListener()移除监听。 | addEventListener removeEventListener |
| 事件对象 | event事件对象、target事件目标、currentTarget当前目标、type事件类型、preventDefault()阻止默认。 | event target preventDefault |
| 事件传播 | 捕获阶段capture、目标阶段target、冒泡阶段bubble、stopPropagation()停止传播。 | 捕获 冒泡 stopPropagation |
| 事件委托 | 将事件绑定到父元素、利用事件冒泡处理子元素事件、减少事件绑定数量提高性能。 | 事件委托 事件冒泡 |