DOM属性操作

DOM属性主要是指使用脚本操作标签的属性，主要包括：

• 定义属性

• 操作属性

  • 查询属性
  • 删除属性
  • 添加属性
  • 修改属性

• classList ：H5新增

• DataSet数据集 ：H5新增

定义属性：

HTMl标签是有属性的，她的属性是属性名 / 值构成

<div class = "aa" id="bb" style="color:red" title="cc"></div>

Document API获取元素之后，我们拿到的是js元素对象

const div = document.querySelector("div")
console.log(div) //[object HTMLDivElement] 是标签<div>对应的元素名

为了操作标签的属性，DOM为JS脚本定义了一个属性的映射集，映射了所有的HTML属性。改映射中的属性都是元素对象的属性，它对应HTML属性 转换属性规则：

• 如果HTML元素属性名是一个单词，那么元素对象属性也是单词

• 如果HTML元素属性名是一个JS保留字，那么要做特殊转换

  • class => className
  • for=> htmlFor

• 所有的属性值都是字符串，但是有两个例外

  • input标签的checked 的属性值是布尔
  • option标签的selected 的属性值是布尔

<form>
<input type="checkbox" />
<input type="radio" />
<sele>
</form>

查找元素的属性

1.Element.getAttribute()

定义：查找元素的属性 语法：

元素.getAttribute("属性名")

返回值：返回字符串值或null（找不到） 实例：

    <h1 id="aaa" class="bbb" style="color:#333;"></h1>
    <script>
        const h1= document.querySelector("h1")
        //读取属性的方法
        console.log(h1.id);
        console.log(h1['style']);
        console.log(h1.getAttribute("class"));
    </script>

##2.attributes 定义：属性用于查询指定元素的所有属性。 语法：

元素.attributes

返回值：返回NamedNodeMap对象，该对象包含指定元素的所有属性节点的实时集合。 NamedNodeMap对象不是数组，也不是伪数组，而是一个包含字符串的键值对。可以使用for...of枚举。 实例：

console.log(h1.attributes);//NamedNodeMap(3) [ id="aaa", class="bbb", style="color:#333;" ]

删除属性

1.Element.removeAttribute()

定义：用于从元素中删除具有指定名称的属性。 语法：

元素.removeAttribute('属性名')

返回值：无 实例：

    <h1 id="h1" class="bbb" style="border:5px solid black;">Hello world</h1>
    <script>
​
        const h1 = document.querySelector('h1')
        const map = h1.attributes
        console.log(map)
        for (arr of map){
            h1.removeAttribute(arr.name)
        }
        console.log(h1);

classList

classList 伪数组三个方法

• 元素.classList.add()//向class值列表中添加一个值
• 元素.classList.remove()//向class值列表中删除一个值
• 元素.classList.toggle()//如果class值有，就执行remove，没有执行add

 btn[0].addEventListener("click",function(){
            //1.点击按钮，让文字变成红色 add
           h2.classList.add("red")
           //2.点击按钮删除边框 remove
        //    h2.classList.remove("blue")
        })

Element.hasAttribute()

定义

element.hasAttribute方法用于查询指定元素是否具有指定属性

语法

元素.hasAttribute('属性名')

返回值

布尔值

示例

console.log(document.querySelector('ul').hasAttribute('class'));

Element.setAttribute()

定义

Element.setAttribute()方法用于向指定属性元素添加新属性，如果该属性已经存在，则更新属性名

语法

Element.setAttribute(属性名，属性值)

返回值

无

示例

    <h2>为p元素设置class属性值为'aaa'</h2>
    <hr>
    <p id="bbb">种一棵树的最佳时间是十年前，其次是现在。</p>
​
    <script>
        const p = document.querySelector("p");
        p.setAttribute("class", "aaa");
        console.log(p);
    </script>