国产睡熟迷奷白丝护士系列精品,中文色字幕网站,免费h网站在线观看的,亚洲开心激情在线

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

手機站

千鋒學習站 | 隨時隨地免費學

掃一掃進入千鋒手機站

領取全套視頻

關(guān)注千鋒學習站小程序
隨時隨地免費學習課程

當前位置：首頁 > 行業(yè)資訊 > JavaScript全解析——DOM操作 - 元素操作方式（上）

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

來源：千鋒教育

發(fā)布人：zyh

時間： 2023-06-02 09:45:00 1685670300

　　操作元素樣式

　　style

　　●專門用來給元素添加 css 樣式的

　　●在 JS 內(nèi)操作元素樣式style的情況分成三種

　　○設置元素的行內(nèi)樣式

　　○獲取元素行內(nèi)樣式(只能獲取到行內(nèi)樣式)

　　○獲取元素非行內(nèi)樣式(可以獲取行內(nèi)樣式也可以獲取非行內(nèi)樣式)

　　■非行內(nèi)樣式有內(nèi)嵌式和外鏈式

<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是一個關(guān)鍵字，所以我們操作原生屬性改用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，是一個類似數(shù)組的集合, 里面記錄了元素所有的類名

　　●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 規(guī)范中提到的屬性, 對標簽有一定的特殊意義或者描述作用

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

　　●自定義屬性

　　○對于標簽沒有特殊的作用或者描述任務, 只是用來在標簽身上記錄一些信息

　　●H5 自定義屬性

　　○只是 H5 自定義屬性會以 data- 開頭, 直觀的看出來是自定義屬性

　　○設置的方式: data-屬性名=屬性值

　　操作元素屬性

　　●以下的所有操作屬性的方式和方法, 均不操作類名(class) 和樣式(style)

　　●操作原生屬性

　　○直接依靠屬性名進行操作

　　■獲取: 元素.屬性名

　　●得到的就是該元素指定屬性的值

　　■設置: 元素.屬性名 = 屬性值

　　●作用修改該屬性的值

　　●操作自定義屬性

　　○獲取:

　　■語法: 元素.getAttribute(屬性名)

　　■返回值: 元素中該屬性對應的值

　　○設置:

　　■語法: 元素.setAttribute(屬性名, 屬性值)

　　■作用: 設置或者修改一條自定義屬性

　　○刪除:

　　■語法: 元素.removeAttribut(屬性名)

　　■作用: 刪除元素身上該自定義屬性

　　●操作H5 自定義屬性

　　○每一個元素身上自帶一個屬性, 叫做 dataset, 是一個類似于對象的數(shù)據(jù)結(jié)構(gòu)

　　○里面記錄的是該元素身上所有的 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. 拿到元素現(xiàn)在的 type 屬性的值
      var current = inp.type

      // 3. 判斷
      if (current === 'password') {
        // 設置為 text
        inp.type = 'text'
      } else {
        // 設置為 password
        inp.type = 'password'
      }
    }
  </script>
</body>
</html>