WebAPI—DOM （HTTL、CSS、Java Script应用及案例）

WebAPI—DOM （HTTL、CSS、Java Script应用）

1. DOM 基本概念

DOM 全称为 Document Object Model

一个页面的结构是一个树形结构，称为 DOM 树

2. 选择元素 `querySelector`

querySelector

querySelector 选择器选中的元素如果有多个，只能获取到其中的第一个

let div = document.querySelector('div');
// 使用 log 打印一个元素对象 (element), 此时看到的是 html 片段
console.log(div);
// 使用 dir 打印一个元素对象，此时就能看到里面的具体属性
console.dir(div);

querySelectorAll

可以选中多个元素返回一个“伪数组”

3. 事件 `.onclick`

用户的一些操作，就会触发事件。根据用户的操作，做出不同的响应

    <!-- 点击事件 -->
	<input type="button" value="按钮" onclick="test()">

    <script>
        // 法一
        function test() {
            console.log("用户点击了按钮");
        }
    </script>

    <input type="button" value="按钮">

    <script>
        // 法二
        let button = document.querySelector('input');
        button.onclick = function () {
            console.log("用户点击了按钮");
        }
	</script>

其他标签也可以实现相同效果

    <style>
        div {
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: gray;
            color: white;
        }
        div:active {
            background-color: orange;
        }
    </style>

    <div>按钮</div>

    <script>
        let button = document.querySelector('div');
        button.onclick = function () {
            console.log("用户点击了按钮");
        }
	</script>

4. 元素操作`innerHTML`

操作一个HTML对应的对象

获取/修改 元素里面的内容

innerText 只能获取/修改元素里面的文本

innerHTML 可以获取/修改文本，也可以获取修改里面的嵌套的标签

let button = document.querySelector('div');
console.log(button.innerHTML);
button.innerHTML = '<span>按钮</span>';

👉案例 - 显示/隐藏密码

    <input type="password" id="input">
    <input type="button" id="button" value="显示密码">

    <script>
        let input = document.querySelector('#input');
        let button = document.querySelector('#button');
        button.onclick = function() {
            if (input.type == 'text') {
                input.type = 'password';
                button.value = '隐藏密码';
            } else if (input.type == 'password') {
                input.type = 'text';
                button.value = '隐藏密码';
            }
        }
    </script>

👉案例 - 自增

    <input type="text" id="number" value="0">
    <input type="button" value="自增" id="button">

    <script>
        let button = document.querySelector('#button');
        button.onclick = function() {
            let number = document.querySelector('#number');
            let value = parseInt(number.value);
            value += 1;
            number.value = value;
        }
    </script>

👉案例-字体变化

    <div style="font-size: 20px;">这是一行字</div>

    <script>
        // 先获取到 div 对象, 关联点击事件, 
        let div = document.querySelector('div');
        div.onclick = function () {
            let fontSize = parseInt(div.style.fontSize);
            fontSize += 5;
            div.style.fontSize = fontSize + 'px';
        }
	</script>

👉案例-夜间模式切换

    <!-- 切换夜间模式 -->
    <style>
        .light {
            background-color: white;
            color: black;
        }
        .night {
            background-color: #666;
            color: #eee;
        }
    </style>
    <div class="light">
        这是一大堆话<br>
        这是一大堆话<br>
    </div>
    <script>
        let div = document.querySelector('div');
        div.onclick = function() {
            if (div.className == 'light') {
                div.className = 'night';
            } else if (div.className == 'night') {
                div.className = 'light';
            }
        }
	</script>

5. 节点操作

新增节点 `createElement`

        let div = document.createElement('div');
        div.innerHTML = '这是一个div';
        div.style.fontSize = '30px';

插入节点 `appendChild`

不能重复插入，如果将同一个元素插入两次，则最终效果为最后一次插入的位置

appendChild 插入该类中最后位置

    <div class="container"></div>
    <script>
        let div = document.createElement('div');
        div.innerHTML = '这是一个div';
        div.style.fontSize = '30px';

        let container = document.querySelector('.container');
        container.appendChild(div);
    </script>

