原生JS如何查询元素属性

简介: 原生JS如何查询元素属性

在原生JavaScript中,查询元素属性的方法主要依赖于Element对象的属性访问器(.propertyName)或者getAttribute()方法。

使用属性访问器(.:

对于某些内置属性(如id, className, style等),你可以直接使用属性访问器来获取或设置它们。

var element = document.getElementById('myElement');  
var id = element.id; // 获取元素的id属性  
element.className = 'newClass'; // 设置元素的class属性


使用getAttribute()方法:

对于自定义属性或任何你希望以字符串形式获取的属性,可以使用getAttribute()方法。

var element = document.getElementById('myElement');  
var customAttr = element.getAttribute('data-custom-attribute'); // 获取自定义属性

使用setAttribute()方法:

你也可以使用setAttribute()方法来设置元素的属性。

var element = document.getElementById('myElement');  
element.setAttribute('data-custom-attribute', 'newValue'); // 设置自定义属性


使用removeAttribute()方法:

如果你想移除一个属性,可以使用removeAttribute()方法。

var element = document.getElementById('myElement');  
element.removeAttribute('data-custom-attribute'); // 移除自定义属性

对于布尔属性:

有些HTML属性是布尔属性(如checked, disabled, selected等),它们没有值,只关心是否存在。在JavaScript中,你可以直接访问这些属性来获取或设置它们的值。

var checkbox = document.querySelector('input[type="checkbox"]');  
var isChecked = checkbox.checked; // 获取checkbox的checked状态  
checkbox.checked = true; // 设置checkbox为选中状态

注意:使用属性访问器获取或设置的属性值通常是JavaScript类型的值(如数字、字符串、对象等),而getAttribute()setAttribute()方法总是以字符串形式处理属性值。

相关文章
|
21天前
|
JavaScript
js【图解】滚动条的位置(文档与屏幕间的距离),鼠标事件距离(位置),元素距离(位置)
js【图解】滚动条的位置(文档与屏幕间的距离),鼠标事件距离(位置),元素距离(位置)
19 7
|
20天前
|
JavaScript 前端开发 CDN
前端 JS 经典:package.json 属性详解
前端 JS 经典:package.json 属性详解
15 1
|
13天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的公共交通查询系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的公共交通查询系统附带文章源码部署视频讲解等
12 0
|
13天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的城市公交查询系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的城市公交查询系统附带文章源码部署视频讲解等
12 0
|
14天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的武汉市公交路线查询系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的武汉市公交路线查询系统附带文章源码部署视频讲解等
14 0
|
14天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的城市公交在线查询系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的城市公交在线查询系统附带文章源码部署视频讲解等
14 0
|
14天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校竞赛和考级查询系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校竞赛和考级查询系统附带文章源码部署视频讲解等
12 0
|
17天前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
14 0
|
18天前
|
JavaScript
JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
|
19天前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
13 0