Dom前置知识

Dom文档对象模型

1. Dom

1.1 概述

image-20230301143346757

1.2 Dom树

image-20230301143358677

2. 获取元素

2.1 获取页面元素原因

image-20230301143417894

2.2 根据 id 获取

  • var idName document.getElementById(‘idName’);

image-20230301143441641

2.3 根据标签名获取

  • var tagName=document.getElementByTagName(‘tagName’);

image-20230301143504790

2.4 H5新增获取元素方式

image-20230301143554023

2.5 获取特殊元素(body,html)

image-20230301143610290

3. Dom事件

3.1 事件基础

  • 3.11 事件源(谁):触发事件的元素
  • 3.12 事件类型(什么事件): 例如 click 点击事件
  • 3.13 事件处理程序(做啥):
    事件触发后要执行的代码(函数形式),事件处理函数

image-20230301143636854

3.2 事件步骤

  • 3.21 获取事件源
  • 3.22 绑定事件
  • 3.23 编写事件程序(函数赋值)

image-20230301143653707