DOM（文档对象模型）和BOM（浏览器对象模型）

元素获取

获取网页标签DOM Element

通过document.getElementById获取到了标签block

可以通过JS修改标签的文本内容，具体如下

同样，也可以通过标签类型索引到标签，修改单个标签也是和数组一样（但这里不是数组，是伪数组），通过索引的方式取出其中的某一个进行操作

如果要进行统一操作，就需要通过for循环遍历，和遍历数组是一样的

同时，根据给定的数据对当前网页中标签的动态生成也很常用

这里就是用给定数据的第i个元素替代标签的第i个元素

这个就是根据数据生成对应结构，进行内容处理

同时html5还提供了其他获取标签的方式

document.querySelectorAll
这个是按照选择器获取元素

document.querySelector
按照选择器获取匹配到的第一个元素

可以看到有两个item标签，但是只获取了第一个，同时也可以根据previous和next获取这个元素的前一个和后一个元素

也可以通过parentElement获取或修改父元素

var container = secondItem.parentElement
        //父元素获取
        console.log(container)
        container.textContent = '新元素'

再就是可以通过父元素获取子元素

var items = container.children
        //根据父元素获取子元素
        console.log(items)

这么多总结起来就一句，就是可以根据元素和元素之间的关系去获取其他元素

<!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="block">内容</div>
    <div class="test">
        <p>标签内容1</p>
        <p class="item">标签内容2</p>
        <p>标签内容3</p>
        <p class="item">标签内容4</p>
    </div>

    <script>
        var block = document.getElementById('block')
        block.textContent = '这是通过JS修改之后的'

        var contents = document.querySelectorAll('.test p')
        //按照选择器进行元素获取的处理方式 和css选择器使用方式一样
        // var contents = document.getElementsByTagName('p')
        console.log(contents)
        // contents[0].textContent = '这是第一个p标签'

        // for (var i = 0; i < contents.length; i++) {
        //     contents[i].textContent = '这是通过遍历统一修改'
        // }
        // var textArr = [
        //     '张三',
        //     '李四',
        //     '王五',
        //     '马六'
        // ]
        // for (var i = 0; i < contents.length; i++) {
        //     contents[i].textContent = textArr[i]
        // }
        var secondItem = document.querySelector('.item')
        secondItem.textContent = '害群的马'
        secondItem.previousElementSibling.textContent = '划水的鱼'
        //获取前一个元素
        secondItem.nextElementSibling.textContent = '装饭的桶'
        //获取后一个元素

        var container = secondItem.parentElement
        //父元素获取
        console.log(container)
        // container.textContent = '新元素'

        var items = container.children
        //根据父元素获取子元素
        console.log(items)


    </script>
</body>

</html>

文本处理

文本处理除了前面使用的textContent，还有innerHTML，有所区别的是，前者只能设置纯文本，而innerHTML可以进行标签生成

这里可以清楚的看到，通过innerHTML修改的文本里面可以加标签，且标签可以通过css样式更改效果

<!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="block">内容</div>

    <script>
        var block = document.querySelector('#block')
        block.innerHTML = '普通文本 <span class=bold-text>加粗文本</span>'
    </script>
    <style>
        .bold-text {
            font-size: 30px;
            font-weight: 600;
        }
    </style>
</body>

</html>

事件处理

也可以通过JS进行一些事件处理，就比如说下面这个onclick点击事件，点击block后就会触发函数，函数内容是跳出警告窗

上面这个是比较老的方式，还有一种新方式

先来看结构addEventListener，后面跟着两个参数，参数一是事件类型，参数二是要实现的功能，相比上面那个功能也更丰富

对比一下

使用上面这种方式，如果重复的话，就会只显示后出现的，所以这里的suprise被suprise again覆盖掉了

而使用addEventListener之后，就算是重复出现，第一次先显示上面那条suprise，点击确认后还会显示第二条suprise again，不会出现被覆盖的情况

<!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="block">内容</div>

    <script>
        var block = document.querySelector('#block')

        // block.onclick = function () {
        //     alert('suprise')
        // }
        // block.onclick = function () {
        //     alert('suprise again')
        // }
        block.addEventListener('click', function () {
            alert('suprise')
        })
        block.addEventListener('click', function () {
            alert('suprise again')
        })
    </script>

</body>

</html>

轮播图功能

