JavaScript核心之DOM

JavaScript核心之DOM

DOM基础之DOM是什么

详解DOM

• DOM（w3c提的一个标准）
  • DOM就是文档对象模型，是一个抽象的概念
  • 定义了访问和操作HTML文档的方法
• HTML和txt文本的区别
  • HTML是有组织的结构化文件
• 什么是DOM树
  • 浏览器将结构化的文档以“树”的结构存储在浏览器内存里
  • 每个HTML元素定义为节点
  • 这个节点有自己的属性（名称、类型、存储…）
  • 有自己的层级关系（parent，child，sibling）
• 图解DOM树

对DOM节点的一些常见操作

查找节点

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素
document.querySelector(selector)	通过css选择器器选择元素，无法选择 伪类

改变元素内容

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML元素的属性值
element.setAttribute(attribute, value)	改变 HTML元素的属性值
element.style.property = new style	改变 HTML 元素的样式

添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	可写⼊入 HTML

DOM核心之结合事件对DOM进行操作

DOM中事件的概念

• 什么是事件
  • 事件指的是在html元素上发生的事情
  • 比如图片元素被点击
  • 事件触发时，可设置触发一段js代码, 事件触发后会执行这段js代码

常见HTML事件

方法	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键可写入 HTML
onload	浏览器已经完成页面加载

怎么对事件做出反应

• 通过元素的事件属性
• 启用事件监听器
  • 什么是事件监听器
    • addEventListener给DOM对象添加事件处理程序
    • removeEventListener 删除给DOM对象的事件处理程
      序

onclick和addEventListener的区别

• onclick会被覆盖
• addEventListener可以同时注册多个，根据注册顺序，先后执行

深度剖析JS中事件机制

介绍JS事件中的机制

• 事件传播的两种机制
  • 冒泡
  • 捕获
• 图解事件捕获和事件冒泡

什么是事件代理

• 思考：父级那么多子元素，怎么区分事件本应该是哪个子元素的
  • 事件代理就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
• 怎么取消冒泡或者捕获

event.stopPropagation();

• 拓展方法

// 阻⽌止元素⾏行行为, 例例如a连接跳转
event.preventDefault()

JavaScript中的定时器

讲解JavaScript中的定时器

• 延迟执行

setTimeout(function, 毫秒)

• 停止

clearTimeout(id) // 参数必须是由 setTimeout() 返回的ID 值

• 定时执行

setInterval(function, 毫秒)

• 停止

setInterval(id) // 参数必须是由 setInterval() 返回的ID 值