DOM操作 - 元素操作方式（上）

柔光的暖阳◎ 2023-09-27 18:47 61阅读 0赞

操作元素样式  
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>
      
    
      <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>