文章目录
前言
利用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、页面刷新后,数据不能被保存。后端持久化:前端把用户写的内容,提交到后端,后端负责保存起来(一般是保存到数据库)。