（javascript）（基础知识+实例） 10.DOMDOM（document object model）文档对象模

DOM（document object model）

文档对象模型和网页相关
操作网页样式
实现动画
实现事件交互
document是js自带的，可以通过document获取整个网页
获取标签几种方式
1. 通过id名来获取标签，返回就是这个标签
  - document.getElementById(id名称)
2. 通过类名来获取标签，返回是一个数组，数组里面是匹配的标签
  - document.getElementsByClassName(类名)
3. 通过标签名来获取标签，返回是一个数组，数组里面是匹配的标签
  - document.getElementsByTagName(标签名)
4. 通过querySelector选择器，css选择器
  - 只会匹配第一个标签
  - document.querySelector(css选择器)
5. 通过querySelector选择器，css选择器
  - 匹配所有满足的标签
  - document.querySelectorAll(css选择器)
操作标签的样式
- 获取样式
  - 获取行内的样式
    - 获取标签（元素）.style.css属性名
  - 获取任何地方写的样子(获取的是经过浏览器解析的样式) 非IE
    - getComputedStyle(元素).css属性名
  - ie8一下获取样式
    - 元素.currentStyle.css属性名
- 设置样式
  - 获取标签（元素）.style.css属性名 = css属性值
  - 通过js设置的是行内样式
  - 不是所有的样式都需要通过js来设置，一般通过js设置是动态样式
操作元素（标签）的属性
- 获取属性值
  - 元素.getAttribute(属性名)
- 设置属性值
  - 元素.setAttribute(属性名, 属性值)
- 获取自定义 data-名称 的属性
  - dataset
  - 元素.dataset.名称
操作元素的类名
- 通过添加或者移除类名的方式来实现修改样式
- 获取
  - 元素.getAttribute('class')
  - 元素.className
- 设置
  - 元素.setAttribute('class', 类名)
  - 元素.className = 类名
- 添加
  - 元素.classList.add(类名)
- 移除
  - 元素.classList.remove(类名)
操作内容
- 获取
  - 元素.innerHTML 带标签
  - 元素.innerText 不带标签
  - 元素.value
- 设置
  - 元素.innerHTML = 内容能够识别标签
  - 元素.innerText = 内容不能够识别标签
  - 元素.value = 内容
操作元素尺寸
- 尺寸：宽高
- 获取宽度
  - 元素.clientWidth 获取内容区+左右padding
  - 元素.offsetWidth 获取内容区+左右padding + 左右border
- 获取高度
  - 元素.clientHeight
  - 元素.offsetHeight
- 不支持设置的
操作元素的偏移
- 偏移：某一个元素左上角和页面左上角的距离
- 偏移是有两个方向一个距离页面顶部一个距离页面左边
- 哪些方式可以使元素发生偏移
- 如何获取偏移
  - 获取距离顶部偏移元素.offsetTop
  - 获取距离左边偏移元素.offsetLeft
- 设置元素的偏移
  - 元素.offsetTop = 值无法设置

事件 event

含义: 由用户行为触发的代码
组成部分
1. 事件源（给哪个元素绑定事件）
2. 事件类型（什么样用户行为）
3. 事件处理函数（要做什么事情）
绑定事件
1. html+js的方式
  - 在html某个标签上面写上一个on+事件类型="事件处理函数()"
  - 在js里面定义一个事件处理函数
2. 纯js的方式绑定事件
  - 获取要绑定事件的元素
  - 元素（事件源）.on+事件类型 = 事件处理函数
this关键字
- 在事件处理函数里面 this代表触发事件的事件源

实例

（以下代码均为课程实例）

（1）设置样式

