1、DOM树是什么

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
作用：文档树直观的体现了标签与标签之间的关系

2、获取DOM对象

1.1 选择匹配的第一个元素

1.2 选择匹配的多个元素

 得到的是一个伪数组：

  • 有长度有索引号的数组
  • 但是没有 pop() push() 等数组方法
  • 想要得到里面的每一个对象，则需要遍历（for）的方式获得

1. 获取一个DOM元素我们使用谁？

  • querySelector()

2. 获取多个DOM元素我们使用谁？

  • querySelectorAll()

3. querySelector() 方法能直接操作修改吗？

  • 可以

4. querySelectorAll() 方法能直接修改吗？ 如果不能可以怎么做到修改？

  • 不可以， 只能通过遍历的方式一次给里面的元素做修改
2. 其他获取DOM元素方法（了解）
3. 他们两者小括号里面的参数有神马注意事项？
  • 里面写css选择器
  • 必须是字符串，也就是必须加引号

3、设置/修改DOM元素内容

 document.write()

  • 只能将文本内容追加到 </body> 前面的位置
  • 文本中包含的标签会被解析

   元素innerText 属性

  • 将文本内容添加/更新到任意标签位置
  • 文本中包含的标签不会被解析

    元素.innerHTML 属性

  • 将文本内容添加/更新到任意标签位置
  • 文本中包含的标签会被解析

4、设置/修改DOM元素属性

还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
最常见的属性比如： href、title、src 等

1. 设置/修改元素样式属性通过  style  属性引出来？
2. 如果需要修改一个div盒子的样式，比如 padding-left, 如何写？
         element.style.paddingLeft = ‘300px’
小驼峰命名法
3. 因为我们是样式属性，一定别忘记，大部分数字后面都需要加单位

2. 设置/修改元素样式属性

1. 使用 className 有什么好处？
  • 可以同时修改多个样式
2. 使用 className 有什么注意事项？
  • 直接使用 className 赋值会覆盖以前的类名
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名  
1. 使用 className 和classList的区别？
  • 修改大量样式的更方便
  • 修改不多样式的时候方便
  • classList 是追加和删除不影响以前类

5、定时器-间歇函数（setinterval）

1. 开启定时器
  •   作用：每隔一段时间调用这个函数
  • 间隔时间单位是毫秒

 2. 关闭定时器

6、 事件监听

什么是事件？
  • 事件是在编程时系统内发生的动作或者发生的事情
  • 比如用户在网页上单击一个按钮
什么是事件监听？
  • 让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件

事件监听三要素：

  • 事件源： 那个dom元素被事件触发了，要获取dom元素
  • 事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
  • 事件调用的函数： 要做什么事
1. 什么是事件？
  • 事件是在编程时系统内发生的动作或者发生的事情
  • 比如点击按钮 click
2. 什么是事件监听？
  • 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件
3. 事件监听三要素是什么？
  • 事件源 (谁被触发了)
  • 事件 (用什么方式触发，点击还是鼠标经过等)
  • 事件处理程序 （要做什么事情）
淘宝点击关闭二维码
需求：点击关闭之后，淘宝二维码关闭
案例
分析：
①：点击的是关闭按钮
②：关闭的是父盒子
核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素

3. 事件类型

1. 高阶函数

  • 高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。
  • 【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。
  • 如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
  • 简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

1. 函数表达式
  • 函数也是【数据】
  • 把函数赋值给变量
2. 回调函数
  • 把函数当做另外一个函数的参数传递，这个函数就叫回调函数
  • 回调函数本质还是函数，只不过把它当成参数使用
  • 使用匿名函数做为回调函数比较常见

3. 环境对象

  • 环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
  • 作用：弄清楚this的指向，可以让我们代码更简洁
  • 函数的调用方式不同，this 指代的对象也不同
  • 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
  • 直接调用函数，其实相当于是 window.函数，所以 this 指代 window

4. 编程思想

排他思想
        当前元素为A状态,其他元素为B状态
使用：
1. 干掉所有人
        使用for循环
2. 复活他自己
        通过this或者下标找到自己或者对应的元素
# javascript # 开发语言 # 前端 # html5
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

Expect脚本实战：多条件匹配与防卡死技巧

在自动化测试和系统初始化中，我们常常使用 Expect 脚本来完成一系列交互操作，比如自动输入密码、监听输出并作出响应。然而，实际项目中可能遇到多步骤输出匹配的场景：只有在 先匹配到某一行输出，再匹配到另一行输出 时，才需要做出响应。同时，如果 “testX failed” 出现了，但 “set params error” 没有在合理时间内出现，不要卡死，而是打印警告并继续。这个写法的问题在于：如

avatar 2048 AI社区

AI模型版本控制的标签管理：架构师的技巧

在AI模型生命周期中，版本控制是保障模型可追溯性、协作效率与生产可靠性的核心环节。而标签管理作为版本控制的"语义接口"，其设计质量直接决定了团队对模型版本的理解、检索与复用能力。本文从架构师视角出发，结合第一性原理与MLOps实践，系统阐述AI模型标签管理的理论框架、架构设计、实现机制与高级考量。通过拆解标签的"唯一标识+语义描述"本质，提出四维标签模型。

avatar 2048 AI社区

Expect脚本实战：多条件匹配与防卡死技巧

在自动化测试和系统初始化中，我们常常使用 Expect 脚本来完成一系列交互操作，比如自动输入密码、监听输出并作出响应。然而，实际项目中可能遇到多步骤输出匹配的场景：只有在 先匹配到某一行输出，再匹配到另一行输出 时，才需要做出响应。同时，如果 “testX failed” 出现了，但 “set params error” 没有在合理时间内出现，不要卡死，而是打印警告并继续。这个写法的问题在于：如

avatar 2048 AI社区