三. DOM

DOM（Document Object Model）：文档对象模型
其实就是操作 html 中的标签的一些能力
我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面里面添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些 css 样式
- ...
DOM 的核心对象就是 docuemnt 对象
document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
DOM：页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象

1. 获取一个元素

通过 js 代码来获取页面中的标签
获取到以后我们就可以操作这些标签了

1-1. 获取html,head,body 非常规元素

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

   <ul>
       <li>111</li>
       <li>111</li>
       <li>111</li>
       <li>111</li>
       <li>111</li>
       <li>111</li>
       <li>111</li>
   </ul>


   <script>
       // console.log(box)
       // box.innerHTML = "11111"
   
       /*
         html,head,body 非常规

         常规=>id,class,tag,,,,,
       */

       // console.log(document.documentElement) // rem
       // console.log(document.head) // 获取head
       // console.log(document.body) //获取body
       
       
   </script>
</body>

1-2. 获取常规元素body里常规属性

1-2-1 getElementById

getElementById 是通过标签的 id 名称来获取标签的

因为在一个页面中 id 是唯一的，所以获取到的就是一个元素

<body>
  <div id="box"></div>
  <script>
  	var box = document.getElementById('box')
  	console.log(box) // <div></div>
  </script>
</body>

获取到的就是页面中的那个 id 为 box 的 div 标签

1-2-2 getElementsByClassName

getElementsByClassName 是用过标签的 class 名称来获取标签的
因为页面中可能有多个元素的 class 名称一样，所以获取到的是一组元素
哪怕你获取的 class 只有一个，那也是获取一组元素，只不过这一组中只有一个 DOM 元素而已
```
<body>
  <div calss="box"></div>
  <script>
  	var box = document.getElementsByClassName('box')
  	console.log(box) // [<div></div>]
    console.log(box[0]) // <div></div>
  </script>
</body>
```
- 获取到的是一组元素，是一个长得和数组一样的数据结构，但是不是数组，是 伪数组
- 这个一组数据也是按照索引排列的，所以我们想要准确的拿到这个 div，需要用索引来获取

1-2-3 getElementsByTagName

getElementsByTagName 是用过标签的标签名称来获取标签的
因为页面中可能有多个元素的标签名称一样，所以获取到的是一组元素
哪怕真的只有一个这个标签名，那么也是获取一组元素，只不过这一组中只有一个 DOM 元素而已
```
<body>
  <div></div>
  <script>
  	var box = document.getElementsByTagName('div')
  	console.log(box) // [<div></div>]
    console.log(box[0]) // <div></div>
  </script>
</body>
```
- 和 getElementsByClassName 一样，获取到的是一个长得很像数组的元素
- 必须要用索引才能得到准确的 DOM 元素

1-2-4 querySelector

querySelector 是按照选择器的方式来获取元素
也就是说，按照我们写 css 的时候的选择器来获取

这个方法只能获取到一个元素，并且是页面中第一个满足条件的元素

console.log(document.querySelector('div')) // 获取页面中的第一个 div 元素
console.log(docuemnt.querySelector('.box')) // 获取页面中第一个有 box 类名的元素
console.log(document.querySelector('#box')) // 获取页面中第一个 id 名为 box 的元素

1-2-5 querySelectorAll

querySelectorAll 是按照选择器的方式来获取元素

这个方法能获取到所有满足条件的元素，以一个伪数组的形式返回

console.log(document.querySelectorAll('div')) // 获取页面中的所有的 div 元素
console.log(docuemnt.querySelectorAll('.box')) // 获取页面中所有有 box 类名的元素

获取到的是一组数据，也是需要用索引来获取到准确的每一个 DOM 元素

2. 操作属性

通过我们各种获取元素的方式获取到页面中的标签以后
我们可以直接操作 DOM 元素的属性，就能直接把效果展示在页面上

2-1 innerHTML

获取元素内部的 HTML 结构

<body>
  <div>
    <p>
      <span>hello</span>
    </p>
  </div>

  <script>
    var div = document.querySelector('div')
    console.log(div.innerHTML)
      /*

          <p>
            <span>hello</span>
          </p>

	  */
  </script>
</body>

设置元素的内容