<!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>
    <ul id="carousel">
        <li class="active">划水的鱼</li>
        <li>缩头的龟</li>
        <li>害群的马</li>
        <li>墙头的草</li>
    </ul>

    <button id="prev">上一个</button>
    <button id="next">下一个</button>

    <script>
        var carousel = document.querySelector('#carousel')
        var items = carousel.children
        var prevBtn = document.querySelector('#prev')
        var nextBtn = document.querySelector('#next')

        var index = 0
        nextBtn.addEventListener('click', function () {
            items[index].className = ''
            if (index === items.length - 1) {
                index = -1
            }
            index++
            items[index].className = "active"
        })
        prevBtn.addEventListener('click', function () {
            items[index].className = ''
            if (index === 0) {
                index = items.length
            }
            index--
            items[index].className = "active"
        })
    </script>

    <style>
        #carousel {
            width: 300px;
            height: 200px;
            position: relative;
            margin: 0;
            padding: 0;
        }

        #carousel li {
            width: 300px;
            line-height: 200px;
            position: absolute;
            text-align: center;
            text-shadow: 0 0 2px #000;
            font-size: 30px;
            color: #fff;
            opacity: 0;
            transition: opacity 1s;
        }

        #carousel li:nth-child(1) {
            background-color: aquamarine;
        }

        #carousel li:nth-child(2) {
            background-color: aqua;
        }

        #carousel li:nth-child(3) {
            background-color: greenyellow;
        }

        #carousel li:nth-child(4) {
            background-color: chartreuse;
        }

        #carousel li.active {
            opacity: 1;
        }
    </style>

</body>

</html>

定时器

延迟定时器

        setTimeout(function () {
            alert('suprise')
        }, 2000)

这里这个代码不会立刻执行，会在延迟一定时间后执行，这里2000是两秒

间隔执行定时器

        setInterval(function () {
            console.log('suprise')
        }, 2000)

这个定时器会每隔一段时间后都会执行，但是怎么停下来呢？
可以和上面的结合一下

        var Timer = setInterval(function () {
            console.log('suprise')
        }, 2000)

        setTimeout(function () {
            clearInterval(Timer)
        }, 6000)

这段代码的意思是，每隔2s执行一次console.log('suprise')，在第6s的时候清除

同样，可以根据这个定时器实现轮播图的自动播放，原理和next按钮一样

<!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>
    <ul id="carousel">
        <li class="active">划水的鱼</li>
        <li>缩头的龟</li>
        <li>害群的马</li>
        <li>墙头的草</li>
    </ul>

    <!-- <button id="prev">上一个</button>
    <button id="next">下一个</button> -->

    <script>
        var carousel = document.querySelector('#carousel')
        var items = carousel.children
        var prevBtn = document.querySelector('#prev')
        var nextBtn = document.querySelector('#next')

        var index = 0
        // nextBtn.addEventListener('click', function () {
        //     items[index].className = ''
        //     if (index === items.length - 1) {
        //         index = -1
        //     }
        //     index++
        //     items[index].className = "active"
        // })
        // prevBtn.addEventListener('click', function () {
        //     items[index].className = ''
        //     if (index === 0) {
        //         index = items.length
        //     }
        //     index--
        //     items[index].className = "active"
        // })

        setInterval(function () {
            items[index].className = ''
            if (index === items.length - 1) {
                index = -1
            }
            index++
            items[index].className = "active"
        }, 2500)
    </script>

    <style>
        #carousel {
            width: 300px;
            height: 200px;
            position: relative;
            margin: 0;
            padding: 0;
        }

        #carousel li {
            width: 300px;
            line-height: 200px;
            position: absolute;
            text-align: center;
            text-shadow: 0 0 2px #000;
            font-size: 30px;
            color: #fff;
            opacity: 0;
            transition: opacity 1s;
        }

        #carousel li:nth-child(1) {
            background-color: aquamarine;
        }

        #carousel li:nth-child(2) {
            background-color: aqua;
        }

        #carousel li:nth-child(3) {
            background-color: greenyellow;
        }

        #carousel li:nth-child(4) {
            background-color: chartreuse;
        }

        #carousel li.active {
            opacity: 1;
        }
    </style>

</body>

</html>

菜单

分享

DOM与网页效果制作

DOM（文档对象模型）和BOM（浏览器对象模型）

元素获取

文本处理

事件处理

轮播图功能

定时器

搭建个人博客时遇到的问题（理论基础）

vue-router实现页面跳转

RUST学习

vue详解

Rust的复合类型

ES6核心语法

通过HTML和CSS写一个简单的登录页面

DOM与网页效果制作

JS学习

用rust写一个简单的存档修改器