使用纯JavaScript获取DOM元素值

可以通过以下几种方式实现：

1. getElementById：通过元素的id属性获取DOM元素。
   • 概念：getElementById是Document对象的方法，用于根据元素的id属性获取对应的DOM元素。
   • 分类：属于DOM操作的一种方式。
   • 优势：简单易用，适用于获取单个元素。
   • 应用场景：适用于需要获取页面中特定id元素的值。
   • 腾讯云相关产品和产品介绍链接地址：无

示例代码：

var element = document.getElementById("elementId");

var value = element.value;

1. getElementsByClassName：通过元素的class属性获取DOM元素。
   • 概念：getElementsByClassName是Document对象的方法，用于根据元素的class属性获取对应的DOM元素集合。
   • 分类：属于DOM操作的一种方式。
   • 优势：可以获取多个具有相同class属性的元素。
   • 应用场景：适用于需要获取页面中具有相同class属性的元素的值。
   • 腾讯云相关产品和产品介绍链接地址：无

示例代码：

var elements = document.getElementsByClassName("className");

var value = elements0.value; // 获取第一个元素的值

1. getElementsByTagName：通过元素的标签名获取DOM元素。
   • 概念：getElementsByTagName是Document对象的方法，用于根据元素的标签名获取对应的DOM元素集合。
   • 分类：属于DOM操作的一种方式。
   • 优势：可以获取多个具有相同标签名的元素。
   • 应用场景：适用于需要获取页面中具有相同标签名的元素的值。
   • 腾讯云相关产品和产品介绍链接地址：无

示例代码：

var elements = document.getElementsByTagName("tagName");

var value = elements0.value; // 获取第一个元素的值

1. querySelector：通过CSS选择器获取DOM元素。
   • 概念：querySelector是Document对象的方法，用于根据CSS选择器获取对应的DOM元素。
   • 分类：属于DOM操作的一种方式。
   • 优势：支持更复杂的选择器，可以获取单个元素。
   • 应用场景：适用于需要根据CSS选择器获取特定元素的值。
   • 腾讯云相关产品和产品介绍链接地址：无

示例代码：

var element = document.querySelector("selector");

var value = element.value;

1. querySelectorAll：通过CSS选择器获取DOM元素集合。
   • 概念：querySelectorAll是Document对象的方法，用于根据CSS选择器获取对应的DOM元素集合。
   • 分类：属于DOM操作的一种方式。
   • 优势：支持更复杂的选择器，可以获取多个元素。
   • 应用场景：适用于需要根据CSS选择器获取多个元素的值。
   • 腾讯云相关产品和产品介绍链接地址：无

示例代码：

var elements = document.querySelectorAll("selector");

var value = elements0.value; // 获取第一个元素的值

以上是使用纯JavaScript获取DOM元素值的几种常用方式。根据具体的需求和场景选择合适的方式来获取DOM元素的值。