<body>
  <div></div>

  <script>
    var div = document.querySelector('div')
   	div.innerHTML = '<p>hello</p>'
  </script>
</body>

设置完以后，页面中的 div 元素里面就会嵌套一个 p 元素

<body>
    <div id="box" kerwin="hello">hello </div>
    <input type="text" value="hello" id="username">

    <input type="checkbox" checked id="rember" />

    <img src="" alt="" id="photo">
    <script>
        /*
          元素自带（原生）属性
          自定义属性
        */
        //操作原生属性
        box.innerHTML = "22222"

        username.type = "password"

        // console.log()
        rember.checked = false

        photo.src =
            "https://static.maizuo.com/pc/v5/usr/movie/46015aa8e08a661e7c559b6e7407ce08.jpg?x-oss-process=image/quality,Q_70"

    </script>
</body>

2-2 innerText

获取元素内部的文本（只能获取到文本内容，获取不到 html 标签）

<body>
  <div>
    <p>
      <span>hello</span>
    </p>
  </div>

  <script>
    var div = document.querySelector('div')
    console.log(div.innerText) // hello
  </script>
</body>

可以设置元素内部的文本

<body>
  <div></div>

  <script>
    var div = document.querySelector('div')
   	div.innerText = '<p>hello</p>'
  </script>
</body>

设置完毕以后，会把 <p>hello</p> 当作一个文本出现在 div 元素里面，而不会把 p 解析成标签

2-3 getAttribute

获取元素的某个属性（包括自定义属性）

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

  <script>
    var div = document.querySelector('div')
   	console.log(div.getAttribute('a')) // 100
    console.log(div.getAttribute('class')) // box
  </script>
</body>

2-4 setAttribute

给元素设置一个属性（包括自定义属性）

<body>
  <div></div>

  <script>
    var div = document.querySelector('div')
   	div.setAttribute('a', 100)
    div.setAttribute('class', 'box')
    console.log(div) // <div a="100" class="box"></div>
  </script>
</body>

2-5 removeAttribute

直接移除元素的某个属性

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

  <script>
    var div = document.querySelector('div')
   	div.removeAttribute('class')
    console.log(div) // <div a="100"></div>
  </script>
</body>

<body>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
    </ul>

    <div id="box2" data-kerwin="hello" data-tiechui="hello2"></div>
    <script>
        //推荐自定义属性
        //自定义属性 setAttribute getAttibute removeAttibute

        // box.tiechui = "222222"

        box.setAttribute("tiechui", "222222")
        console.log(box.getAttribute("tiechui"))

        box.removeAttribute("tiechui")
        box.removeAttribute("kerwin")

        //h5 ===> 约定 data-******  .dataset

        console.log(box2.dataset)

        box2.dataset.xiaoming = "hello3"

        delete box2.dataset.xiaoming
        delete box2.dataset.kerwin
        delete box2.dataset.tiechui


        var oitems = document.getElementsByTagName("li")

        for (var i = 0; i < oitems.length; i++) {
            oitems[i].dataset.index = i
        }
    </script>
</body>

2-6 style

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

添加的都是行内样式

<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，背景颜色是粉色

2-7 获取元素的非行间样式

我们在操作 DOM 的时候，很重要的一点就是要操作元素的 css 样式
那么在操作 css 样式的时候，我们避免不了就要获取元素的样式
之前我们说过可以用 元素.style.xxx 来获取

但是这个方法只能获取到元素 行间样式，也就是写在行内的样式

<style>
  div {
    width: 100px;
  }
</style>
<body>
  <div style="height: 100px;">
    <p>我是一个 p 标签</p>
  </div>

  <script>
    var oDiv = document.querySelector('div')
		console.log(oDiv.style.height) // 100px
    console.log(oDIv.style.width) // ''
  </script>
</body>

不管是外链式还是内嵌式，我们都获取不到该元素的样式
这里我们就要使用方法来获取了 getComputedStyle 和 currentStyle
这两个方法的作用是一样的，只不过一个在 非 IE 浏览器，一个在 IE 浏览器

getComputedStyle（非IE使用）

语法：window.getComputedStyle(元素, null).要获取的属性

<style>
  div {
    width: 100px;
  }
