DOM 操作

操作元素类名

        我们有两种方式操作元素类名

        按照原生属性操作

      设置类名

          元素.className = 'box'

        修改类名

          元素.className = '新值'

      追加类名

          元素.className = 元素.className + '新类名'

            注意: 新类名前面要有一个 空格

      删除类名

        获取类名

            1. 截取字符串

            2. 按照空格切开, 循环遍历, 找到一个你想删除的删除掉

            3. 再写一遍

//css部分
 div {      width: 100%;      height: 50px;      position: absolute;      top: -50px;      left: 0;      background-color: skyblue;      transition: top .5s linear;    }    div.box {      top: 0;    }    button {      margin-top: 100px;    }

// 0. 获取元素    var div = document.querySelector('div')；    // 1-1. 设置类名    div.className = 'box'；    // 1-2. 修改类名    div.className = 'box2'；    // 1-3. 追加类名     div.className += ' abc'；

H5 标准提供给我们的 API

          元素身上有个属性 classList

      里面包含了所有元素身上设置的类名

          classList 提供了一系列方法来操作

            1. add()

              使用方法: 元素.classList.add('你要添加的类名')

            2. remove()

             使用方法: 元素.classList.remove('你要移除的类名')

            3. toggle()

             使用方法: 元素.classList.toggle('你要切换的类名')

              当元素有这个类名的时候, 就删除，反之没有就添加。

// 2-1. 添加类名div.classList.add('box')；  // 2-2. 删除类名    div.classList.remove('h')； // 2-3. 切换类名    var btn = document.querySelector('button')；    btn.onclick = function () {      div.classList.toggle('box')；    }console.log(div.classList)；

 操作元素文本内容

          1. innerHTML

      一个读写的属性

      操作元素的超文本内容

      读: 获取元素内部的所有内容，返回方式为字符串形式

        使用方法: 元素.innerHTML

  写: 设置元素内部的超文本内容

        完全覆盖式书写

      使用方法: 元素.innerHTML = '你要设置的内容'（自动解析）

     2. innerText

一个读写的属性

        操作元素的文本内容

    读: 获取子元素内部（包括后代）的所有文本内容

        标签内容不获取

          使用方法: 元素.innerText

      写: 设置元素内部的文本内容

        完全覆盖式的写入

        使用方法: 元素.innerText = '你要设置的值'（不自动解析）

          3. value

一个读写的属性

        操作表单元素的 value 属性

        读: 获取表单元素的 value 值

          使用方法: 元素.value

       写: 设置表单元素的 value 值

      使用方法法: 元素.value = '你要设置的值'

//html结构部分<div>    hello world    <p>你好 世界</p>    hello world  </div>
  <input type="text">

var div = document.querySelector('div')；var inp = document.querySelector('input')； // 1. innerHTML    // 1-1. 获取元素的超文本内容     var str = div.innerHTML；    console.log(str)；    console.log(typeof str)；
    // 1-2. 设置元素的超文本内容   div.innerHTML = '<span>我是新来的内容</span>'；

    // 2. innerText    // 2-1. 获取元素的文本内容    var str = div.innerText；     console.log(str)；
    // 2-2. 设置元素的文本内容    div.innerText = '<span>我是新来的内容</span>'；


    // 3. value 属性    // 3-2. 设置元素的 value 值    inp.value = '你好 世界'；
    // 3-1. 获取元素的 value 值    var str = inp.value；    console.log(str)；

 操作元素样式

          1. 行内样式

  style 的方式

          利用原生属性的方式

          元素.style

          获取到的内容是一个对象, 里面包含元素所有的可设置样式

          但是 **只能获取到行内样式**

          2. 非行内样式

          2-1. window.getComputedStyle() 方法

            标准浏览器

            语法: window.getComputedStyle(要获取样式的元素)

          返回值: 一个对象, 里面包含所有可设置样式, 每一个样式都有值, 那你没有设置的有默认值

          你需要那一个样式, 直接再找个对象里面访问就可以了

          2-2. currentStyle 属性

        IE 低版本

          语法: 要获取样式的元素.currentStyle

            得到的就是一个对象, 里面包含元素的所有可设置样式, 每一个样式都有值

            你需要哪一个样式, 直接再对象里面查找就可以了

 特别说明:

          如果你使用 点语法获取样式

            你获取带有中划线的样式要转化成驼峰的方式

          如果你使用 数组关联语法获取样式

            你可以写中划线

      设置元素 只有一种方式

        设置元素得行内样式

      前端 JS 理论上是不可以设置元素得非行内样式

      设置行内样式

    使用方法: 元素.style.样式名 = '值'