js 设置、获取、删除标签属性以及H5自定义属性

news2025/3/12 13:16:50

1. 设置标签属性

使用setAttribute()(‘属性名’, ‘属性值’)方法可以添加、修改、删除属性。
下面的demo是为input添加、修改、删除value属性：

1.1. HTML

<input type="text" class="input">
<input type="text" class="input">
<input type="text" class="input">

1.2. JS

// 添加value属性
document.querySelectorAll('.input')[0].setAttribute('value', "add value's attribute"); 
// 修改value属性
document.querySelectorAll('.input')[1].setAttribute('value', "change value's attribute"); 
// 删除value属性值
document.querySelectorAll('.input')[3].setAttribute('value', "");

注意：querySelectorAll 可以选择多个节点,以","分隔开,返回的是个数组；

2. 获取标签属性

使用 getAttribute(‘属性名’)方法获取标签的属性
下面的demo是获取input的name属性

2.1. HTML

// 添加value属性
<input type="text" name="zhangdan" class="input">

2.2. JS

const name = document.querySelectorAll('.input')[0].getAttribute('name');
console.log(name); // zhangdan

3. 删除标签属性

使用removeAttribute(‘属性名’)方法删除标签的属性
下面的demo是删除input的name属性

3.1. HTML

// 添加value属性
<input type="text" name="inputBox" class="input">

3.2. JS

const name = document.querySelectorAll('.input')[0].removeAttribute('name');
console.log(name); // undefined

4. 判断是否包含指定的属性

element.hasAttribute(“属性名”) 判断元素里面有没有对应的属性名
结果会返回布尔类型的值，true或false

const target  = document.getElementsByClassName('test')[0];
target.setAttribute('data-name', 'test');
console.log(target.hasAttribute('data-name')); // true
target.removeAttribute('data-name');
console.log(target.hasAttribute('data-name')); // false

5. 去除 HTML 标签

function initData() {
    var wordStr="<p>32545464536</p>"
    console.log("去除标签后："+delHtml(wordStr))
}
/**
 * 去除 HTML 标签
 * @param wordStr
 * @returns {string}
 */
function delHtml(wordStr) {
    var a,b,c,d,len,tagCheck
    a = wordStr.indexOf("<");
    b = wordStr.indexOf(">");
    len = wordStr.length;
    c = wordStr.substring(0, a);
    if (b == -1)
        b = a;
    d = wordStr.substring((b + 1), len);
    wordStr = c + d;
    tagCheck = wordStr.indexOf("<");
    if (tagCheck != -1)
        wordStr = delHtml(wordStr);
    return wordStr;
}

在这里插入图片描述

6. HTML5自定义属性

（1）自定义属性的目的：是为了保存和使用数据，有些数据可以保存到页面中而不用保存到数据库中
（2）自定义属性获取是通过 getAttribute(‘属性’) 方法获取
（3）但是有些自定义属性很容易引起歧义，不容易判断到底是元素内部的属性还是自定义属性
（4）H5中新增了标准

6.1. H5中规定自定义属性需要以 data- 开头做属性名并且赋值

<div data-name="test" ></div>

或者

element.setAttribute('data-name','test');

6.2. 获取H5自定义属性

兼容性较好的获取方法 getAttribute(‘属性’)
（1）H5新增方法（从IE11才开始支持，兼容性较差）
（2）element.dataset.属性;
（3）element.dataset[ ‘属性’ ];
dataset 可以理解成集合的意思，获得所有以 data-开头的自定义属性，data-开头的自定义属性的集合

const target = document.getElementsByClassName('test')[0];
console.log(target.dataset);
console.log(target.dataset.name);
console.log(target.dataset.age);