24JS15——DOM

文章目录

  • 一、DOM简介
    • 1、什么是DOM
    • 2、DOM树
  • 二、获取元素
    • 1、如何获取页面元素
    • 2、根据id获取
    • 3、根据标签名获取
    • 4、通过HTML5新增的方法获取
    • 5、获取特殊元素body html
  • 三、事件基础
    • 1、事件概述
    • 2、事件三要素
    • 3、执行事件的步骤
  • 四、操作元素
    • 1、改变元素内容
    • 2、常用元素的属性操作
    • 3、表单元素的属性操作
    • 4、样式属性操作
      • 4.1 行内样式操作
      • 4.2 类名样式操作
    • 5、操作元素总结
    • 6、排他思想
    • 7、自定义属性操作
      • 7.1 获取属性值
      • 7.2 设置元素属性值
      • 7.3 移除属性
      • 案例:tab栏切换(重点案例)
    • 8、H5自定义属性
  • 五、节点操作
    • 1、为什么学节点操作
    • 2、节点概述
    • 3、节点层次
    • 案例:新建下拉菜单

目标:
DOM简介
获取元素
事件基础
操作元素
节点操作

一、DOM简介

1、什么是DOM

24JS15——DOM_第1张图片

2、DOM树

24JS15——DOM_第2张图片
24JS15——DOM_第3张图片

二、获取元素

1、如何获取页面元素

24JS15——DOM_第4张图片

2、根据id获取

24JS15——DOM_第5张图片

3、根据标签名获取

24JS15——DOM_第6张图片

24JS15——DOM_第7张图片
24JS15——DOM_第8张图片
24JS15——DOM_第9张图片

4、通过HTML5新增的方法获取

24JS15——DOM_第10张图片

24JS15——DOM_第11张图片

5、获取特殊元素body html

24JS15——DOM_第12张图片

三、事件基础

1、事件概述

24JS15——DOM_第13张图片

2、事件三要素

24JS15——DOM_第14张图片

3、执行事件的步骤

24JS15——DOM_第15张图片
24JS15——DOM_第16张图片

24JS15——DOM_第17张图片

四、操作元素

在这里插入图片描述

1、改变元素内容

24JS15——DOM_第18张图片
24JS15——DOM_第19张图片

2、常用元素的属性操作

24JS15——DOM_第20张图片
24JS15——DOM_第21张图片
24JS15——DOM_第22张图片
24JS15——DOM_第23张图片
24JS15——DOM_第24张图片

3、表单元素的属性操作

24JS15——DOM_第25张图片
24JS15——DOM_第26张图片
24JS15——DOM_第27张图片
24JS15——DOM_第28张图片
24JS15——DOM_第29张图片

4、样式属性操作

24JS15——DOM_第30张图片
24JS15——DOM_第31张图片

4.1 行内样式操作

24JS15——DOM_第32张图片
24JS15——DOM_第33张图片
24JS15——DOM_第34张图片
24JS15——DOM_第35张图片
24JS15——DOM_第36张图片
24JS15——DOM_第37张图片

24JS15——DOM_第38张图片
24JS15——DOM_第39张图片
24JS15——DOM_第40张图片
24JS15——DOM_第41张图片
在这里插入图片描述

4.2 类名样式操作

24JS15——DOM_第42张图片
24JS15——DOM_第43张图片
24JS15——DOM_第44张图片
24JS15——DOM_第45张图片

5、操作元素总结

24JS15——DOM_第46张图片

6、排他思想

24JS15——DOM_第47张图片

24JS15——DOM_第48张图片
案例:背景换肤
24JS15——DOM_第49张图片
24JS15——DOM_第50张图片
24JS15——DOM_第51张图片
24JS15——DOM_第52张图片
24JS15——DOM_第53张图片
24JS15——DOM_第54张图片
24JS15——DOM_第55张图片
24JS15——DOM_第56张图片

7、自定义属性操作

7.1 获取属性值

24JS15——DOM_第57张图片
24JS15——DOM_第58张图片

7.2 设置元素属性值

24JS15——DOM_第59张图片

7.3 移除属性

24JS15——DOM_第60张图片

案例:tab栏切换(重点案例)

24JS15——DOM_第61张图片
24JS15——DOM_第62张图片
24JS15——DOM_第63张图片
24JS15——DOM_第64张图片
24JS15——DOM_第65张图片

8、H5自定义属性

24JS15——DOM_第66张图片
24JS15——DOM_第67张图片

24JS15——DOM_第68张图片

五、节点操作

1、为什么学节点操作

24JS15——DOM_第69张图片

2、节点概述

24JS15——DOM_第70张图片
24JS15——DOM_第71张图片

3、节点层次

24JS15——DOM_第72张图片
24JS15——DOM_第73张图片
24JS15——DOM_第74张图片
24JS15——DOM_第75张图片
24JS15——DOM_第76张图片
24JS15——DOM_第77张图片
在这里插入图片描述
24JS15——DOM_第78张图片

案例:新建下拉菜单

24JS15——DOM_第79张图片
24JS15——DOM_第80张图片

你可能感兴趣的:(零基础前端,JS,javascript,前端)