前言

利用JS 的语法（ECMAScript 标准），在恰当的时机（事件驱动 event driven），操作（CRUD）浏览器（一批对象 Browser Object Model，BOM）或者浏览器中展示的文档信息（Document Object Model， DOM）。

一、DOM API

1、DOM 简介

DOM 全称为 Document Object Model，文档对象模型。
文档: 一个页面就是一个文档, 使用 document 表示.。
元素: 页面中所有的标签都称为元素. 使用 element 表示.。
节点: 网页中所有的内容都可以称为节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示。

2、document 的常见方法

2.1 查找元素：querySelector（）

selectors 包含一个或多个要匹配的选择器的 DOM 字符串 DOMString 。该字符串必须是有效的CSS选择器字符串；如果不是，则引发 SYNTAX_ERR 异常。
因为参数是选择器, 所以一定要通过特殊符号指定是哪种选择器，例如 .box 是类选择器, #star 是 id 选择器等。

2.2 查找所有元素：querySelectorAll（）

需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()。

3、HTMLElement

所有html都具备的方法。凡是 html 元素中定义的属性，本身就可以作为HTMLElemnet 对象中的属性。
其中 class 属性比较特殊，针对 js ，ES6 的 DOM 提供了 classList 属性，更容易操作。例如< h1 class = “hello world”>< /h1>,有两个 class 的情况，在选取时，就可以 h1.classList 类型是数组[‘hello’ , ‘world’] 。

3.1 innerText 属性

标签下的文本。

3.2 innerHTML 属性（不转义）

标签下的文本，不进行HTML字符转义，就是按照文本的原始内容进行展示。

二者区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>你好中国</div>
</body>
</html>

在这里插入图片描述

虽然看起来二者是一致的，但是当字符串中有 html 元素时，就会有区别。