insertBefore(要插入的元素, 插入的位置); 插入任意位置

    <div class="container">
        <div class="one">第一个元素</div>
        <div class="two">第二个元素</div>
    </div>

    <script>
        let div = document.createElement('div');
        div.innerHTML = '这是一个div';
        div.style.fontSize = '30px';

        let container = document.querySelector('.container');
        // let two = document.querySelector('.two');
        let two = container.children[1];
        container.insertBefore(div, two);
    </script>

删除节点 `removeChild`

		container.removeChild(div);

👉案例-猜数字

<!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>猜数字游戏</title>
</head>
<body>
    <input type="button" value="重新开始一局游戏" id="reset">
    <div>
        <span>请输入要猜的数组：</span>
        <input type="text" id="num">
        <input type="button" value="猜" id="guess">
    </div>
    <div>
        <span>已经猜的次数：</span>
        <span id="count">0</span>
    </div>
    <div>
        <span>猜的结果：</span>
        <span id="result"></span>
    </div>

    <script>
        // 先把需要用到的 JS 对象准备好
        let resultButton = document.querySelector('#reset');
        let numInput = document.querySelector('#num');
        let guessButton = document.querySelector('#guess');
        let countSpan = document.querySelector('#count');
        let resultSpan = document.querySelector('#result');

        // 生成一个 1-100 之间的随机的整数
        let toGuess = Math.floor(Math.random()*100) + 1;
        let count = 0;
        console.log("toGuess: " + toGuess);

        guessButton.onclick = function() {
            // 用户点击 猜 这个按钮，首先先更新点击次数的显示
            count++;
            countSpan.innerHTML = count;
            // 读取到输入框的内容，进行判定
            let num = parseInt(numInput.value);
            console.log("num: " + num);

            if (num < toGuess) {
                resultSpan.innerHTML = '猜低了';
                resultSpan.style.color = 'red';
            } else if (num > toGuess) {
                resultSpan.innerHTML = '猜高了';
                resultSpan.style.color = 'orange';
            } else {
                resultSpan.innerHTML = '猜对了';
                resultSpan.style.color = 'green';
            }
        }

        resultButton.onclick = function() {
            // 把 toGuess 和 count 清空，同时重新生成一个随机的整数
            toGuess = Math.floor(Math.random()*100) + 1;
            count = 0;
            resultSpan.innerHTML = '';
            countSpan.innerHTML = '';
            numInput.value = '';
        }
    </script>
</body>
</html>

👉案例-表白墙/留言板

<!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>表白墙</title>
</head>
<body>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 600px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            padding: 20px 0;
        }
        p {
            font-size: 12px;
            color: #666;
            padding: 10px 0;
            text-align: center;
        }
        .row {
            display: flex;
            height: 40px;
            align-items: center;
            justify-content: center;
        }
        .row span {
            width: 100px;
        }

        .row .edit {
            width: 200px;
            height: 36px;
        }

        .row .submit {
            width: 300px;
            height: 40px;
            color: #fff;
            background-color: orange;
            /* 去掉边框 */
            border: none;
        }

        .row .submit:active {
            background-color: green;
        }
    </style>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入后点击提交，将会把消息显示在墙上</p>
        <div class="row">
            <span>谁：</span>
            <input type="text" class="edit">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input type="text" class="edit">
        </div>
        <div class="row">
            <span>说什么：</span>
            <input type="text" class="edit">
        </div>
        <div class="row">
            <input type="button" value="提交" class="submit">
        </div>
    </div>

    <script>
        let submitButton = document.querySelector('.submit');
        submitButton.onclick = function() {
            // 1. 获取到输入框里面的内容
            let edits = document.querySelectorAll('.edit');
            let from = edits[0].value;
            let to = edits[1].value;
            let message = edits[2].value;
            console.log(from + ", " + to + ", " + message);
            if (from == '' || to == '' || message == '') {
                return;
            }
            // 2. 根据输入框的内容，构造 HTML 元素，添加到页面中
            //      接下来的每个消息，都使用 div.row 来去表示
            let row = document.createElement('div');
            row.className = 'row';
            row.innerHTML = from + '对' + to + '说：' + message;

            let container = document.querySelector('.container');
            container.appendChild(row);

            // 3. 把上次输入的内容清空
            for (i = 0; i < 3; i++) {
                edits[i].value = '';
            }
        }
    </script>
</body>
</html>