Web API
Web API是浏览器提供的一套操作浏览器功能(BOM) 和 页面元素(DOM) 的API
DOM
DOM：Document Object Model，文档对象模型
是处理可扩展标记语言的标准编程接口
DOM树
关于DOM操作，我们主要针对元素的操作，主要有：创建、增、删、改、查、属性操作、事件操作(总结p246)
通过JS可以操作元素，问题是操作哪些元素呢？你得先找出来，告诉我要操作哪一个或哪些元素，这就涉及到获取页面元素
获取页面元素
如何获取页面元素？
- 通过ID获取
- 通过标签名获取
- H5新增方法获取
- 特殊元素获取
1. 通过ID获取
getElementById()方法，获取带有ID的元素对象
举个🌰：
<body>
<div id='time'>2022</div>
<script >
var temp = document.getElementById('time');//返回的是一个元素对象
console.log(temp);
console.log(typeof temp);//类型 object
console.dir(temp);//可以看到更详细的信息
</script>
</body>
打印结果：
<div id='time'>2022</div>
object
div#time
2. 通过标签名获取
getElementsByTagName();
elements，是个复数，获取的是多个元素（集合伪数组）
<body>
<ul>
<li>123</li>
<li>123</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script >
//返回的是 获取过来元素对象的集合 以伪数组的形式存储
var list = document.getElementsByTagName('li');
console.log(list);
console.log(list[2]);
</script>
</body>
伪数组：只能获取length或下标，不能插入、删除操作
只能使用，不能操作
3. 通过H5新增方法获取
- 类名选择器
- querySelector
类名选择器
通过类名获取，语法：
document.getElementsByClassName();
获取的也是数组
querySelector
document.querySelector('.className');//类名
document.querySelector('#idName');//id名
document.querySelector('li');//标签名字
返回，指定选择器的第一个元素对象
querySelector()和querySelectorAll()
语法：
document.querySelector("选择器");//获取第一个该选择器
document.querySelectorAll("选择器");//获取所有的该选择器
举例：
document.querySelector("#main");//选择id为main的第一个元素
document.querySelectorAll("#list li");//选择id为list 下面所有的li
document.querySelectorAll(".test");//选择class为test的所有的元素
4. 特殊元素获取
获取<body>标签：var body = document.body;
获取<html>标签：var html = document.documentElement;
getElementsByName()
对于表单元素，有一个普通元素没有的name属性，因此
表单元素可以使用getElementsByName()
区别
- getElementById()获取的是一个元素，getElementsByTagName()获取的是数组
- getElementById()前面只可以接document；
getElementsByTagName()，前面不仅可以接document，还可以接其他DOM对象 - getElementById()、getElementsByClassName()不可以操作动态创建的DOM元素
getElementsByTagName()可以操作动态创建的DOM元素
事件
事件由三部分组成：
事件源、事件类型、事件处理程序
举个栗子：
<button type="button" id='btn'>这是一个按钮</button>
<script >
//事件源
var btn = document.getElementById('btn');
//事件类型 事件处理程序
btn.onclick = function(){
alert('按钮被点击');
}
</script>
执行事件的步骤
- 获取事件源
- 注册事件（绑定事件）
- 添加事件处理程序（采取函数赋值形式）
<div>123</div>
<script type="text/javascript">
var list = document.getElementsByTagName('div');
var div = list[0];
div.onclick = function(){
alert('div被点击了');
}
</script>
操作元素
DOM操作可以改变网页内容、结构和样式
可以利用DOM操作元素来改变元素里面的内容、属性等
改变元素的内容
div.innerText = '2022-05-22';
div.innerHTML = '2022-05-22';（使用的比较多）
两者的区别：
innerText不支持标签， 会去除空格和换行
innerHTML支持标签，不会去除空格和换行
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<script type="text/javascript">
var div = document.querySelector('div');
var btn = document.querySelector('button');
btn.onclick = function(){
div.innerHTML = '2022-05-22';
}
</script>
</body>
表单的修改
利用DOM，可以操作如下表单元素的属性：
type value checked selected disable
<body>
<button type="button">按钮</button>
<input type="text" value="输入内容" />
<script type="text/javascript">
var oBtn = document.querySelector("button");
var oInput = document.querySelector("input");
console.log(oInput);
oBtn.onclick = function(){
oInput.value = "你好";
}
</script>
</body>
仿京东登录-显示密码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
position: relative;
width: 400px;
margin: 100px auto;
background-color: pink;
border-bottom: 1px solid gray;
}
input{
width: 370px;
height: 30px;
border: none;
outline: none;
}
img {
position: absolute;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="box">
<input type="password" name="" id="" value=""/>
<label for="">
<img src="img/3.1@2x.png">
</label>
</div>
<script type="text/javascript">
var oDiv = document.querySelector(".box");
var oInput = document.querySelector("input");
var oImg = document.querySelector("img");
var flag = 0;
oImg.onclick = function() {
if(flag == 1){
oImg.src = "img/3.1@2x.png";
oInput.type = "password";
flag = 0;
}else{
oImg.src = "img/写轮眼.png";
oInput.type = "text";
flag = 1;
}
}
</script>
</body>
</html>
样式属性的修改
element.style 行内样式操作
element.className 类名样式操作
JS里面的样式采取 驼峰命名法，比如：fontSize、backgroundColor
JS修改style样式操作，产生的是行内样式，因此CSS权重比较高
修改背景图片
点击哪个图片，哪个图片作为背景图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.baidu {
margin: 100px auto;
width: 1000px;
background-color: pink;
}
.baidu li{
float: left;
height: 100px;
width: 200px;
list-style-type: none;
}
.baidu li img{
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="img/3.1@2x.png" ></li>
<li><img src="img/abcd.jpg" ></li>
<li><img src="img/img.png" ></li>
<li><img src="img/ldh.jpg" ></li>
</ul>
<script type="text/javascript">
var list = document.querySelector(".baidu").querySelectorAll("img")
console.log(list);
for (var i = 0; i < list.length; i++) {
list[i].onclick = function(){
document.body.style.background = "url("+this.src+") no-repeat"
}
}
</script>
</body>
</html>
属性操作
获取属性值
element.属性
element.getAttribute('属性'); 主要是获得自定义属性
设置属性
element.属性 = '值'
element.setAttribute('属性', '值'); 主要是针对自定义属性
删除属性
element.removeAttribute('属性');
H5中规定，自定义属性以data-开头
节点操作
除了以上获取元素的方法，还有一种，通过关系获取节点的方法
比如，兄弟之间、父子之间等
通过关系获取节点
获取某个节点的父节点：someNode.parentNode
获取某个节点的子节点：someNode.childNodes获取所有的节点，一般不提倡使用
获取某个节点的子节点：someNode.children获取所有的子元素节点，提倡使用
获取某个节点的第一个子节点（全部子节点里面找）：someNode.firstChild找不到则返回null
获取某个节点的最后一个子节点（全部子节点里面找）：someNode.lastChild找不到则返回null
获取某个节点的第一个子元素节点：someNode.firstElementChild找不到则返回null
获取某个节点的最后一个子元素节点：someNode.lastElementChild找不到则返回null
实际开发中，常使用这种：
someNode.children[0]
someNode.children[someNode.children.length - 1]
兄弟节点
获取某个节点的下一个节点（从所有节点里面取）：node.nextSibling找不到则返回null
获取某个节点的上一个节点（从所有节点里面取）：node.previousSibling找不到则返回null
获取某个节点的下一个元素节点：node.nextElementSibling找不到则返回null
获取某个节点的上一个元素节点：node.previousElementSibling找不到则返回null
创建节点
document.createElement('tagName');
此方法又被称为：动态创建元素节点
创建了，还需要添加节点，才能够正常显示
添加节点
node.appendChild(child);
将child节点，添加到父节点node里面的子节点的尾部
node.insertBefore(child, 指定元素);
将child节点，添加到父节点node里面的 指定子节点 的前面
<body>
<ul>
<li>
234
</li>
</ul>
<script type="text/javascript">
// 创建一个li元素
var temp1 = document.createElement('li');
temp1.innerHTML = "temp1";
//获取父元素ul
var temp2 = document.querySelector('ul');
//将创建的li元素放在父元素ul的子元素的最后面
temp2.appendChild(temp1);
//创建一个li元素
var temp3 = document.createElement('li');
temp3.innerHTML = "temp3";
//将li元素，放在ul父元素的子元素里面，第一个元素的前面
temp2.insertBefore(temp3, temp2.firstChild);
</script>
</body>
贴吧回复
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" lang="en">
<title></title>
<style>
li {
background: pink;
}
</style>
</head>
<body>
<textarea rows="" cols=""></textarea>
<button type="button">发布</button>
<ul>
</ul>
<script type="text/javascript">
var textarea = document.querySelector('textarea');
var button = document.querySelector('button');
var ul = document.querySelector('ul');
button.onclick = function(){
if(textarea.value == 0){
alert("请输入文字");
return false;
}else{
var li = document.createElement('li');
li.innerHTML = textarea.value;
ul.insertBefore(li, ul.firstChild);
}
}
</script>
</body>
</html>
删除节点
node.removeChild(child);
从DOM中删除一个子节点，返回删除的节点
阻止a标签跳转，javascript:;
例如：<a href="javascript:;">删除</a>
复制节点
node.cloneNode();
如果括号里面不写参数，或者写false，只复制节点本身，节点里面有的东西不复制，也称为浅拷贝
参数为true，则连节点里面的内容也复制，也称为深拷贝
三种创建元素的方式
第一种：
document.write()创建元素，如果页面文档流加载完毕，再调用这句话会导致页面重绘（很少使用）
第二种：
元素名.innerHTML = '<a href="#">百度</a>'这种方法，在同时插入多个的时候，要拼接字符串，效率没有第三种方式的效率高
也可以采用数组的方式，效率比第三种方式还高
因此，第二种方式，同时插入多个标签元素，建议使用数组方式
第三种：
var li = document.createElement('li');
ul.insertBefore(li, ul.firstChild);
或
ul.appendChild(li);
事件高级
注册事件（绑定事件）
给元素添加事件，被称为 注册事件 或者 绑定事件
注册事件有两种方式：传统方式 和 方法监听注册方式
传统方式：
利用on开头，比如onclick
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式：
addEventListener()
特点：同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行
eventTarget.addEventListener(type, listener, useCapture)
eventTarget：给谁添加监听
type：事件类型字符串，比如click、mouseover，注意，不需要加on
listener：事件处理函数，事件发生时，会调用该函数
useCapture：可选参数，布尔值，默认是false
下面的例子，会弹框两次，而不是新的覆盖旧的
<body>
<button type="button">123</button>
<script type="text/javascript">
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
alert(123);
})
btn.addEventListener('click', function(){
alert(321);
})
</script>
</body>
删除事件（解绑事件）
传统方式删除事件：元素.onclick = null;
方法监听注册方式：eventTarget.removeEventListener('click', 添加时的函数名);
DOM事件流
事件流，描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特点的顺序传播，这个传播过程即DOM事件流
事件的传播过程，即DOM事件流
比如，我们给一个div注册了点击事件：
DOM事件流分为3个阶段：
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
跟OC中的事件传递机制有点相似
- JS代码中，只能执行捕获或者冒泡其中的一个阶段
- onclick和addachEvent只能得到冒泡阶段
eventTarget.addEventListener(type, listener, useCapture)
其中，第三个参数：
如果是true，则表示在事件捕获阶段调用事件处理程序
如果是false，则表示在冒泡阶段调用事件处理程序
事件对象
<script type="text/javascript">
var button = document.querySelector('button');
button.onclick = function(event){
}
</script>
其中，function小括号里面的event就是一个事件对象
事件对象只有 有了事件 才会存在，是系统给我们自动创建的，不需要我们传递参数
事件对象 是 事件的一系列相关数据的集合
e.preventDefault()该方法 阻止默认事件（默认行为）标准
e.stopPropagation()阻止冒泡 标准
事件委托（代理、委派）
事件委托也称为事件代理，在jQuery里面称为事件委派
事件委托的原理
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
事件委托的作用
只操作了一次DOM，提高了程序的性能
常用的鼠标事件
- 禁止鼠标右键菜单
<script type="text/javascript">
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
</script>
contextmenu主要控制何时显示上下文菜单，可以用于取消默认的上下文菜单
- 禁止鼠标选中
<script type="text/javascript">
document.addEventListener('selectstart', function(e){
e.preventDefault();
})
</script>
鼠标事件对象
当鼠标经过的时候，鼠标事件对象里面都有哪些东西？
MouseEvent
例子：自定义鼠标按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" lang="en">
<title></title>
<style>
img {
position: absolute;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<img src="img/pig.jpg" alt="">
<script type="text/javascript">
var pic = document.querySelector('img');
//mousemove 鼠标移动事件
document.addEventListener('mousemove', function(e) {
pic.style.left = e.pageX + 'px';
pic.style.top = e.pageY + 'px';
})
</script>
</body>
</html>
键盘事件对象
KeyboardEvent
onkeyup：某个键盘按键被松开时触发
onkeydown：某个键盘按键被按下时触发
onkeypress：某个键盘按键被按下时触发 但不是吧功能键，比如ctrl shift 箭头等
1859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