</style>
<body>
  <div style="height: 100px;">
    <p>我是一个 p 标签</p>
  </div>

  <script>
    var oDiv = document.querySelector('div')
		console.log(window.getComputedStyle(oDiv).width) // 100px
    console.log(window.getComputedStyle(oDiv).height) // 100px
  </script>
</body>

<style>
  div {
    width: 100px;
  }
</style>
<body>
  <div style="height: 100px;">
    <p>我是一个 p 标签</p>
  </div>

  <script>
    var oDiv = document.querySelector('div')
		console.log(oDiv.currentStyle.width) // 100px
    console.log(oDiv.currentStyle.height) // 100px
  </script>
</body>

2-8 className

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

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

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

也可以设置元素的类名，不过是全覆盖式的操作

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

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

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

案例

1.密码可视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="password" id="password">
    <button id="eyebtn">eye</button>
    <script>
        var passInput = document.getElementById("password")
        var eyeBtn = document.querySelector("#eyebtn")

        eyeBtn.onclick = function(){
            console.log(passInput.type)

            if(passInput.type==="password"){
                passInput.type = "text"
            }else{
                passInput.type = "password"
            }
        }
    </script>
</body>
</html>

2.购物车全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" id="all">全选/全不选
    <hr>
    <ul class="shop">
        <li>
            <input type="checkbox">商品1
        </li>
        <li>
            <input type="checkbox">商品2
        </li>
        <li>
            <input type="checkbox">商品3
        </li>
        <li>
            <input type="checkbox">商品4
        </li>
    </ul>
    <script>
        var oAll = document.querySelector("#all")
        var oitems = document.querySelectorAll(".shop input")
 
        // console.log(oitems)
        oAll.onclick = function(){
            // console.log(oAll.checked)
            for(var i=0;i<oitems.length;i++){
                oitems[i].checked = oAll.checked
            }
        }
        
        for(var i=0;i<oitems.length;i++){
            oitems[i].onclick = handler
        }

        function handler(){
            var count = 0

            for(var i=0;i<oitems.length;i++){
                if(oitems[i].checked) count++
            }

            if(count===oitems.length){
                oAll.checked = true
            }else{
                oAll.checked = false
            }
        }
    </script>
</body>
</html>

3.操作元素文本内容

innerHTML

innerText

value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        hello world 
        <div>kerwin</div>
    </div>

    <input type="text" id="username" value="hello">

    <select name="" id="select">
        <option value="1">11111</option>
        <option value="2" selected>2222</option>
        <option value="3">3333</option>
    </select>

    <script>
        // innerHTML
        // innerText
        // value

        console.log(box.innerHTML)
        // box.innerHTML = "<h1>11111111</h1>"

        console.log(box.innerText) // 获取只有文本  获取box内全部内容   hello world 
        <div>kerwin</div>

        box.innerText = "<h1>1111111</h1>" //不解析 html 
获取为<h1>1111111</h1>

        console.log(box.value)

        username.value = "2222222"


        console.log(select.value)
        select.value = "3"

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

3-1.案例：渲染页面

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        li {
            overflow: hidden;
        }

        li img {
            float: left;
            width: 100px;
        }
    </style>
</head>

<body>
    <ul>
        <!-- <li>
            <img src="https://pic.maizuo.com/usr/movie/46015aa8e08a661e7c559b6e7407ce08.jpg?x-oss-process=image/quality,Q_70" alt="">
            <h3>神奇动物:邓布利多之谜</h3>
            <p>观众评分 7.8</p>
        </li> -->
    </ul>
    <script>
        var filmList = [{
                url: "https://pic.maizuo.com/usr/movie/89689a6d36e155b697ed3e35a6c1da12.jpg?x-oss-process=image/quality,Q_70",
                title: "长津湖之水门桥",
                grade: 8.8
            },
            {
                url: "https://pic.maizuo.com/usr/movie/6feeed3643a96934a81d4c7c0b11dad5.jpg?x-oss-process=image/quality,Q_70",
                title: "出拳吧，妈妈",
                grade: 7.6
            },
            {
                url: "https://pic.maizuo.com/usr/movie/e26ccb7bc562573ab2032d752d55d45f.jpg?x-oss-process=image/quality,Q_70",
                title: "小美人鱼的奇幻冒险",
                grade: 7.7
            }
        ]

        var filmItems = filmList.map(function (item) {
            return `<li>
            <img src="${item.url}" alt="">
            <h3>${item.title}</h3>
            <p>观众评分 ${item.grade}</p>
        </li>`
        })

        console.log(filmItems.join(""))

        var oul = document.querySelector("ul")

        oul.innerHTML = filmItems.join("")
    </script>
