DOM操作元素的样式

DOM操作元素的样式：

​ （1）元素对象名.style.样式属性名 = 属性值

​ （2）HTML5对象样式的操作：

​ a、一个元素的class属性可以有多个值：作用是在保留原有样式的基础上添加新的样式

​ b、如何在js程序运行过程中动态的添加class属性值：

​ classList属性：是元素的class属性的列表

​ 4、classList属性提供的方法和属性

​ （1）属性：length —— 某个标签的class属性值的个数（即多少个类名）

​ （2）方法：

​ a、add(‘字符串’)：给元素添加类名。一次只能添加一个

​ b、remove(‘字符串’)：将元素的类名删除。一次只能删除一个

​ c、toggle(‘字符串’)：若类名存在则删除，不存在则添加

​ d、item(index)：根据index，来获取元素的类名

​ e、contains（‘类名’）：判断元素是否含有给定的类名，若有返回true，没有返回false

示例代码

<div class="d1 s1 s2 s3 s4" id="dt"></div>
    <!-- <button id="btn_class">class样式列表</button> -->
    <button id="btn_center">居中</button>
    <button id="btn_remove">恢复</button>
    <button id="btn_toggle">交替</button>
    <button id="btn_item">索引</button>
    <script>
        // document.querySelector('#btn_class').addEventListener('click',function(){
        //     let clazz = document.querySelector('#dt')
        //     console.log(clazz.classList)
        // })
        document.querySelector('#btn_center').addEventListener('click',function(){
            document.querySelector('#dt').classList.add('s2')
        })
        document.querySelector('#btn_remove').addEventListener('click',function(){
            document.querySelector('#dt').classList.remove('s2')
        })
        document.querySelector('#btn_toggle').addEventListener('click',function(){
            document.querySelector('#dt').classList.toggle('s2')
        })
        document.querySelector('#btn_item').addEventListener('click',function(){
            //  let  class_name = document.querySelector('#dt').classList.item(3)
            //  console.log(class_name)
            let  flag = document.querySelector('#dt').classList.contains('s5')
            console.log(flag)
        })
    </script>

​ 5、DOM中节点的操作：采用操作节点的方式来操作页面中的元素

​ （1）获取节点时使用的属性：

​ a、firstChild：获取当前节点的首个子节点。

注意：换行符、空格等也是节点

​ b、nextSibiling：返回同一层级中指定节点之后紧跟的节点

c、lastChild：访问当前节点的最后一个子节点

​ d、previousSibling：返回同一层级中指定节点的前一个节点

e、nodeName：节点的名称

​ f、nodeValue：节点的值

​ g、nodeType：节点类型

​ 1：表示当前节点的类型是标签（元素）

​ 2：表示属性节点

​ 3：表示文本节点

​ h、parentNode：访问当前元素节点的父节点

​ i、childNodes：当前节点的所有子节点

强调：childNodes属性和children属性的区别

​ （1）相同点：都可以获取子元素

​ （2）不同点：

​ childNodes不仅包含文本节点，也包含其他的元素节点，返回值类型是NodeList

​ children返回的元素节点（即标签），返回值类型是HTMLCollection

​ getAttribute(‘id’)：用来获取元素的id属性值

​ getAttributeNode(‘id’)：用来获取元素的id属性（属性节点）

6、追加节点

​ （1）创建元素节点：

​ document.createElement()

​ （2）在指定节点的末尾追加节点

​ appendChild(newNode)

​ （3）在指定节点之前添加节点

​ insertBefore(newNode，node)：将结点newNode插入到节点node之前

​ 该方法需要通过插入节点(node)的父节点来调用