3.3 开灯/关灯示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开灯/关灯</title>
    <style>
        body {
      
      
            background-color: black;
        }

        button {
      
      
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        .off {
      
      
            background-color: #050505;
        }

        .on {
      
      
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="light" class="off"></div>
    <button type="button">开灯</button>

    <script>
        var btn = document.querySelector('button');
        var body = document.querySelector('body');
        var light = document.querySelector('#light');
        btn.onclick = function() {
      
      
            if (light.classList.contains('off')) {
      
      
                // class 属性中包含 off ，说明灯是关的，把灯打开
                // 1. 把 body 的背景色修改掉
                body.style = 'background-color: white;';
                // 2. 把灯打开
                light.classList.remove('off');
                light.classList.add('on');
                // 3. 把按钮的文本替换掉
                btn.innerText = '关灯';
            } else {
      
      
                // 说明灯是开着的，把灯关掉 ，和上面是相反的
                // 1. 把 body 的背景色去掉
                body.style = '';
                // 2. 把灯打开
                light.classList.remove('on');
                light.classList.add('off');
                // 3. 把按钮的文本替换掉
                btn.innerText = '开灯';
            }
        }
    </script>
</body>
</html>

在这里插入图片描述

3、简单操作 DOM 对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS 的应用</title>
</head>
<body>
    <h1>这个是 JS 的应用</h1>

</body>
</html>

在这里插入图片描述

二、BOM API

1、BOM 简介

BOM 全称为 Browser Object Model，浏览器对象模型。
定义了JavaScript 操作浏览器的接口，提供了与浏览器窗口交互的功能。

2.简单操作 BOM 对象

在这里插入图片描述

window.location = ‘https://www.baidu.com’ ,把当前网页的地址转换成为百度地址。

三、事件驱动（event-driven）

明确发生某件特殊的含义的行为时，执行某个动作。
事件：用户点击按钮，鼠标滑过按钮
事件驱动：当用户点击按钮时，把 h1 换掉。或者当用户鼠标划过按钮时，把 h1 样式换掉。
总结：
- 事件：点击 click、鼠标滑过 hover；事件源：按钮 button；当：on；执行某个动作：赋值一个函数，只有当事件发生时，执行该函数。

1、案例一：点击按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件驱动</title>
</head>
<body>
    <h1>H1 的初始状态</h1>
    <button>按钮</button>

    <script src="script.js"></script>
</body>
</html>

// 定义当事件发生时的行为，以函数的形式体现
function changeH1() {
    
    
    // 函数里的语句，是在函数被调用时才执行
    console.log('changeH1 被调用了');
    // 1. 找到 h1 标签
    var h1 = document.querySelector('h1');
    // 2. 修改 h1 内部的文本（它的 innerText 属性)
    h1.innerText = '按钮被点击';
}

// 为 button（事件源）绑定事件驱动行为
// 1. 找到 button 标签
var button = document.querySelector('button');
// 2. 当(on) 点击(click)，执行哪些动作（赋值一个函数)
button.onclick = changeH1   // changeH1 没有加括号：只是把函数赋值给属性，没发生函数调用
console.log('为 button 绑定了 changeH1 函数');
// 这里只是定义了 changeH1，但没有调用 changeH1。

在这里插入图片描述
开始进入页面 changeH1 还没有被调用。当点击按钮以后，由浏览器内部调用 changeH1 函数。

2、案例二：鼠标滑过

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件驱动2</title>
</head>
<body>
    <h1>你好中国</h1>

    <script src="script.js"></script>
</body>
</html>

// 1. 为 按钮的 鼠标划过事件，绑定（bind）函数
var btn = document.querySelector('button');

// 由于 h1 需要多次使用，所以在函数外边就查好
var h1 = document.querySelector('h1');

// 鼠标进入
h1.onmouseenter = function () {
    
    
    console.log('鼠标划过');
    // 为 h1 赋值 css 属性: color: blue;使用 css 的内联方式，修改元素的 style 属性
    h1.style = 'color: blue; font-size: 3em;';
}

// 鼠标出来
h1.onmouseleave = function () {
    
    
    console.log('鼠标划出');
    // 将 h1 的 css 去掉
    h1.style = '';
}

在这里插入图片描述

四、浏览器的工作原理

首先通过 URL 找到 HTML 页面，通过解析它的内容，然后再加载其他资源（css、js资源），然后浏览器负责把HTML结构化成 DOM 树，再运行 JS ，根据规则把 css 应用到各个元素上来渲染页面呈现给用户。

五、猜数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字</title>
    <style>
        .error {
      
      
            color: red;
        }

        .right {
      
      
            color: green;
        }
    </style>
</head>
<body>
    <button id="reset">重新开始</button>
    <div>
        <label for="input">请输入要猜的数字</label>
        <input type="text" id="input">
        <button id="guess">猜</button>
    </div>
    <div>
        已经猜的次数：
        <span id="count">0</span>
    </div>
    <div>
        结果：
        <span id="result"></span>
    </div>

    <script src="script.js"></script>
</body>
</html>

页面展示：

在这里插入图片描述
添加JS 代码：

// 1. 需要生成一个随机数字，Math.random() 生成的是 [0, 1) 之间的小数
// Math.floor()  ，下面是取到 [0, 100) 的随机数
var num = Math.floor((Math.random() * 100));
console.log(num);
var count = 0;

var input = document.querySelector('#input');
var result = document.querySelector('#result');
var countSpan = document.querySelector('#count');
document.querySelector('#guess').onclick = function () {
    
    
    // 1. 读取用户的输入
    var userInput = input.value;
    console.log(userInput);
    input.value = '';
    // 2. 把用户的输入转成数字（不考虑错误处理）
    var userGuess = parseInt(userInput);
    console.log(userGuess);
    count++;
    // 3. 更新猜了次数
    countSpan.innerText = count;

    if (userGuess < num) {
    
    
       // 控制结果样式
        result.classList.remove('right');
        result.classList.add('error');
        result.innerText = '猜小了';
    } else if (userGuess > num) {
    
    
        result.classList.remove('right');
        result.classList.add('error');
        result.innerText = '猜大了';
    } else {
    
    
        result.classList.remove('error');
        result.classList.add('right');
        result.innerText = '恭喜你，猜对了！！';
    }
}

// 重置，重新设置随机数，count为0
document.querySelector('#reset').onclick = function () {
    
    
    num = Math.floor((Math.random() * 100));
    console.log(num);
    count = 0;

    // 把 countSpan 和 result 恢复原状
    countSpan.innerText = count;
    result.classList.remove('right');
    result.classList.remove('error');
    result.innerText = '';
}

在这里插入图片描述

六、表白墙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表白墙</title>
</head>
<body>
    <div>
        <label for="who">谁</label>
        <input type="text" id="who">
        <label for="target">对象谁</label>
        <input type="text" id="target">
        <label for="what">说什么</label>
        <input type="text" id="what">
        <button>保存</button>
    </div>

    <table>
        <thead>
            <tr>
                <th>谁</th>
                <th>对谁</th>
                <th>说什么</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script src="script.js"></script>
</body>
</html>

在这里插入图片描述

var whoE = document.querySelector('#who');
var targetE = document.querySelector('#target');
var whatE = document.querySelector('#what');
var tbody = document.querySelector('tbody');

function getInput(id) {
    
    
    // window['whoE'] 就是 whoE
    var v = window[id].value;
    window[id].value = '';
    return v;
}

// 获取它的值
document.querySelector('button').onclick = function () {
    
    
    var who = getInput('whoE');
    var target = getInput('targetE');
    var what = getInput('whatE');
    console.log(who);
    console.log(target);
    console.log(what);

    // 暂时不需要其他操作，直接使用 innerHTML
    // 模板字符串（反引号）
    var html = `<tr><td>${
      
      who}</td><td>${
      
      target}</td><td>${
      
      what}</td></tr>`;
    console.log(html);

    // 把 html 追加到 tbody 中
    tbody.innerHTML = tbody.innerHTML + html;
}

在这里插入图片描述

注意：！！！会有问题：
1、会引起 Xss 注入问题，用户直接写 HTML 标签被添加到网页里，可能会恶意修改脚本。程序对于用户输入内容要过滤。
2、页面刷新后，数据不能被保存。后端持久化：前端把用户写的内容，提交到后端，后端负责保存起来（一般是保存到数据库）。

JS在Web中的应用

文章目录

前言

一、DOM API

1、DOM 简介

2、document 的常见方法

2.1 查找元素：querySelector（）

2.2 查找所有元素：querySelectorAll（）

3、HTMLElement

3.1 innerText 属性

3.2 innerHTML 属性（不转义）

二者区别

3.3 开灯/关灯示例

3、简单操作 DOM 对象

二、BOM API

1、BOM 简介

2.简单操作 BOM 对象

三、事件驱动（event-driven）

1、案例一：点击按钮

2、案例二：鼠标滑过

四、浏览器的工作原理

五、猜数字

六、表白墙

猜你喜欢

JS在Web中的应用

文章目录

前言

一、DOM API

1、DOM 简介

2、document 的常见方法

2.1 查找元素：querySelector（）

2.2 查找所有元素：querySelectorAll（）

3、HTMLElement

3.1 innerText 属性

3.2 innerHTML 属性（不转义）

二者区别

3.3 开灯/关灯 示例

3、简单操作 DOM 对象

二、BOM API

1、BOM 简介

2.简单操作 BOM 对象

三、事件驱动（event-driven）

1、案例一：点击按钮

2、案例二：鼠标滑过

四、浏览器的工作原理

五、猜数字

六、表白墙

猜你喜欢

3.3 开灯/关灯示例