DOM与BOM试题

基础回顾题(48分,1分1道题)

1. querySelector 基础
   • 写出一段代码，使用querySelector选择页面上第一个<button>元素，并打印该元素到控制台。

2. querySelectorAll 基础
   • 使用querySelectorAll选择所有类名为item的元素，并打印这些元素组成的NodeList到控制台。

3. innerText 应用
   • 为页面中id为title的元素设置文本内容为"Welcome to My Website"，确保任何HTML标签都不会被解析。

4. innerHTML 应用
   • 将一个id为content的div元素的内容替换为一段包含链接的HTML字符串：“点击 这里”。

5. 操作元素属性
   • 选择页面上的第一个<img>元素，并为其添加或修改src属性，使其指向一个新的图片URL。

6. className 修改
   • 将页面中id为header的元素的类名直接设置为main-header，覆盖掉它之前的所有类名。

7. classList 操作
   • 对于一个拥有多个类（如nav-item active selected）的元素，如何仅移除selected类而不影响其他类？写出这段代码。

8. setInterval 定时器
   • 创建一个每秒增加一次计数器的功能，每次计数后更新页面上id为counter的元素的文本内容为最新的计数值。请写出这个功能的代码。

9. setTimeout 延迟执行
   • 编写一段代码，在用户点击按钮后3秒改变按钮的文字为“已完成”。请写出这个功能的代码。

10. 清除定时器
    • 如果有一个通过setInterval创建的每秒调用一次的函数，现在需要在特定条件下停止这个间隔调用，请写出如何定义和清除这个间隔的代码。

11. 点击事件处理
    • 使用addEventListener为页面中的一个按钮添加一个click事件监听器，当按钮被点击时，在控制台打印“Button clicked”。

12. 鼠标悬停效果
    • 为一个元素添加mouseenter和mouseleave事件监听器，使得当鼠标进入该元素时，改变其背景色为蓝色；当鼠标离开时，恢复原来的背景色。

13. 焦点事件
    • 编写一段代码，当用户将焦点放在一个文本输入框上（focus事件）时，打印出"Input focused"到控制台，并在失去焦点（blur事件）时打印"Input blurred"。

14. 键盘按下与释放
    • 为文档添加keydown和keyup事件监听器，分别记录下用户按下的键码值和释放的键码值，并打印至控制台。

15. 输入内容实时监控
    • 给一个文本输入框添加input事件监听器，每当输入框内容发生变化时，更新页面上的一个显示区域以反映最新的输入内容。

16. 事件对象使用
    • 在一个click事件监听器中，通过事件对象获取触发事件的目标元素，并将其样式颜色设置为红色。

17. this 关键字
    • 在一个click事件监听器中，通过this获取触发事件的目标元素，并将其样式颜色设置为红色

18. 阻止默认行为
    • 写一段代码，为一个链接添加click事件监听器，当链接被点击时，阻止浏览器默认的跳转行为，并在控制台打印“Link click prevented”。

19. 事件委托
    • 假设有一个包含多个列表项的无序列表（ul>li），请使用事件委托的方式为每个列表项添加click事件监听器，当点击任意一个列表项时，打印该项的内容。

20. 事件捕获与事件冒泡
    • 解释事件捕获和事件冒泡的区别，并编写一段代码，在一个嵌套的HTML结构中（如父元素内有一个子元素），当点击子元素时，分别在捕获阶段和冒泡阶段打印出"Capturing phase"和"Bubbling phase"。

21. 事件委托
    • 编写一段代码，使用事件委托的方式为一个无序列表（ul>li）中的所有列表项添加click事件监听器。要求：无论是在脚本执行后立即存在的列表项还是之后动态添加的列表项，点击它们都会触发相应的事件处理函数。

22. scroll 事件
    • 编写一个scroll事件监听器，当用户滚动页面时，如果页面被滚动的距离超过了视口高度的一半，则在控制台打印一条消息“Scrolled more than half the viewport height”。

23. resize 事件
    • 创建一个resize事件监听器，每当浏览器窗口大小改变时，更新页面上显示的当前窗口宽度和高度。

24. offsetTop 和 offsetLeft
    • 编写一段代码，计算并打印页面中一个指定元素相对于其最近的定位祖先元素的顶部和左侧偏移量（即offsetTop和offsetLeft的值）。

25. 阻止事件冒泡
    • 写一段代码，为一个按钮添加click事件监听器，当点击按钮时，防止该事件冒泡到任何父级元素。

26. 获取当前小时
    • 编写一段代码，使用Date对象的方法来获取并打印当前时间的小时数。

27. 获取月份
    • 写出如何正确地使用Date对象的方法来获取当前月份，并注意月份是从0开始计数的（0表示一月）。

28. 获取日期
    • 使用getDate方法获取今天的日期，并打印出来。

29. 获取完整年份
    • 编写代码，使用getFullYear方法获取当前的年份，并将其显示在页面上。

30. 获取秒数
    • 获取当前时间的秒数，并将这个值打印到控制台。

31. 获取分钟
    • 使用getMinutes方法获取当前时间的分钟数，并打印出来。

32. 时间戳转换
    • 将一个给定的时间戳转换为可读的日期字符串格式（例如：YYYY-MM-DD HH:MM:SS），并打印该字符串。

33. 访问父节点
    • 写出一段代码，选择页面上的一个特定元素，并通过parentNode属性访问它的父节点，然后打印父节点的标签名。

34. 遍历子节点
    • 选择一个包含多个子元素的父元素，并使用children属性遍历其所有子元素，打印每个子元素的标签名。