<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>
    <style>
        .header{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="header">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat aperiam illo aliquam maiores voluptatum hic modi vitae non, incidunt rerum accusantium libero necessitatibus. Nulla assumenda minima distinctio nostrum, labore modi!
    </div>
    <div class="header">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat aperiam illo aliquam maiores voluptatum hic modi vitae non, incidunt rerum accusantium libero necessitatibus. Nulla assumenda minima distinctio nostrum, labore modi!
    </div>
    <script>
        // 1. 获取到这个元素
        var header = document.getElementsByClassName('header')
        console.log(header) 
        // 设置样式不是给数组设置 是给数组里面每一个元素来设置
        for(var i=0;i<header.length;i++){
            header[i].style.width = '200px'
            header[i].style.height = '200px'
            header[i].style.border = '1px solid black'
            // 如果是多个单词要使用驼峰命名法
            header[i].style.backgroundColor = 'red'
            header[i].style.color = 'white'
        }
       
    </script>
</body>

（2）间隔放大

<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>
    <style>
        .box{
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script>
        // 获取元素
        var box = document.querySelector('.box')
       
        // 间隔放大1倍
        setInterval(function(){
            // 每一秒钟都需要获取最新的宽高
            var oldWidth = getComputedStyle(box).width 
            var oldHeight = getComputedStyle(box).height
            console.log(oldWidth, oldHeight)  // '50px' * 2
            oldWidth = parseInt(oldWidth) // 50
            oldHeight = parseInt(oldHeight) // 50
            console.log(oldWidth, oldHeight)  // '50px' * 2
            box.style.width = oldWidth * 2 + 'px'
            box.style.height = oldHeight * 2 + 'px'
        }, 1000)
    </script>
</body>

（3）获取样式

<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>
    <style>
        .box{
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .red{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <div id="red">

    </div>
    <script>
        // 获取元素
        var box = document.querySelector('.box')
        console.log(box)
        // 只能获取到行内的样式
        console.log(box.style.width)
        console.log(box.style.height)
        // 获取任何地方写的样式
        // console.log(box.currentStyle.width)
        console.log(getComputedStyle(box).width)
        console.log(getComputedStyle(box).height)
        console.log(getComputedStyle(box).position)
        console.log(getComputedStyle(box).backgroundColor)

        // 获取元素
        var box02 = document.getElementById('red')
        console.log(box02)
        console.log(getComputedStyle(box02))
    </script>
</body>

（4）操作元素的属性

<body>
    <!-- 属性就是在标签上面的 name=value -->
    <div id="box" class="red" style="width:100px">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos ab voluptates tempora, voluptatum maiores autem enim atque iure ipsa vero nam itaque nobis cumque corrupti, ducimus architecto quaerat libero voluptas.
    </div>
    <script>
        // 获取元素
        var div = document.querySelector('div')
        // 获取属性值
        console.log(div.getAttribute('id'))
        console.log(div.getAttribute('class'))
        console.log(div.getAttribute('style'))
        // 设置属性值
        div.setAttribute('id', 'header')
        div.setAttribute('class', 'blue')
        div.setAttribute('style', 'border:1px solid black')
    </script>
</body>

（5）轮播图

<body>
    <img src="./imgs/01.png" alt="">
    <script>
        // 采用数组将所有图片的路径进行存储
        var imgList = ['./imgs/01.png', './imgs/02.jpg', './imgs/03.jpg', './imgs/04.jpg']
        // 获取元素
        var img = document.querySelector('img')
        // 定义一个变量用来表示当前是第几张图片
        var index = 0
        // 间隔换图
        setInterval(function(){
            // 让图片的下标+1
            index++
            // 如果到达最后一张 返回第一张
            if(index === imgList.length){
                index = 0
            }
            // 通过设置img的src属性来更换图片
            img.setAttribute('src', imgList[index])
        }, 2000)
    </script>
</body>

（6）自定义属性

<body>
    <!-- 自定义属性：不是标签原有的属性 一般用于存储数据 -->
    <div id="box" data-key="1" data-age="18" data-id="20">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum voluptatem rerum corporis autem, culpa nisi ea incidunt placeat in numquam optio recusandae voluptate soluta expedita, voluptatum quo et quos corrupti.
    </div>
    <script>
        // 获取元素
        var box = document.getElementById('box')
        // 获取属性值
        // console.log(box.getAttribute('data-key'))
        // console.log(box.getAttribute('data-age'))
        console.log(box.dataset) // {key: '1', age: '18'}
        console.log(box.dataset.key) // 1
        console.log(box.dataset.age) // 18
    </script>
</body>

（7）操作类名

<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>
    <style>
        .box{
            width: 300px;
            height: 300px;
            overflow-y: scroll;
            border: 1px solid #000;
        }
        .blue{
            background-color: blue;
            color: red;
        }
        .green{
            background-color: green;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="box" class="box">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas repellat reprehenderit mollitia tenetur in dolores natus alias, amet fuga aliquam dolore iusto aliquid expedita totam necessitatibus suscipit delectus debitis. Reprehenderit!
    </div>
    <script>
        var box = document.getElementById('box')
        console.log(box.getAttribute('class'))
        console.log(box.className)
        // box.setAttribute('class', 'blue') // 加上类名 就相当于加了一段样式
        // box.setAttribute('class', 'green') // 加上类名 就相当于加了一段样式
        // box.className = 'green'
        box.classList.add('green')
    </script>
</body>

（8）操作内容

<body>
    <div id="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <p>圣诞节奥斯卡的骄傲送达时间</p>
        <b>大家啊谁看得见爱撒娇</b>
    </div>
    <script>
        // 获取box里面的内容
        var box = document.getElementById('box')
        console.log(box.innerHTML)
        console.log(typeof box.innerHTML)
        console.log('=================')
        console.log(box.innerText)
        console.log(typeof box.innerText)
        // 设置box里面的内容
        // box.innerHTML = '<a href="https://www.baidu.com">超链接</a>'
        box.innerText = '<a href="https://www.baidu.com">超链接</a>'


        document.body.innerHTML = ''
    </script>
</body>

（9）输入框里面的内容

<body>
    <input type="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button onclick="get()">获取内容</button>
    <button onclick="set()">设置内容</button>
    <script>
        var inputEle = document.querySelector('input')
        var textArea = document.querySelector('textarea')
        function get(){
            console.log('get函数调用了...')
            // 获取输入input textarea里面的内容
            console.log(inputEle.value)
            console.log(textArea.value)
        }
        function set(){
            console.log('set函数调用了...')
            inputEle.value = '输入框的值'
            textArea.value = '文本域的值'
        }
    </script>
</body>

（10）敏感字过滤

<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>
    <style>
        .root{
            background-color: gray;
            color: #fff;
            font-size: 20px;
            border: 1px solid black;
            width: 50%;
            height: 300px;
        }
    </style>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button onclick="send()">发送</button>
    <div class="root">

    </div>
    <script>
        function send(){
            // 获取textarea里面的内容
            var textarea = document.querySelector('textarea')
            var value = textarea.value
            // 将内容做一个替换
            while(value.indexOf('傻逼') !== -1){
                value = value.replace('傻逼', '**')
            }
            // 将内容当成文本添加到root
            var root = document.querySelector('.root')
            root.innerHTML = value
        }


        // var str = 'aaaaaaa'
        // str = str.replace('a', 'b') // 'baaaaaa'
        // console.log(str)
        // str = str.replace('a', 'b')
        // console.log(str)
    </script>
</body>

（11）获取一个元素的宽高

<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>
    <style>
        .box{
            width: 200px;
            height: 200px;
            padding: 50px 30px 20px 10px;
            border: 10px solid #ddd;
            border-left-width: 20px;
            border-right-width: 9px;
            border-top-width: 18px;
            border-bottom-width: 7px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 
        盒模型

     -->
    <div class="box">

    </div>
    <script>
        // 用js获取box的宽和高
        var box = document.querySelector('.box')
        // 内容区宽度
        var content = getComputedStyle(box).width
        content = parseInt(content)
        // 左边padding
        var pl = getComputedStyle(box).paddingLeft
        pl = parseInt(pl)

        // 右边padding
        var pr = getComputedStyle(box).paddingRight
        pr = parseInt(pr)

        // 左边border
        var bl = getComputedStyle(box).borderLeftWidth
        bl = parseInt(bl)
        // 右边border
        var br = getComputedStyle(box).borderRightWidth
        br = parseInt(br)

        console.log(content + pl + pr + bl + br)
        // 宽度= 内容区宽度 + 左右padding + 左右的border
        // console.log(getComputedStyle(box).height) // 320

        console.log(box.offsetWidth)
        console.log(box.clientWidth)
    </script>
</body>

（12）设置元素的尺寸

<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>
    <style>
        .box{
            width: 200px;
            height: 200px;
            padding: 50px 30px 20px 10px;
            border: 10px solid #ddd;
            border-left-width: 20px;
            border-right-width: 9px;
            border-top-width: 18px;
            border-bottom-width: 7px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 
        盒模型

     -->
    <div class="box">

    </div>
    <script>
        // 用js获取box的宽和高
        var box = document.querySelector('.box')
        // box.clientWidth = 300
        box.offsetWidth = 100
    </script>
</body>

（13）获取偏移

<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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            /* margin: 20px 80px; */
            /* position: absolute; */
            /* left: 50px; */
            /* top: 90px; */
            float: right;
            /* transform: translate(50px, 100px); */
        }
    </style>
</head>
<body>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et laboriosam quod modi sit error dolor libero fugit dolores doloremque quae enim ad sed eos molestiae incidunt, esse animi placeat quasi.
    <div class="box">

    </div>
    <script>
        // 获取元素
        var box = document.querySelector('.box')
        // 获取距离顶部
        console.log(box.offsetTop)
        // 获取距离左边
        console.log(box.offsetLeft)

        box.offsetTop = 300
    </script>
</body>

（14）html+js的方式绑定事件

<body>
    <button onclick="doClick()">按钮</button>
    <script>
        function doClick(){
            console.log('事件处理函数')
        }
    </script>
</body>

（15）html+js的方式绑定事件案例

<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>
    <style>
        ul>li{
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid black;
        }
    </style>
</head>
<body>
    <ul>
        <li onclick="getContent(0)">这还是打算考虑到发射基地</li>
        <li onclick="getContent(1)">2大萨达萨达啥多</li>
        <li onclick="getContent(2)">3大萨达所该4234234234</li>
        <li onclick="getContent(3)">3大萨达所该4234234234</li>
    </ul>
    <script>
        // 获取所有的li
        var lis = document.querySelectorAll('ul>li')
        function getContent(num){
            console.log('获取内容...')
            alert(lis[num].innerText)
        }
    </script>
</body>

（16）纯js绑定事件

<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>
    <style>
        ul>li{
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid black;
        }
    </style>
</head>
<body>
    <button id="btn">按钮</button>
    <ul>
        <li>这还是打算考虑到发射基地</li>
        <li>2大萨达萨达啥多</li>
        <li>3大萨达所该4234234234</li>
        <li>3大萨达所该4234234234</li>
    </ul>
    <script>
        var btn = document.getElementById('btn')
        btn.onclick = function(){
            console.log('按钮被点击了')
        }

        // 获取所有的li
        var lis = document.querySelectorAll('ul>li')
        function doClick(){
            console.log('点击了...')
        }
        // console.log(lis)
        // 遍历数组获取里面每一项元素
        for(var i=0;i<lis.length;i++){
            // console.log(lis[i])
            // 事件源.on+事件类型 = 事件处理函数
            // 不加小括号相当于把doClick事件赋值给点击事件
            // 加小括号相当于把doClick的返回值赋值给点击事件
            // lis[i].onclick = undefined
            lis[i].onclick = doClick
        }
    </script>
</body>

（17）this 关键字

<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>
    <style>
        ul>li{
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid black;
        }
    </style>
</head>
<body>
    <ul>
        <li>这还是打算考虑到发射基地</li>
        <li>2大萨达萨达啥多</li>
        <li>3大萨达所该4234234234</li>
        <li>3大萨达所该4234234234</li>
    </ul>
    <script>
        var btn = document.getElementById('btn')
        function doClick(){
            console.log(this) // 代表当前是哪个li触发的点击事件
            alert(this.innerHTML)
        }
        // 获取所有的li
        var lis = document.querySelectorAll('ul>li')
        for(var i=0;i<lis.length;i++){
            lis[i].onclick = doClick
        }
    </script>
</body>

（18）思考题01

<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>
    <style>
        .box{
            width: 300px;
            height: 300px;
            overflow-y: scroll;
            border: 1px solid #000;
        }
        .blue{
            background-color: blue;
            color: red;
        }
        .green{
            background-color: green;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="box" class="box red haha">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas repellat reprehenderit mollitia tenetur in dolores natus alias, amet fuga aliquam dolore iusto aliquid expedita totam necessitatibus suscipit delectus debitis. Reprehenderit!
    </div>
    <script>
        var box = document.getElementById('box')
        // 保留原来的box样式
        // 获取之前的类名
        var oldClass = box.className
        /// 设置当前的类名
        box.className = oldClass + ' green'
    </script>
</body>

（19）思考题02

<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>
    <style>
        .box{
            width: 300px;
            height: 300px;
            overflow-y: scroll;
            border: 1px solid #000;
        }
        .blue{
            background-color: blue;
            color: red;
        }
        .green{
            background-color: green;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="box" class="box haha red">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas repellat reprehenderit mollitia tenetur in dolores natus alias, amet fuga aliquam dolore iusto aliquid expedita totam necessitatibus suscipit delectus debitis. Reprehenderit!
    </div>
    <script>
        var box = document.getElementById('box')
        // 只删除haha这个类名
        // replace 字符串替换
        /* 
            字符串.replace(要替换的内容, 替换后的内容)
        */

        var str = box.className
        str = str.replace('haha', '')
        console.log(str)
        box.className = str
    </script>
</body>