JS取值的几种方式的代码示例
时间: 2023-07-26 19:03:41 浏览: 57
以下是JS取值的几种方式的代码示例:
1. 通过id获取元素的值
```
let value = document.getElementById('elementId').value;
```
2. 通过name获取元素的值
```
let value = document.getElementsByName('elementName')[0].value;
```
3. 通过class获取元素的值
```
let value = document.getElementsByClassName('elementClass')[0].value;
```
4. 通过标签名获取元素的值
```
let value = document.getElementsByTagName('input')[0].value;
```
5. 通过选择器获取元素的值
```
let value = document.querySelector('#elementId').value;
```
6. 通过选择器获取多个元素的值
```
let values = document.querySelectorAll('.elementClass');
values.forEach(function(element) {
console.log(element.value);
});
```
上述代码中,第1~4种方式都是通过获取到的元素对象的value属性来获取元素的值。第5种方式使用了CSS选择器来获取元素,然后再获取其value属性。第6种方式使用了querySelectorAll来获取所有符合选择器的元素,然后遍历每个元素并输出其value属性。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)