Javascript 标签的属性

1.为HTML标签设置和添加属性 setAttribute()

setAttribute()方法可以给HTML标签设置/添加属性（原生的属性或者自定义的属性都可以）添加的属性会存储在标签中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <style>
        .redFont{
            color:red;
        }
    </style>
    <body>
        <div id="div">我是div</div>
    </body>
</html>
<script>
    var div = document.getElementsByTagName('div')[0]
    // 设置属性值
    div.setAttribute('id','test')
    // 添加属性并赋值
    div.setAttribute('class','redFont')
    // 添加自定义属性
    div.setAttribute('xxx','abc')
</script>

运行结果：（字体变为红色，样式生效）

<div id="test" class="redFont" xxx="abc">我是div</div>

2.获取某个属性的属性值 getAttribute(attr)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <style>
        .redFont{
            color:red;
        }
    </style>
    <body>
        <div id="test" class="redFont" xxx="abc">我是div</div>
    </body>
</html>
<script>
    var div = document.getElementsByTagName('div')[0]
    var id_value = div.getAttribute('id')
    var class_value = div.getAttribute('class')
    var xxx_value = div.getAttribute('xxx')
    console.log(id_value,class_value,xxx_value) // test redFont abc
</script>

3.删除指定的属性 removeAttribute(attr)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <style>
        .redFont{
            color:red;
        }
    </style>
    <body>
        <div id="test" class="redFont" xxx="abc">我是div</div>
    </body>
</html>
<script>
    var div = document.getElementsByTagName('div')[0]
    // 删除原生的属性
    div.removeAttribute('id')
    div.removeAttribute('class')
    // 删除子定义的属性
    div.removeAttribute('xxx')
</script>

运行结果：

<div>我是div</div>

4.判断某个属性是否存在 hasAttribute()

• 传入属性名来判断改属性是否存在，只要该属性存在，无论有没有属性值都返回true，否则返回false

<script>
    var box = document.querySelector('#box')
    //必须要传参，不然报错
    console.log(box.hasAttribute('')) //false

    //已经存在且有值的属性
    console.log(box.hasAttribute('id')) //true
    console.log(box.hasAttribute('class')) //true
    //存在属性但是没有属性值
    console.log(box.hasAttribute('draggable')) //true

    //不存在的属性
    console.log(box.hasAttribute('title')) //false
</script>

5.Attribute()方法与点语法的比较

方法	操作对象	原生属性（id,class,title等）	自定义属性
Attribute()系列	标签	共通	自定义属性存储在标签中
点语法	Dom元素	共通	自定义属性存储在内存中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <style>
        .redFont{
            color:red;
        }
    </style>
    <body>
        <div id="test" class="redFont" xxx="abc">我是div</div>
    </body>
</html>
<script>
    var div = document.getElementsByTagName('div')[0]

    // 原生属性是相通的
    console.log(div.getAttribute('id')) //test
    console.log(div.id) //test
    console.log(div.id === div.getAttribute('id')) // true
    // 通过setAttribute修改属性
    div.setAttribute('id','myDiv')
    console.log(div.id) // myDiv
    // 通过点语法修改属性
    div.id = "newId"
    console.log(div.getAttribute('id')) // newId

    // 标签自定义属性只有getAttribute/setAttribute方法才能访问
    console.log(div.getAttribute('xxx')) //abc
    console.log(div.xxx) //undefined

    //点语法添加的自定义属性只有点语法才能访问
    div.yyy = "def"
    console.log(div.yyy) //def
    console.log(div.getAttribute('yyy')) //null

    //class属性比较特殊
    console.log(div.getAttribute('class')) //redFont
    console.log(div.class) //undefined
    console.log(div.className) //redFont
    console.log(div.getAttribute('class') === div.className) // true
</script>