attribute

setAttribute

设置元素属性:元素.setAttribute(‘属性名’,属性值)
setAttribute() 方法添加指定的属性，并为其赋指定的值。
如果这个指定的属性已存在，则仅设置/更改值。

 <span>
    </span>
    <script>
        var span = document.querySelector('span');
        span.setAttribute('index', 1);
    </script>

getAttribute

getAttribute() 方法返回指定属性名的属性值。
语法::元素:getAttribute(‘属性名’)

    <span id="1"> </span>
    <script>
        var span = document.querySelector('span');
        console.log(span.getAttribute('id'));  //1
    </script>

特点:
1可以获取行内标准属性
2可以获取行内自定义属性
3无法获取行内属性
4无法获取点语法动态添加的属性

    <span id="1"> </span>
    <script>
        var span = document.querySelector('span');
        span.name = '张三';
        console.log(span.name);

        console.log(span.getAttribute('name'));  //null
    </script>

removeAttribute

removeAttribute() 方法删除指定的属性。
语法:元素.removeAttriibute(‘属性名’)

   <span id="1"> 哈哈</span>
    <script>
        var span = document.querySelector('span');
        span.removeAttribute('id')
      
    </script>

createAttribute

createAttribute()方法用于创建一个指定名称的属性，并返回Attr 对象属性。

    <span id="1"> 哈哈</span>
    <script>
        var span = document.querySelector('span');

        //创建class属性并添加到span里面去
        var cla = document.createAttribute("class");
        cla.value = 'kj';
        span.setAttributeNode(cla);
    </script>