💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
## Attribute 对象 HTML 元素中包含标签名和若干个键值对,这个键值对我们称为“属性”(Attribute) 在 DOM 中,我们很少直接对属性进行操作,一般都是元素节点对象(Element对象)来操作属性。 ### 1.Element.attributes属性 返回一个类似数组的动态对象 > 示例:遍历元素节点的所有属性 ~~~javascript var d1Ele = document.getElementById("_d3").nextElementSibling; if (d1Ele.hasAttributes()) { var d1Att = d1Ele.attributes; for (var i = 0; i < d1Att.length; i++) { console.log(d1Att[i].name + ":" + d1Att[i].value); } } else { console.log("No attributes To show!"); } ~~~ ### 2. 元素节点对象的属性 HTML元素节点的标准属性,会自动成为元素节点对象的属性。 ~~~javascript var _abaidu = document.getElementById("_abaidu"); console.log(_abaidu.href); // http://www.baidu.com console.log(_abaidu.target); // _blank console.log(_abaidu.test); // undefined ~~~ > 虽然在Html中大小写是不敏感的,但是在 Javascript 中,属性大小写敏感,而且属性一般都是采用小写。 > 有些HTML属性名是 Javascript 的保留字,转为 Javascript 属性时,需要改名字,主要由`class-className,for-htmlFor` ### 3.属性操作的标准方法 `getAttribute()` `setAttribute()` 上述两个方法对所有的属性都适用(包含用户自定义的方法) ~~~javascript _abaidu.setAttribute("href","http://www.sina.com"); console.log(_abaidu.getAttribute("href")); _abaidu.setAttribute("test","xxx"); console.log(_abaidu.getAttribute("test")); ~~~ ` hasAttribute()` `removeAttribute()` ### 4.dataset 属性 有时需要在 Html 上附加数据,供 Javascript 脚本使用。一种解决方法是自定义属性。 虽然自己随意定义的属性名可以通过相关的方法进行定义和赋值,但是会使得HTML元素的属性不符合规范,导致网页的HTML代码通不过校验。 更好的解决方法是,使用标准提供的`data-*`属性。 再使用元素对象的 dataset 属性对自定义的属性进行操作。 > 注意:data-后面的属性有限制,只能包含字母、数字、连词线(-)、点(.)、冒号(:)和下划线(_)。而且属性名不应该使用大写字母。比如data-helloWorld,我们不这么写,而写成data-hello-world。 > 在转成dataset的键名的时候,连词线后面如果跟着一个小写字母,那么连词线会被移除,该小写字母转为大写字母,其他字符不变。 ~~~javascript console.log(_abaidu.getAttribute("data-hello-world")); console.log(_abaidu.dataset.helloWorld); // 驼峰命名 ~~~