JavaScript全解析——DOM操作 - 元素操作方式（上）

　　操作元素样式

　　style

　　●专门用来给元素添加 css 样式的

　　●在 JS 内操作元素样式style的情况分成三种

　　○设置元素的行内样式

　　○获取元素行内样式(只能获取到行内样式)

　　○获取元素非行内样式(可以获取行内样式也可以获取非行内样式)

　　■非行内样式有内嵌式和外链式

<body>
  <div></div>

  <script>
    var div = document.querySelector('div')
       div.style.width = "100px"
    div.style.height = "100px"
    div.style.backgroundColor = "pink"
    console.log(div)
    // <div style="width: 100px; height: 100px; background-color: pink;"></div>
  </script>
</body>

　　●页面中的 div 就会变成一个宽高都是 100，背景颜色是粉色

　　操作元素类名

　　className

　　●专门用来操作元素的类名的

　　●实际上就是操作元素的原生属性，只不过在js中class是一个关键字，所以我们操作原生属性改用className

　　获取

　　●语法：元素对象.calssName

　　●返回值：得到的就是元素的完整类名　

<body>
  <div class="box"></div>
  <script>
    var div = document.querySelector('div')
       console.log(div.className) // box
  </script>
</body>

　　设置

　　●语法：元素对象.className = '值'

　　●这样设置是全覆盖式的操作，也就是把之前的类名会全部覆盖掉　

<body>
  <div class="box"></div>

  <script>
    var div = document.querySelector('div')
       div.className = 'test'
    console.log(div) // <div class="test"></div>
  </script>
</body>

　　●在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖

　　追加

　　●语法：元素.className += ' 值'

　　●注意: 值的位置要书写一个空格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="seal">你好 世界</div>
    <script>
        var box = document.querySelector('div')
        box.className += ' container'
        console.log(box);//<div class="seal container">你好 世界</div>
    </script>
</body>

</html>

　　classList

　　●每一个元素都有一个属性叫做 classList，是一个类似数组的集合, 里面记录了元素所有的类名

　　●classList操作类名有几种方式：添加，删除和切换

　　添加类名

　　●语法: 元素.classList.add('要添加的类名')

　　●作用: 给该元素添加一个类名, 但是重复的不会添加进去了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="seal">你好 世界</div>
    <script>
        var box = document.querySelector('div')
        console.log(box.classList); //['seal', value: 'seal']
        box.classList.add('cls')
        console.log(box);//<div class="seal cls">你好 世界</div>
    </script>
</body>

</html>

　　删除类名

　　●语法: 元素.classList.remove('要删除的类名')

　　●作用: 该该元素删除一个类名

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="seal hello">你好 世界</div>
    <script>
        var box = document.querySelector('div')
        box.classList.remove('hello')
        console.log(box); //<div class="seal">你好 世界</div>
    </script>
</body>

</html>

　　切换类名

　　●语法: 元素.classList.toggle('要切换的类名')

　　●作用: 该元素切换一个类名

　　●切换: 有就删除, 没有就添加

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="seal hello">你好 世界</div>
    <script>
        var box = document.querySelector('div')
        box.classList.toggle('hello')
        box.classList.toggle('world')
        console.log(box); //<div class="seal world">你好 世界</div>
    </script>
</body>

</html>

　　操作元素属性

　　●元素属性:书写在标签身上, 一个 key=value 的键值对, 叫做一条属性

　　●通过我们各种获取元素的方式获取到页面中的标签以后

　　●我们可以直接操作 DOM 元素的属性，就能直接把效果展示在页面上

　　属性的分类

　　●原生属性

　　○在 W3C 规范中提到的属性, 对标签有一定的特殊意义或者描述作用

　　■id, class, src, type, ...

　　●自定义属性

　　○对于标签没有特殊的作用或者描述任务, 只是用来在标签身上记录一些信息

　　●H5 自定义属性

　　○只是 H5 自定义属性会以 data- 开头, 直观的看出来是自定义属性

　　○设置的方式: data-属性名=属性值

　　操作元素属性

　　●以下的所有操作属性的方式和方法, 均不操作类名(class) 和样式(style)

　　●操作原生属性

　　○直接依靠属性名进行操作

　　■获取: 元素.属性名

　　●得到的就是该元素指定属性的值

　　■设置: 元素.属性名 = 属性值

　　●作用修改该属性的值

　　●操作自定义属性

　　○获取:

　　■语法: 元素.getAttribute(属性名)

　　■返回值: 元素中该属性对应的值

　　○设置:

　　■语法: 元素.setAttribute(属性名, 属性值)

　　■作用: 设置或者修改一条自定义属性

　　○删除:

　　■语法: 元素.removeAttribut(属性名)

　　■作用: 删除元素身上该自定义属性

　　●操作H5 自定义属性

　　○每一个元素身上自带一个属性, 叫做 dataset, 是一个类似于对象的数据结构

　　○里面记录的是该元素身上所有的 data- 开头的自定义属性

　　○对于所有 H5 自定义属性的操作依赖于这个 dataset

　　○获取: 元素.dataset.属性名

　　○设置: 元素.dataset.属性名 = 属性值

　　○删除: delete 元素.dataset.属性名

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <div id="container" class="box" hello="world" data-index="1" data-id="10">123</div>
  <!-- <img src="https://img2.baidu.com/it/u=2102736929,2417598652&fm=26&fmt=auto&gp=0.jpg" alt=""> -->

  <script>
  
    // 0. 获取元素
    var box = document.querySelector('div')
    var img = document.querySelector('img')

    // 1. 操作原生属性
    // 1-1. 原生属性获取
    console.log(box.id)
    console.log(img.src)
    // 1-2. 原生属性修改
    box.id = 'abcd'
    img.src = 'https://img0.baidu.com/it/u=1514002029,2035215441&fm=26&fmt=auto&gp=0.jpg'

    // 2. 自定义属性
    // 2-1. 自定义属性获取
    var res = box.getAttribute('hello')
    console.log(res)
    // 2-2. 自定义属性设置
    box.setAttribute('guoxiang', '你好')
    box.setAttribute('guoxiang', '世界')
    // 2-3. 自定义属性删除
    box.removeAttribute('hello')

    // 3. H5 自定义属性
    // 3-1. 获取
    console.log(box.dataset.index)
    // 3-2. 设置
    // 在标签上设置了一个 data-guoxiang="你好"
    box.dataset.guoxiang = '你好'
    box.dataset.guoxiang = '世界'
    // 3-3. 删除
    delete box.dataset.index

  </script>
</body>
</html>

　　案例-密码可视

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <input type="password"><button>眼睛</button>

  <script>
    /*
      案例 - 密码可视
        + 当点击这个 眼睛 按钮的时候
          => 判断 input 元素的 type 属性如果是 password 修改为 text
          => 判断 input 元素的 type 属性如果是 text 修改为 password
    */

    // 0. 获取元素
    var inp = document.querySelector('input')
    var btn = document.querySelector('button')

    // 1. 给 btn 绑定点击事件
    btn.onclick = function () {
      // 2. 拿到元素现在的 type 属性的值
      var current = inp.type

      // 3. 判断
      if (current === 'password') {
        // 设置为 text
        inp.type = 'text'
      } else {
        // 设置为 password
        inp.type = 'password'
      }
    }
  </script>
</body>
</html>