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

千锋IT教育

于 2023-05-04 19:55:12 发布

阅读量852

点赞数

分类专栏：前端 JavaScript全解析专栏文章标签： javascript css 前端

本文链接：https://blog.csdn.net/longz_org_cn/article/details/130493994

版权

前端同时被 2 个专栏收录

41 篇文章 19 订阅

订阅专栏

JavaScript全解析专栏

29 篇文章 2 订阅

订阅专栏

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

千锋IT教育

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM操作 - 元素操作方式（上）

●实际上就是操作元素的原生属性，只不过在js中class是一个关键字，所以我们操作原生属性改用className。●每一个元素都有一个属性叫做 classList，是一个类似数组的集合, 里面记录了元素所有的类名。●以下的所有操作属性的方式和方法, 均不操作类名(class) 和样式(style)●元素属性:书写在标签身上, 一个 key=value 的键值对, 叫做一条属性。●语法: 元素.classList.add('要添加的类名')○里面记录的是该元素身上所有的 data- 开头的自定义属性。
复制链接

扫一扫

专栏目录