35. 查找下一个兄弟元素
    • 为页面上的一个元素添加事件监听器，当点击该元素时，找到并打印它下一个兄弟元素的文本内容。nextElementSibling

36. 查找前一个兄弟元素
    • 类似于第35题，但这次是找到并打印前一个兄弟元素的文本内容。previousElementSibling

37. 移除元素 remove()
    • 编写代码，当用户点击一个按钮时，移除页面上指定的元素。

38. 创建新元素
    • 使用createElement方法创建一个新的<p>元素，设置其文本内容为"Hello, World!"，然后将其添加到页面中现有的一个容器元素内。

39. 在末尾添加元素 append方法
    • 编写代码，创建一个新的列表项（<li>），并将其添加到一个无序列表（<ul>）的末尾。

40. 在开头添加元素
    • 类似于第39题，但是这次是将新的列表项添加到无序列表的开头，使用prepend方法。

41. 获取并修改当前页面URL
    • 编写一段代码，首先打印出当前页面的完整URL（使用location.href），然后将URL中的某个查询参数值进行修改，并更新页面URL（不重新加载页面）。

42. 解析查询字符串
    • 使用location.search属性来获取当前页面URL中的查询字符串，并使用URLSearchParams (URLSearchParams用法请问AI)提取所有键值对，并将它们存储在一个JavaScript对象中。最后，打印这个对象。

43. **保存对象到 **localStorage
    • 创建一个包含用户信息的对象（如{name: "Alice", age: 25}），使用JSON.stringify()将其转换为字符串，并保存到localStorage中，键名为userProfile。

44. 从 localStorage 读取并解析数据
    • 从localStorage中读取之前保存的userProfile键对应的值，使用JSON.parse()将其转换回JavaScript对象，并打印出来。

45. 更新 localStorage 中的数据
    • 修改localStorage中userProfile对象的年龄字段，然后再保存更新后的对象回localStorage，确保正确处理JSON序列化和反序列化。

46. 验证电子邮件格式
    • 使用正则表达式的test方法编写一个函数，该函数接受一个字符串作为输入，并返回该字符串是否符合常见的电子邮件格式（例如：user@example.com）。

47. 替换电话号码中的特定字符
    • 编写一段代码，使用正则表达式的replace方法将给定字符串中的中国大陆电话号码格式（如13812345678）的所有数字替换成星号（*），但保持电话号码的结构不变。

48. 匹配并提取所有链接
    • 使用正则表达式的match方法查找并提取给定文本中的所有HTTP或HTTPS链接，将结果作为一个数组返回。

编程能力检测(52分)

实现26个随机字母选择(22分)

请实现如下需求：

1. 点击【开始】使用setInterval开启间隔函数随机从26个字母中获取一个字母**(12分)**
2. 点击【停止】停止间隔函数，并且获取到当前获取到的字母，显示在红色框中**(10分)**

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>随机字母</title>
  <style>
    h1 {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      text-transform: uppercase;
    }

    #wrapper {
      text-align: center;
      background-color: rgba(0, 0, 0, 0.5);
      background-size: 100% 100%;
      font-size: 20px;
      height: 300px;
      width: 500px;
      margin: 50px auto;
      padding-top: 20px;
    }

    #oknum {
      height: 50px;
      line-height: 50px;
      text-align: center;
      width: 200px;
      border: 10px solid #555;
      border-radius: 10px;
      margin: 20px auto 20px;
      font-size: 30px;
    }

    #showresult {
      border: 10px solid rgba(250, 50, 0);
      background-color: #fff;
      border-radius: 10px;
      height: 50px;
      text-align: center;
      font-size: 40px;
      width: 100px;
      line-height: 50px;
      margin-top: 20px;
    }

    button {
      height: 40px;
      width: 80px;
      background-color: #a5f;
      border-radius: 20px;
      color: #fff;
      border: none;
      font-weight: bolder;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <h1>编程能力测试2——随机字母</h1>
  <div id="wrapper">
    <div id="oknum">点击按钮开始</div>
    <button class="start">开始</button>
    <button class="end">停止</button>
    <br />
    您的选择是：
    <input type="text" id="showresult" value="" />
  </div>

  <script>
    // 所有字母对应的数组
    let data = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']

    // 1、找对象——》获取两个按钮+展示div+选择input
    let startBtn = document.querySelector('.start')
    let endBtn = document.querySelector('.end')
    let showDiv = document.querySelector('#oknum')
    let showInput = document.querySelector('#showresult')

    // 2、给两个按钮注册事件
    //   1、startBtn被点击之后，开启定时器，每隔100ms，则随机从data中获取随机一项，展示在showDiv中
    //   2、endBtn被点击之后，结束定时器，并且把当前的data数据展示到showInput中
    // 变量储存定时器id
  
  </script>
</body>

</html>

图书管理-localstorage(30分)

请使用 location.href跳转网页和本地存储完成如下效果

项目工程下载：项目模板已经实现了左滑功能，无需再实现

实现如下功能：

1. 打开图书列表.html 页面 从本地存储中加载图书数据，显示在页面**（10分）**
2. 点击右上角跳转到新增图书.html，新增页面填写图书信息，点保存将数据追加到本地存储后，返回到图书列表.html页面**（10分）**
3. 图书列表.html实现左滑删除数据**（10分）**

我的书架综合案例-模版.rar

<!--  1. 实现图书列表代码 -->


<!--  2. 实现删除图书代码 -->

<!--3. 新增图书代码  -->