JavaScript-API-笔记
API文档简介
概念：API是程序员提供的一种工具，一些预先定义的函数，以便能方便的实现想要完成的程序及功能。
Web API 文档
Web API 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。
DOM简介
文档对象模型(Document Object Model 简称DOM)，是3WC组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口
名词解析
文档：一个页面就是一个文档，DOM中使用document表示。
元素：页面中的所有标签都是元素，DOM中使用element表示。
节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。
DOM把以上内容都是对象。
获取元素
-
根据ID获取
-
根据标签名获取
-
通过HTML5新增的方法获取
-
特殊元素获取
根据ID获取
使用getElemenetByld()方法可以获取带有ID的元素对象。
[Document]的方法 [getElementById()]返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。
语法
var 对象名= document.getElementById(id);
参数
id是大小写严格区分的字符串，代表需要查找元素的唯一ID。
返回值
返回匹配到ID的MOD element 对象。若是查找ID元素不存在，那么就返回null。
示例
<!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="hi">hi~</div>
<!-- 因为我们的游览器是自上而下的运行代码，获取id对象的前提就是有id元素，所以需要将script标签写在后面 -->
<script>
//getElementById 获取 元素 通过，理解为：通过id获取元素
var element = document.getElementById('hi');
//打印对象（控制台）
console.log(element);
</script>
</body>
</html>
结果
根据标签名获取
使用getElementsByTagName()方法可以返回标签对象的集合
[Document]的方法[getElementsByTagName()]通过指定的标签字符串获取改标签的集合（伪数组）。
语法
var 对象名= document.getElementsByTagName(标签);
参数
**标签**是字符串形式html5中标签名，也是区分大小写的。
返回值
返回值是传参标签的标签集合，传参标签不存在，则返回null。是一个伪数组。动态的，随着内容改变而改变。
示例
<!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>
<li>知否知否，应是等你好久。</li>
<li>知否知否，应是等你好久。</li>
<li>知否知否，应是等你好久。</li>
<li>知否知否，应是等你好久。</li>
<li>知否知否，应是等你好久。</li>
</ul>
<!-- 创建js标签书写js代码 -->
<script>
//getElementsByTagName 获取 元素 通过 标签 名称 理解为 通过标签名获取元素
var element = document.getElementsByTagName('li');
//打印查询结果
console.log(element);
</script>
</body>
</html>
结果
注意事项
当我们想获取子标签Document对象，时出现多个相同父标签。我们可以给父标签添加id，再通过getElementById()获取父标签Document对象，之后再通过getElementsByTagName()获取子标签Document对象。
通过HTML5新增的方法获取
通过getElementsByClassName()类名获取对象。
语法
var 对象名= document.getElementsByClassName(类名);
参数
类名是一个字符串，严格区分大小写。
返回值
返回值是传参类名的集合，传参不存在就返回null。返回值是一个伪数组，也是动态的，随着内容变化。
示例
<!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 class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<!-- 创建js标签，书写js代码 -->
<script>
//getElementsByClassName 获取 元素 通过 类 名称 理解为 通过类名获取元素
var elements = document.getElementsByClassName('box');
//打印结果
console.log(elements);
</script>
</body>
</html>
结果
通过HTML5新增的方法获取2
通过[Document]对象[querySelector('选择器')]方法，获取元素对象。
语法
var 对象名= document.querySelector(选择器);
参数
选择器和css的选择器类似，参数是一个字符串。
querySelector('标签名')
querySelector('.类名')
``querySelector(’#id名’)`
选择器：与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 class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<!-- 创建js标签，书写js代码 -->
<script>
//1.通过getElementsByClassName()类名获取元素集合
//getElementsByClassName 获取 元素 通过 类 名称 理解为 通过类名获取元素
var elements = document.getElementsByClassName('box');
//打印结果
console.log(elements);
//2.通过querySelector()查询选择器获取元素，但只获取页面符合第一个元素对象。
//querySelector 查询 选择器 理解为 查询选择器
var boxs = document.querySelector('.box');
console.log(boxs);
</script>
</body>
</html>
结果
通过HTML5新增的方法获取3
通过[Document]对象[querySelectorAll()]方法，获取元素对象集合。
语法
var 对象名= document.querySelectorAll(选择器’);
参数
选择器和css的选择器类似，参数是一个字符串。
querySelectorAll('标签名')
querySelectorAll('.类名')
``querySelectorAll(’#id名’)`
返回值
返回值是所有符合条件的元素集合，是一个伪数组。
示例
<!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 class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<!-- 创建js标签，书写js代码 -->
<script>
//1.通过getElementsByClassName()类名获取元素集合
//getElementsByClassName 获取 元素 通过 类 名称 理解为 通过类名获取元素
var elements = document.getElementsByClassName('box');
//打印结果
console.log(elements);
//2.通过querySelector()查询选择器获取元素，但只获取页面符合第一个元素对象。
//querySelector 查询 选择器 理解为 查询选择器
var boxs = document.querySelector('.box');
console.log(boxs);
//3.通过querySelectorAll() 查询选择器获取所有元素
//querySelectorAll 查询 选择器 所有 理解为 所有都查询选择器
var boxss = document.querySelectorAll('.box');
console.log(boxss);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
</body>
</html>
结果
获取特殊元素
1获取body标签元素
通过[Document]的[body]属性获取body元素对象。
语法
var 对象名= document.body;
2.获取html标签元素
通过[Document]的[documentElement]属性获取body元素对象。
语法
var 对象名 = document.documentElement;
示例
<!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>
<script>
//获取body标签
var element = document.body;
console.log(element);
//获取html元素
var htmlElement = document.documentElement;
console.log(htmlElement);
</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>
<!-- 创建按钮 -->
<button id="button">唐伯虎</button>
<script>
// 1.获取按钮对象->获取事件源
var btn = document.getElementById('button');
// 2.事件的触发类型：(onclick)点击
// 3.事件处理程序
btn.onclick = function() {
alert('点秋香');
}
</script>
</body>
</html>
结果
执行事件的步骤
- 获取事件源
- 注册事件（绑定事件）
- 添加事件处理程序(采用函数赋值形式)
鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| cilck | 点击鼠标左键 |
| mouseover | 鼠标悬停时 |
| mouseout | 鼠标离开时 |
| focus | 获取鼠标焦点时 |
| blur | 失去鼠标焦点时 |
| mousemove | 鼠标拖动时 |
| mouseup | 鼠标弹起时 |
| mousedown | 鼠标按下时 |
| contextmenu | 鼠标右键菜单，配合事件对象的阻止默认行为，可以做到禁止鼠标右键的效果。 |
| selectstart | 鼠标选择。加上鼠标右键，配合事件阻止默认行为，就可以做到禁止复制的效果 |
| mouseenter | 鼠标进入时触发。与mouseover相似，但是mouseenter事件当鼠标经过绑定元素的子盒子不会触发。而mouseover会触发。因为mouseenter不会冒泡 |
| mouseleave | 鼠标离开时触发。与mouseout相似，但是mouseleave事件当鼠标经过绑定元素的子盒子不会触发。而mouseout会触发。因为mouseleave不会冒泡 |
文字禁止复制示例
<!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>
<p>这段文字禁止复制呢！</p>
<script>
var p = document.querySelector('p');//获取对象
p.addEventListener('contextmenu', function(e) {
//绑定contextmenu事件
e.preventDefault();//阻止默认事件行为
});
p.addEventListener('selectstart', function(e) {
//绑定selectstart事件
e.preventDefault();//阻止默认事件行为
});
</script>
</body>
</html>
常用的鼠标对象属性或方法
| 属性名 | 说明 |
|---|---|
| 鼠标事件对象.clientX | 鼠标相对于可视窗口的X坐标 |
| 鼠标事件对象.clientY | 鼠标相对于可视窗口的Y坐标 |
| 鼠标事件对象.pageX | 鼠标的X坐标 |
| 鼠标事件对象.pageY | 鼠标的Y坐标 |
| 鼠标事件对象.screenX | 鼠标相当于屏幕的X坐标 |
| 鼠标事件对象.screenY | 鼠标相当于屏幕的Y坐标 |
操作元素
改变元素的内容
-
通过元素对象的[
innerText]属性赋值改变内容。 -
通过元素对象的[
innerHTML]属性赋值改变内容。
注意事项
-
innerText是不识别html标签的，innerHTML是识别html标签的。 -
innerText和innerHTML属性都是可读的，可以获取元素的内容。当然使用innerText属性读取的内容是空格和换行的，使用innerText属性读取的内容则是由空格、换行和标签的。
示例
<!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>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p></p>
<script>
//1.获取元素对象
var btn = document.querySelector('button');
var divElement = document.querySelector('div');
var p = document.querySelector('p');
//2.注册事件
btn.onclick = function() {
//3.处理事件
divElement.innerText = getDates();
p.innerHTML = '' + getDates() + '';
}
//获取当前系统时间
function getDates() {
var date = new Date();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
return date.getFullYear() + '年' + date.getMonth() + '月' + date.getDate() + '日 ' + arr[date.getDay()] + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
}
</script>
</body>
</html>
结果
图片属性
src：图片路径。
title：图标标题，鼠标悬停时显示。
alt：图片无法正常加载时显示。
以上内容都可以通过元素对象赋值，修改其内容。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 14px;
}
button {
width: 60px;
height: 30px;
background-color: #fff;
line-height: 20px;
border: 1px solid black;
/* outline: none; */
}
img {
margin-top: 20px;
width: 400px;
height: 300px;
vertical-align: bottom;
}
</style>
</head>
<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button><br>
<img src="images/timg.jpg" alt="" title="张学友">
<script>
//1.获取元素对象
var ldh = document.querySelector('#ldh');
var zxy = document.querySelector('#zxy');
var img = document.querySelector('img');
//2.注册事件
ldh.onclick = function() {
//3.事件触发处理
img.src = "images/timg2.jpg"; //src属性修改
img.title = '刘德华';
}
zxy.onclick = function() {
//3.事件触发处理
img.src = "images/timg.jpg"; //src属性修改
img.title = '张学友';
}
</script>
</body>
</html>
结果
表单属性
value：input表单内容。其他标签是用innerHTML属性，而表单的内容是通过input查询、修改的。
disabled：禁止使用表单元素，按钮也可以使用disabled禁止使用。
注意：disabled为true是禁止，为null是启用。
type：表单属性。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 创建css配置 如：衣服 */
button {
width: 80px;
height: 25px;
line-height: 19px;
font-size: 14px;
}
input {
width: 215px;
height: 25px;
line-height: 25px;
color: #000;
text-indent: 10px;
}
</style>
</head>
<body>
<!-- 创建标签，也就是骨架 -->
<button>按钮</button>
<input type="text" name="" id="" value="" placeholder="请输入">
<!-- 创建行为 -->
<script>
// 获取元素对象
var btn = document.querySelector('button');
var text = document.querySelector('input');
// 注册事件
btn.onclick = function() {
// 处理事件
text.value = '按钮被点击了';
text.disabled = true;
this.disabled = true;
}
</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>
<style>
/* 创建css配置 皮肤或衣服 */
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: 0;
}
.box label {
position: absolute;
right: 10px;
top: 3px;
}
.box label img {
height: 24px;
width: 24px;
vertical-align: middle;
}
</style>
</head>
<body>
<!-- 创建标签 骨架-->
<div class="box">
<label for=""><img src="images/眼睛.png" alt=""></label>
<input type="password" name="" id="">
</div>
<!-- 创建行为 -->
<script>
// 获取元素对象
var label = document.querySelector('label');
var input = document.querySelector('input');
var img = document.querySelector('img');
// 创建标记
var b = false;
// 注册事件
label.onclick = function() {
// 处理事件
b = !b;
if (b) {
input.type = 'text';
img.src = 'images/闭眼.png';
} else {
input.type = 'password';
img.src = 'images/眼睛.png';
}
}
</script>
</body>
</html>
结果
复选框选择状态
我们可以通过checked获取复选框当前的选择状态。
链接属性
设置href属性值为javascript:void(0)或者javascript:;阻止链接跳转。
标签样式-style
通过元素对象的style属性修改样式。
注意事项
-
style属性下**
.**出来的样式都是采用驼峰命名法。如：backgroundColor、fontSize等。 -
这种修改的样式属于
行内样式，比外链样式权重更高。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 创建装饰 */
div {
width: 200px;
height: 200px;
background-color: pink;
color: red;
}
</style>
</head>
<body>
<!-- 创建骨架 -->
<div>div盒子</div>
<!-- 创建行为 -->
<script>
var div = document.querySelector('div'); //获取元素对象
div.onclick = function() {
//注册事件
div.style.backgroundColor = 'green'; //处理触发的事件，通过元素对象的style属性修改元素的样式。
}
</script>
</body>
</html>
结果
示例
通过修改元素的style属性，中的dispaly`样式关闭广告。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 创建装饰-衣服 */
* {
margin: 0;
padding: 0;
}
.box {
margin: 10px auto;
position: relative;
width: 115px;
height: 115px;
background-color: #fff;
border: 1px solid red;
display: block;
/*此时为block显示，当·点击关闭·按钮·时，更改为none隐藏。*/
}
.box .ewm {
position: absolute;
top: 3px;
left: 3px;
width: 110px;
height: 110px;
}
.box .gb {
position: absolute;
top: -4px;
left: -23px;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<!-- 创建骨架 -->
<div class="box">
<img src="images/二维码.jpg" alt="" class="ewm">
<img src="images/关闭.png" alt="" class="gb">
</div>
<!-- 创建行为 -->
<script>
var box = document.querySelector('.box'); //获取元素对象
var gb = document.querySelector('.gb'); //获取元素对象
gb.onclick = function() {
//注册事件
box.style.display = 'none'; //处理触发事件
}
</script>
</body>
</html>
结果
循环显示精灵图
通过修改style样式中的背景位置，调整精灵图。
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 创建css样式 */
* {
padding: 0;
margin: 0;
}
.box {
width: 250px;
margin: 100px auto;
}
.box ul {
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
align-content: flex-start;
}
.box ul li {
margin: 15px;
width: 24px;
height: 24px;
list-style: none;
background: url(images/淘宝精灵图.png) no-repeat;
}
</style>
</head>
<body>
<!-- 创建html网页骨架 -->
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 创建js网页行为 -->
<script>
var lis = document.querySelectorAll('li'); //获取元素对象
for (var i = 0; i < lis.length; i++) {
//通过循环，改变li标签背景中的精灵图。
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px'; //赋值给背景位置样式属性。
}
</script>
</body>
</html>
结果
表单事件
onfocus 和 onblur
我们可以通过 onfocus 获取焦点 属性，注册该事件和进行事件处理。
我们可以通过 onblur 失去焦点 属性，注册该事件和进行事件处理。
注意事项：添加focus();代码可以是表单获取焦点。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 创建css网页样式 */
* {
padding: 0;
margin: 0;
}
input[type='text'] {
display: block;
position: fixed;
left: 50%;
margin-left: -100px;
margin-top: 100px;
width: 200px;
height: 24px;
color: #ccc;
font-size: 14px;
text-indent: 5px;
outline: none;
border: 1px solid skyblue;
}
</style>
</head>
<body>
<!-- 创建html网页骨架 -->
<div>
<input type="text">
</div>
<!-- 创建js网页行为 -->
<script>
var input = document.querySelector('input'); //获取元素对象
input.value = '手机'; //修改元素对象内容
input.onfocus = function() {
//注册事件：元素对象获取焦点
input.style.color = '#000'; //处理事件
if (input.value === '手机') {
input.value = '';
}
}
input.onblur = function() {
//注册事件：元素对象失去焦点
if (input.value === '') {
//处理事件
input.value = '手机';
input.style.color = '#ccc';
}
}
</script>
</body>
</html>
结果
ClassName
通过ClassName我们可以快速的修改元素对象多个样式属性。
ClassName给元素对象赋值一个类名，这样他就可以调用css预先准备的样式文件。达到快速修改多条样式目的。
注意事项
ClassName赋值的类名会覆盖之前的类名，如果想保留原先的类名，那么赋值时可以一起赋值给元素对象。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 创建css网页样式 */
div {
margin: 150px auto;
width: 200px;
height: 200px;
background-color: skyblue;
color: #000;
font-size: 14px;
text-align: center;
line-height: 200px;
}
.change {
background-color: #fff;
color: red;
font-size: 18px;
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- 创建html网页骨架 -->
<div>123</div>
<script>
// 创建js网页行为
var div = document.querySelector('div'); //获取元素对象
div.onclick = function() {
//注册事件
div.className = 'change'; //处理事件：赋值一个类名给元素对象，这样他就可以调用css中预先写的样式。
}
</script>
</body>
</html>
结果
点击div盒子前:
点击div盒子后：
排除异己
概要：当我们想实现，同时给同类型标签多个元素对象设置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>
<style>
/* 创建css网页样式 */
button {
width: 60px;
height: 27px;
text-align: center;
line-height: 27px;
border: 0;
}
</style>
</head>
<body>
<!-- 创建html网页骨架 -->
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 创建js网页行为
var btns = document.getElementsByTagName('button'); //获取元素对象组
for (var index = 0; index < btns.length; index++) {
//遍历
var element = btns[index]; //获取元素对象组中的元素
element.onclick = function() {
//注册事件
for (var i = 0; i < btns.length; i++) {
//处理事件，先给所有元素css样式
const element2 = btns[i];
element2.style.backgroundColor = '#fff';
element2.style.border = '1px solid #000';
element2.style.outline = 'none';
}
this.style.backgroundColor = 'pink'; //再单独设置选择中的元素
}
}
</script>
</body>
</html>
结果
元素属性
获取元素对象的属性
我们除了通过 对象名.属性 获取元素对象的属性之外，我们还可以通过 getAttribute('属性') 方法获取元素对象的属性。
区别
对象名.属性：获取元素对象的内置属性。
getAttribute('属性')：主要获取自定义属性（标准），我们程序员自定义的属性。
修改元素对象的属性
通过 赋值给对象名.属性修改元素对象的属性值，但也是可以通过setAttribute('属性名','元素值')方法修改元素对象的属性值。
区别
对象名.属性：修改元素对象的内置属性。
setAttribute('属性名','元素值')：主要修改自定义属性（标准），我们程序员自定义的属性。
注意事项
setAttribute('属性名','元素值')：在修改元素对象的class属性时，和对象名.className不同。它可以直接这样修改setAttribute('class','元素值')。
删除元素对象的属性
通过removeAttribute('属性名')方法就可以删除元素对象的属性。
示例
<!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="demo"></div>
<script>
//获取元素对象的属性
var div = document.querySelector('div');
//1.通过 对象名.属性 获取
console.log(div.id);
//2.通过 getAttribute('属性')方法获取属性
console.log(div.getAttribute('id'));
//修改元素对象的属性
//1.通过 对象名.属性 赋值修改
div.id = 'test';
//2.通过 setAttribute('属性','元素值')方法修改属性
div.setAttribute('id', 'test2');
//删除元素对象的属性
div.removeAttribute('id');
</script>
</body>
</html>
自定义属性
为什么使用自定义属性呢？
用于保存和使用数据，因为有些数据不需要保存到数据库中。即建即用。
怎么区分自定义和内置属性呢？
为了解决这样问题，H5规定所有的自定义属性必须由data-开头。
H5新增操作自定义的方法
通过对象名.dataset.属性值获取自定义属性。
或者对象名.dataset.['属性值']获取自定义属性。
注意事项
对象名.dataset.属性值:中的书写属性值不需要加data-。
节点操作
为什么学习节点操作？节点操作是什么？
之前我们获取元素是通过DOM（文档对象模型）文档获取的方式逻辑性差，操作繁琐。通过节点则有较强的逻辑性、操作也较为简易。
概述
网页中所有内容都是节点（标签、属性、文本、注释等）,在DOM中，节点使用node来表示。HTML DOM树中所有节点都可以通过JavaScript进行访问，所有HTML元素（节点）均可被创建、修改、删除等。
节点至少拥有nodeTpye（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
元素节点nodeType为1、属性节点nodeType、文本节点nodeType为3（文本包含文字、空格、换行等）。
在实际开发中，我们主要是操作元素节点。
节点层级
常见的有父子兄层级关系。
父级节点
通过节点对象.parentNode获取最近父级节点-亲爹。
子级节点
通过节点对象.childNodes获取子级节点。
子元素节点
通过节点对象.children获取子元素节点。不过他是一个非标准的。但是所有的游览器都支持。
获取第一个子节点
节点对象.firstChild
获取最后一个节点
节点对象.lastChild
获取第一个元素节点
节点对象.firstElementChild,存在兼容性问题。
获取最后一个元素节点
节点对象.lastElementChild,存在兼容性问题。
示例
<!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>
<li>第一个li标签</li>
<li></li>
<li></li>
<li>最后一个li标签</li>
</ul>
<script>
var ul = document.querySelector('ul');
//firstChild 获取第一个子节点
console.log(ul.firstChild);
//lastChild 获取最后一个子节点
console.log(ul.lastChild);
//firstElementChild 获取第一个元素子节点
console.log(ul.firstElementChild);
//lastElementChild 获取最后一个元素子节点
console.log(ul.lastElementChild);
</script>
</body>
</html>
结果
兄弟节点
获取上一个兄弟节点
节点对象.nextSibling，
获取下一个兄弟节点
节点对象.previousSibling
获取下一个兄弟元素节点
节点对象.nextElementSibling,找不到则返回null。
获取上一个兄弟元素节点
节点对象.previousElementSibling
创建节点
创建节点
我们可以通过document.createElement('元素')创建节点（元素）。原本网页没有，是通过JS代码创建的，所以它是一种动态创建元素。
创建节点的流程
放置节点
父元素对象.appendChild(元素对象)追加在子元素尾部。父元素对象.insertBefore(插入节点,指定节点)在指定子节点之前插入节点。
删除节点
我们可以通过父元素节点.removeChild(子元素对象)
创建和删除节点示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 创建css网页样式 */
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: red;
}
li {
list-style: none;
}
textarea {
margin: 10px 20px;
width: 400px;
height: 250px;
outline: none;
resize: none;
font-size: 15px;
}
button {
margin-left: 380px;
}
ul {
margin: 10px 20px;
border: 1px solid skyblue;
width: 600px;
font-size: 14px;
}
ul li a {
float: right;
}
</style>
</head>
<body>
<!-- 创建html网页骨架 -->
<textarea name="" id="" cols="30" rows="10"></textarea><br>
<button>发布</button>
<h3>评论区</h3>
<ul>
</ul>
<!-- 创建js网页行为 -->
<script>
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var value = text.value; //获取文本域默认值
var ul = document.querySelector('ul');
btn.onclick = function() {
if (text.value !== value) {
//判断是否为默认值，不为默认值就进行添加
var li = document.createElement('li'); //创建节点
li.innerHTML = text.value + '删除'; //赋值内容，添加链接方便后续操作
ul.insertBefore(li, ul.firstChild) //将节点放置在第一个子元素之前。
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
ul.removeChild(this.parentNode); //删除子节点
}
}
}
}
</script>
</body>
</html>
结果
复制节点
我们可以通过节点对象.cloneNode(布尔值)复制节点，布尔值为空或者false时只复制元素，不复制内容。布尔值为true时即复制元素，也复制内容。
动态创建节点的三种方法
-
document.write('标签')：直接在网页body主体末端写入标签，但是文档流执行完毕，则它会导致页面全部重绘。 -
元素对象.innerHTML：通过**+=**拼接字符串来创建标签，创建的标签在元素对象的末端。 -
document.createElement('元素')：相对于元素对象.innerHTML创建大量标签时，document.createElement('元素')效率更高。当然如果是一次就创建，元素对象.innerHTML就更快，就像是用数组提前装好，再装换为字符床写入。
总结
不管是什么浏览器元素对象.innerHTML单次创建速度最快。
示例
<!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>初始内容</div>
<script>
document.write('标签1');
document.body.innerHTML += '标签2';
var div = document.createElement('div');
div.innerHTML = '标签3';
document.body.appendChild(div);
</script>
</body>
</html>
结果
事件
概述：当我们点击网页中的按钮，触发按钮的功能。这个过程就是事件。触发反应机制。
注册事件
给元素添加事件，就是注册事件或者绑定事件。
注册事件有两种方法：传统方式和方法监听注册方式。
传统方式
利用on开头的事件，如：onclick。
特点：注册事件的唯一性。同一个元素同事件只能设置一个处理函数，最后面的处理函数会覆盖之前的。
方法监听注册方式
可以给同一个元素对象添加多个监听器。同事件类型，按顺序执行。
元素对象.addEventListener(事件类型,事件处理函数,布尔值);
事件类型：click这类事件的触发类型，注意这个字符串。
事件处理函数：与传统方式的赋值型处理事件函数一样。
布尔值：是否为DOM事件流的捕获阶段，默认false。
示例
<!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>
<button class="on">传统事件</button>
<button class="methed">方法注册事件</button>
<script>
//传统事件
var btn = document.querySelector('.on');
btn.onclick = function() {
alert('123');
}
//方法注册事件
var btn2 = document.querySelector('.methed');
btn2.addEventListener('click', function() {
alert('456');
}, false);
</script>
</body>
</html>
结果
attachShadow
i9专属 attachShadow（事件类型,处理函数）方法添加事件，不建议使用。
删除事件
删除元素的事件，就是删除事件，也称解绑事件。
删除事件分为两种：传统方式和
传统方式
元素对象.onclick = null;
方法监听删除方式
元素对象.removeEventListener(事件类型,事件处理函数的对象);
注意事件类型是字符串。
detachEventListener
元素对象.detachEventListener(事件类型,事件处理函数对象);
DOM事件流
事件流描述的是页面中接收事件的顺序。
事件发生时会在元素节点之间按照指定顺序传播，这个传播的过程即DOM事件流。
捕获阶段：从最顶层往下，逐级传播到具体元接收的过程。
冒泡阶段：IE最早提出，事件开始由最开始的元素接收，然后逐级向上传播到DOM最顶层的过程。
注意事项：
- JS代码中只执行捕获或者冒泡其中一个阶段。
onclick和attachShadow()（ie）只能是冒泡阶段。- 如果
addEventListener()布尔值参数为false，那么就处于冒泡阶段。
事件对象
事件对象就是跟事件的相关一系列信息集合，它有很多的属性和方法。如鼠标点击事件的x，y轴坐标，触发的事件类型等。
元素对象.事件类型 = function(事件对象) {
}
元素对象.addEventListener(事件类型, function(事件对象) {
});
注意事项：ie 678版本不支持，它们使用的是window.event。
事件对象的常用属性和方法
| 属性名 | 说明 |
|---|---|
| 事件对象.type | 事件触发类型，不带on |
| 事件对象.target | 事件触发对象。它this不同，this是绑定事件对象。 |
| window.event.srcElement | ie 678版本事件触发对象（兼容性问题） |
| 事件对象.preventDefault（） | 阻止默认行为（有兼容性问题） |
| 事件对象.returnValue | 阻止默认行为（低版本） |
| return false | 阻止默认行为（无兼容性问题），缺点return后面代码不执行。而且只支持传统注册方式。 |
了解：currentTarget与this相似，都是指绑定事件的对象。
阻止事件冒泡的两种方式
| 属性名 | 说明 |
|---|---|
| 事件对象.stopPropagation() | 阻止事件冒泡阶段 |
| 事件对象.cancelBubble = true | ie 678版本阻止事件冒泡阶段 |
事件委托
事件委托也称为事件代理，在JQuery里面称为事件委派。
事件委托的原理
事件委托的原理是不是在每个元素上绑定事件，而是通过监听器设置在父节点上。然后利用冒泡原理的影响设置在每个点上。
示例
<!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>
<li>支付支付，穷叮当~</li>
<li>支付支付，穷叮当~</li>
<li>支付支付，穷叮当~</li>
<li>支付支付，穷叮当~</li>
</ul>
<script>
var ul = document.querySelector('ul'); //获取父节点
ul.addEventListener('click', function(e) {
//父节点添加点击事件
e.target.style.backgroundColor = 'pink';
alert('穷叮当~');
});
</script>
</body>
</html>
结果
键盘事件
| 属性名 | 说明 |
|---|---|
| keyup | 键盘任意键位，松开时触发 |
| keydown | 键盘任意键位，按下时触发 |
| keypress | 键盘任意键位，按下时触发（除了功能键） |
注意：
- 如果是使用传统方式注册事件，需要在前方添加on。
- 如果keydown和keypress都被绑定，触发时keydown优先。
- keyup和keydown，不区分字母大小写。
- keypress区分字母大小写。
常用键盘事件对象属性和方法
| 属性名 | 说明 |
|---|---|
| keycode | 触发键盘事件的键位-ASCII值 |
| key | 触发键盘事件的键位值（存在兼容性问题） |
BOM
BOM浏览器对象模型，它是提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每一个对象都提供了很多方法。
BOM是缺乏标准的。JavaScript是由ECMA指定标准的，DOM是由W3C制定标准的。BOM最早是由Netscape浏览器标准的一部分。
- 浏览器对象模型
- 把浏览器看做一个对象
- BOM的顶级对象是window
BOM结构
BOM比DOM大，BOM包含DOM。
window对象是游览器的顶级对象，它具有双重身份。
- 它是JS访问游览器窗口的接口。
- 它是一个全局对象。定义在全局作用域的变量、函数都会成为window对象的属性和方法。
注意：在调用时我们可以省略window。
window中一个特殊属性window.name。
window对象的常用事件
窗口加载事件
window.onload是窗口（页面）加载事件，当文档全部加载完时触发该事件（包括图像、脚本文件、CSS文件等）。
**window.addEventListener(‘load’,事件处理函数);**也可以注册事件。
DOMContentLoaded是当DOM加载完毕，时触发。不包括样式表、图片、falsh等。i9以上支持。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.addEventListener('load', function() {
//页面所有内容加载完时触发
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('按钮被点击了');
});
});
window.addEventListener('DOMContentLoaded', function() {
//DOM内容已经加载完，触发
alert('123');
});
</script>
</head>
<body>
<button>按钮</button>
</body>
</html>
结果
调整窗口大小事件
window.onresize 或 **window.addEventListener(‘resize’,事件处理函数);**是调整窗口大小加载事件，当触发时就调用的处理函数。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<script>
window.addEventListener('DOMContentLoaded', function() {
//当DOM加载完毕后触发
window.addEventListener('resize', function() {
//当调整窗口时触发
var div = document.querySelector('div');
console.log('调整窗口大小事件触发。');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
});
});
</script>
<div></div>
</body>
</html>
结果
调整窗口大小，窗口宽度小于800像素时，隐藏div盒子。
重新加载页面事件
window.onpageshow或者
window.addEventListener('pageshow',事件处理函数（e）{
if (e.persisted){
//persisted判断是否为缓存中取出来的。
}
});
页面重新加载时触发。由于火狐存在“往返缓存”的问题，不会触发load事件。此时使用pageshow事件触发。这是事件是给window对象的。
定时器
var 变量名(定时器标识符) = setTimeout(事件处理函数,倒计时（毫秒）);//原理如定时炸弹一样，到了时间就炸。
注意：
- 倒计时可以省略，省略默认为0秒。
- 事件处理函数还可以写成，‘函数名()’。不提倡。
- 当页面出现多个定时器时，可以赋值给变量用于区分。
- 定时器的事件处理函数，也称回调函数callback。倒计时到再回去调用函数。
终止定时器
window.clearTimeout(定时器对象);//清除指定定时器。
间隔定时器
setInterval(事件处理函数,倒计时（毫秒）);//倒计时到一次就调用一次处理函数。反反复复。
注意：
- 倒计时可以省略，省略默认为0秒。
- 事件处理函数也可以写成，‘函数名()’。不提倡。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
margin: 100px 100px;
}
div span {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: rgb(241, 128, 52);
color: #fff;
}
</style>
</head>
<body>
<div>
<span class="hour">88</span>
<span class="minute">88</span>
<span class="second">88</span>
</div>
<script>
var hour = document.querySelector('.hour'); //获取小时
var minute = document.querySelector('.minute'); //获取分钟
var second = document.querySelector('.second'); //获取秒钟
var inputSeconds = +new Date('2020-10-29 20:30:00'); //传参目的时间
conutDown();//初始化倒计时的值
setInterval(conutDown, 1000); //间隔倒计时
function conutDown() {
//第一步：获取当前时间 和 用户输入的时间 之间的差（秒）
var seconds = +new Date();
var time = (inputSeconds - seconds) / 1000; //计算当前时间距离用户输入时间的好秒差
//第二步：转换时间
var h = parseInt(time / 60 / 60 % 24); //计算小时
var m = parseInt(time / 60 % 60); //计算分数
var s = parseInt(time % 60); //计算秒数
hour.innerHTML = h;
minute.innerHTML = m;
second.innerHTML = s;
}
</script>
</body>
</html>
结果
终止间隔定时器
clearInterval(间隔定时器对象);//清除指定的间隔定时器。
this
- 在全局作用域内指向谁？普通函数中又指向谁？定时器中指向的是谁？
答：以上都是指向window。其实这些调用的对象就是window，只是隐藏了。
- 方法调用是指向谁？
答：指向调用者。
- 构造函数指向谁呢？
答：构造函数指向实例化对象。
所以this指向的对象就是调用者。
JavaScript单线程
JavaScript编程语言是单线程的，简单的说就是在同一时间段，只能做一件事情。换而言之事要一件一件做。
但是当出现上一个任务执行时间太长，那么它的下一个任务就需要等待。使页面不连贯。
异步同步
为了解决上述的问题，利用多核CPU的计算性能。HTML5提出Web Worker标准，允许JavaScript脚本创建了多个线程。于是，JS就有了同步和异步。
同步：简单来说就是一个任务接着一个任务来做。一心一意
异步：简单来说在做一任务时还可以做其他任务。一心多意
同步任务
为了解决异步和同步发生冲突，所以把所有任务分成两大类：同步任务和异步任务。
同步任务都在主线程上执行，形成一个执行栈。
异步任务
JS的异步任务是通过回调函数实现的。
- 普通事件
- 资源加载
- 定时器
异步任务相关回调函数添加到任务队列中（也称消息队列）。
JS执行机制
回调函数调用时才会进入任务队列,事件也是只有触发时在进入任务队列。
事件循环
由于主线程不断的获取任务、执行任务、再获取任务、再执行，所以这种机制称为事件循环（loop event）。
location对象
window对象给我们提供了一个location属性用于获取或者设置窗体的URL。并可以使用于解析URL。因为这个返回属性就是一个对象，所以我们称它为location对象。
URL:统一资源定位符是互联网上标准的资源的地址。互联网上的每一个文件都有唯一的URL。它包含信息指出了文件的位置以及游览器应该如何处理它。
通信协议://主机[:端口]/路径/[?参数]#片段
| 组成 | 说明 |
|---|---|
| 通信协议 | 通信的使用的协议 |
| 主机 | 主机（域名） |
| 端口 | 端口号[可选]，省略是使用默认端口。如HTML的默认端口为80 |
| 路径 | 文件的路径，一般由/分隔 |
| 参数 | 参数 键值对的形式，通过&分隔 |
| 片段 | 常用的链接锚点 |
常用属性
| 属性 | 说明 |
|---|---|
| location.href | 获取整个URL字符串 |
| location.host | 获取主机（域名） |
| location.port | 获取端口 |
| location.pathname | 获取路径 |
| location.search | 获取参数 |
| location.hash | 获取片段 |
常用方法
| 方法名 | 说明 |
|---|---|
| assign(URL地址) | 转到指定URL地址，具有记录可返回。 |
| replace(URL地址) | 转到指定URL地址，不具有记录不可返回。 |
| reload() | 刷新页面。如果传参true，则为强制刷新。 |
navigator对象
navigator对象包含有关游览器的信息，它有很多属性。我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部值。
history对象
window对象提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户访问过的URL。
| 方法 | 说明 |
|---|---|
| back() | 后退 |
| forward() | 前进 |
| go() | 参数正数为前进，参数负数为后退 |
offset系列属性
offset偏离量，我们可以使用offset系列相关的属性动态的获取该元素的位置（偏移），大小等。
常常使用在获取元素的位置。
| offset系列 | 说明 |
|---|---|
| offsetParent | 返回作为该元素带有定位的父级元素，如果父级元素都没有定位则返回body |
| offsetTop | 返回元素相对带有定位父级元素上方的偏移 |
| offsetLeft | 返回元素相对带有定位父级元素左方的偏移 |
| offsetWidth | 返回自身包括padding、边框、内容区的宽度，返回值不带单位 [padding + border + content] |
| offsetHeight | 返回自身包括padding、边框、内容区的高度，返回值不带单位 [padding + border + content] |
offset和style区别
- offset可以获取任意样式表中的样式，而style只能获取行内样式表中的样式值。
- offset获取的宽高没有单位，style获取的宽高带有单位。
- offset获取的宽高包含padding和border，style不包括。
- offset只能获取，不能修改。style可以读写。
client系列属性
client客户端，我们可以使用client系列相关的属性获取元素可视区的相关内容。通过client系列的相关属性可以动态的获得该元素的边框大小、元素大小等。
| client系列 | 说明 |
|---|---|
| clientWidth | 返回该元素的宽度，返回值不带单位 [padding + content] |
| clientHeight | 返回该元素的高度，返回值不带单位 [padding + content] |
| clientTop | 返回该元素的上边框，不带单位 |
| clientLeft | 返回该元素的左边框，不带单位 |
常常用于获取元素的宽高。
立即执行函数
一般的函数都是需要调用才会执行，但是立即执行函数不用调用，马上执行。
立即函数的好处就是，它创建了一个独立的作用域，其中的所有变量都是局部变量。
语法：
(function(参数列表) {
函数体;
})(传参列表)[;]//如果出现多个立即执行函数，需要分号隔开。
或者
(function(参数列表) {
函数体;
}(传参列表));
物理像素比
window.devicePixelRatio物理像素比。
scroll系列属性
scroll和浏览器的滚动条有关。
| scroll系列 | 说明 |
|---|---|
| scrollTop | 返回被“卷”上去的上方距离，返回值不带单位[元素使用] |
| scrollLeft | 返回被“卷”上去的左方距离，返回值不带单位 |
| scrollWidth | 返回自身实际（内容）的宽度，不含边框，返回值不带单位。内容溢出部分计算[padding + content] |
| scrollHeight | 返回自身实际（内容）的高度，不含边框，返回值不带单位。内容溢出部分计算[padding + content] |
| window.pageYOffset | 获取页面被“卷”上去部分的偏移量。[document使用] |
| window.pageXOffset | 获取页面被“左滚”部分的偏移量。[document使用] |
元素对象.addEventListener('scroll',处理函数);//当滚动条发生变化时，触发。
动画函数封装
动画核心原理：通过定时器setInterval()不断移动盒子。
手动触发事件
元素.事件();//如：button.click();手动触发按钮点击事件
窗口滚动
window.scroll(x,y);//调节窗口的滚动位置，如：window.scroll(0,0);返回顶部