</body>

</html>

4 操作元素样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #box{
            height: 100px;
            
        }
    </style>
</head>
<body>

    <div id="box" style="width: 100px;color:black;background-color: yellow;">11111</div>
    <script>
        // 只能获取 行内样式方法 style --读写，可读可写

        console.log(box.style.width)
        console.log(box.style["background-color"]) //复合属性不能直接写 写法一
        console.log(box.style.backgroundColor) //驼峰 写法二


        box.style.width = "200px"   //赋值改变属性
        box.style.backgroundColor = "red"


        // 内部样式，外部样式，行内 getComputedStyle 获取，不能赋值写样式。
        var obox  = document.getElementById("box") 
        // var res = getComputedStyle(obox)["background-color"]
        var res = getComputedStyle(obox).backgroundColor
        console.log(res)

        getComputedStyle(obox).width="10px"

        // getComputedStyle 标准 
        // ie 低版本  obox.currentStyle.backgroundColor
    </script>
</body>
</html>

5 操作元素类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .item {
            width: 100px;
            height: 100px;
            background-color: red;
            color:black;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div id="box" class="item item1 item2">kerwin</div>

    <button id="btn">click</button>
    <script>
        // .className


        // console.log(box.className)

        // box.className = "item item2"
        // box.className = " item3"
        // box.className = "item item2 item2 item3"


        // classList属性

        console.log(box.classList) // 'item','item1','item2'

        // box.classList.add("item3") // class="item item1 item2 item3"

        // box.classList.add("item2") // class="item item1 item2" 自动去重

        box.classList.remove("item2") // class="item item1"
        box.classList.remove("item1") // class="item"


        //切换 toggle 本身有就删除，没有就添加上

        btn.onclick = function(){
            box.classList.toggle("item")
        }
    </script>
</body>
</html>

5-1案例

简易选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul {
            display: flex;
            list-style: none;
        }
        li{
            height: 50px;
            line-height: 50px;
            text-align: center;
            flex:1;
        }

        .active{
            color:red;
            border-bottom: 1px solid red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="active" id="item1">正在热映</li>
        <li id="item2">即将上映</li>
        
    </ul>
    <script>
        item1.onclick = function(){
            item1.classList.add("active") //增加item1
            item2.classList.remove("active") //删除item2
        }

        item2.onclick = function(){
            item1.classList.remove("active")
            item2.classList.add("active")
        }

        //选项卡
    </script>
</body>
</html>

5-2案例

选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style:none;
        }
        .header{
            display: flex;
            width: 500px;
        }
        .header li {
            flex:1;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border:1px solid black;
        }

        .box {
            position: relative;
        }
        .box li {
            position: absolute;
            left:0;
            top:0;
            width: 500px;
            height: 200px;
            background-color: yellow;
            display: none;
        }

        .header .active{
            background-color: red;
        }
        .box .active{
            display: block;
        }
    </style>
</head>
<body>
    <ul class="header">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <ul class="box">
        <li class="active">111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        <li>666</li>
    </ul>
    <script>
        var oHeaderItems = document.querySelectorAll(".header li")
        var oBoxItems = document.querySelectorAll(".box li")

        for(var i=0; i<oHeaderItems.length; i++){
            //自定义属性
            oHeaderItems[i].dataset.index = i
            oHeaderItems[i].onclick = handler
        }
        // console.log(i)

        function handler(){
            // console.log(this.dataset.index)
            var index = this.dataset.index //this表示当前点击的这一个
            for(var m=0;m<oHeaderItems.length; m++){
                oHeaderItems[m].classList.remove("active")
                oBoxItems[m].classList.remove("active")
            }

            oHeaderItems[index].classList.add("active")
            oBoxItems[index].classList.add("active")
        }
    </script>
</body>
</html>

三. DOM属性与操作1-5 （P77-P87）