Vanilla JavaScript -获取单选按钮的值并在DOM中显示该值

Vanilla JavaScript 是指使用原生的、未经任何框架或库封装的纯 JavaScript。在前端开发中，Vanilla JavaScript 经常用于操作 DOM 元素、处理用户交互等。

要获取单选按钮的值并在 DOM 中显示该值，可以通过以下步骤实现：

首先，通过 JavaScript 获取单选按钮的元素节点。可以通过元素的 id、class 或标签名等方式获取。
使用 JavaScript 遍历单选按钮节点列表，判断哪个单选按钮被选中。
获取选中单选按钮的值，可以通过访问单选按钮节点的 value 属性来获取。
将获取到的值插入到 DOM 中显示出来，可以通过修改 HTML 元素的内容或属性来实现。

下面是一个示例代码，演示如何获取单选按钮的值并在 DOM 中显示：

HTML 代码：

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<button onclick="displaySelectedValue()">Get Value</button>
<div id="result"></div>

JavaScript 代码：

function displaySelectedValue() {
  // 获取所有单选按钮的节点列表
  var radios = document.getElementsByName('gender');
  
  // 遍历单选按钮节点列表
  for (var i = 0; i < radios.length; i++) {
    // 判断哪个单选按钮被选中
    if (radios[i].checked) {
      // 获取选中单选按钮的值
      var selectedValue = radios[i].value;
      
      // 在 DOM 中显示选中的值
      var resultDiv = document.getElementById('result');
      resultDiv.innerHTML = 'Selected value: ' + selectedValue;
      
      // 结束循环
      break;
    }
  }
}

在这个例子中，我们通过 getElementsByName() 方法获取了所有 name 属性为 "gender" 的单选按钮节点。然后使用 for 循环遍历单选按钮节点列表，并使用 checked 属性判断哪个单选按钮被选中。最后，将选中的值插入到 id 为 "result" 的 div 元素中显示出来。

对于云计算领域的相关知识，你可以参考腾讯云的文档和产品介绍来深入了解和应用：

云计算概念：云计算是一种基于互联网的计算模式，通过共享的计算资源提供灵活可扩展的服务。详细了解可以参考腾讯云云计算概述。
前端开发：涉及使用 HTML、CSS 和 JavaScript 等技术创建和优化网站或应用的用户界面。腾讯云的相关产品包括静态网站托管、内容分发网络（CDN）等。
后端开发：负责处理服务器端的逻辑和数据，并与前端进行通信。腾讯云的相关产品包括云服务器（CVM）、云函数（SCF）等。
软件测试：确保软件的质量和功能正常运行的过程。腾讯云的相关产品包括自动化测试平台（ATS）等。
数据库：用于存储和管理数据的系统。腾讯云的相关产品包括云数据库 MySQL、云数据库 MongoDB等。
服务器运维：管理和维护服务器的操作和任务。腾讯云的相关产品包括弹性伸缩（AS）、云监控（CM）等。
云原生：一种构建和运行基于云的应用程序的方法和理念。腾讯云的相关产品包括容器服务（TKE）、Serverless Framework等。
网络通信：涉及计算机网络中数据的传输和通信。腾讯云的相关产品包括负载均衡（CLB）、弹性公网 IP等。
网络安全：保护计算机网络和系统免受未经授权的访问、攻击和损害。腾讯云的相关产品包括云安全中心（SSC）、Web 应用防火墙（WAF）等。
音视频：涉及音频和视频数据的处理和传输。腾讯云的相关产品包括云直播（LVB）、云点播（VOD）等。
多媒体处理：涉及对多媒体数据（图像、音频、视频等）进行处理和编辑。腾讯云的相关产品包括云剪（Editon）、智能图像处理（TIP）等。
人工智能：涉及利用计算机模拟和实现人类智能的技术。腾讯云的相关产品包括智能图像识别（AI Image）、智能语音交互（AI Audio）等。
物联网：涉及将物理设备和对象与互联网连接的技术。腾讯云的相关产品包括物联网通信（IoT）、物联网地理位置（IoT LP）等。
移动开发：涉及使用移动应用开发框架和技术创建和优化移动应用程序。腾讯云的相关产品包括移动应用分发（PUSH）、移动应用测试（MTA）等。
存储：用于存储和访问数据的解决方案。腾讯云的相关产品包括对象存储（COS）、文件存储（CFS）等。
区块链：一种分布式账本技术，用于记录和验证交易。腾讯云的相关产品包括区块链服务（BCS）、区块链电子合同（ECS）等。
元宇宙：虚拟现实和增强现实的交互式数字环境，允许用户与虚拟世界进行沟通和交互。腾讯云相关产品可以参考腾讯云 VR/AR。