• web学习---JavaScript---笔记（二）

    Web API

    Web API是浏览器提供的一套操作浏览器功能(BOM) 和 页面元素(DOM) 的API

    DOM

    DOM：Document Object Model，文档对象模型
    是处理可扩展标记语言的标准编程接口

    DOM树
    在这里插入图片描述

    关于DOM操作，我们主要针对元素的操作，主要有：创建、增、删、改、查、属性操作、事件操作(总结p246)

    通过JS可以操作元素，问题是操作哪些元素呢？你得先找出来，告诉我要操作哪一个或哪些元素，这就涉及到获取页面元素

    获取页面元素

    如何获取页面元素？

    1. 通过ID获取
    2. 通过标签名获取
    3. H5新增方法获取
    4. 特殊元素获取

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    打印结果：

    <div id='time'>2022</div>
object
div#time

    • 1
    • 2
    • 3

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    伪数组：只能获取length或下标，不能插入、删除操作

    只能使用，不能操作

    3. 通过H5新增方法获取

    • 类名选择器
    • querySelector
    类名选择器

    通过类名获取，语法：
    document.getElementsByClassName();
    获取的也是数组

    querySelector
    document.querySelector('.className');//类名
document.querySelector('#idName');//id名
document.querySelector('li');//标签名字

    • 1
    • 2
    • 3

    返回，指定选择器的第一个元素对象

    querySelector()和querySelectorAll()

    语法：

    document.querySelector("选择器");//获取第一个该选择器
document.querySelectorAll("选择器");//获取所有的该选择器

    • 1
    • 2

    举例：

    document.querySelector("#main");//选择id为main的第一个元素
document.querySelectorAll("#list li");//选择id为list 下面所有的li
document.querySelectorAll(".test");//选择class为test的所有的元素

    • 1
    • 2
    • 3

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    执行事件的步骤

    1. 获取事件源
    2. 注册事件（绑定事件）
    3. 添加事件处理程序（采取函数赋值形式）
    		<div>123</div>
		<script type="text/javascript">
			var list = document.getElementsByTagName('div');
			var div = list[0];
			
			div.onclick = function(){
				alert('div被点击了');
			}
		</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    在这里插入图片描述

    操作元素

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    表单的修改

    利用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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    仿京东登录-显示密码

    在这里插入图片描述

    <!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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64

    样式属性的修改

    element.style 行内样式操作
element.className 类名样式操作

    • 1
    • 2

    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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    属性操作

    获取属性值

    element.属性 
element.getAttribute('属性'); 主要是获得自定义属性

    • 1
    • 2

    设置属性

    element.属性 = '值'
element.setAttribute('属性', '值'); 主要是针对自定义属性

    • 1
    • 2

    删除属性

    element.removeAttribute('属性');

    • 1

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    贴吧回复

    在这里插入图片描述

    <!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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    删除节点

    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);

    • 1
    • 2
    • 3
    • 4

    事件高级

    注册事件（绑定事件）

    给元素添加事件，被称为 注册事件 或者 绑定事件
    注册事件有两种方式：传统方式 和 方法监听注册方式

    传统方式：
    利用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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    删除事件（解绑事件）

    传统方式删除事件：元素.onclick = null;
    方法监听注册方式：eventTarget.removeEventListener('click', 添加时的函数名);

    DOM事件流

    事件流，描述的是从页面中接收事件的顺序
    事件发生时会在元素节点之间按照特点的顺序传播，这个传播过程即DOM事件流

    事件的传播过程，即DOM事件流

    比如，我们给一个div注册了点击事件：
    DOM事件流分为3个阶段：

    1. 捕获阶段
    2. 当前目标阶段
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    其中，function小括号里面的event就是一个事件对象
    事件对象只有 有了事件 才会存在，是系统给我们自动创建的，不需要我们传递参数
    事件对象 是 事件的一系列相关数据的集合

    e.preventDefault()该方法 阻止默认事件（默认行为）标准
    e.stopPropagation()阻止冒泡 标准

    事件委托（代理、委派）

    事件委托也称为事件代理，在jQuery里面称为事件委派

    事件委托的原理

    不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

    事件委托的作用

    只操作了一次DOM，提高了程序的性能

    常用的鼠标事件

    1. 禁止鼠标右键菜单
    		<script type="text/javascript">
			document.addEventListener('contextmenu', function(e) {
				e.preventDefault();
			})
		</script>

    • 1
    • 2
    • 3
    • 4
    • 5

    contextmenu主要控制何时显示上下文菜单，可以用于取消默认的上下文菜单

    1. 禁止鼠标选中
    		<script type="text/javascript">
			document.addEventListener('selectstart', function(e){
				e.preventDefault();
			})
		</script>

    • 1
    • 2
    • 3
    • 4
    • 5

    鼠标事件对象

    当鼠标经过的时候，鼠标事件对象里面都有哪些东西？
    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    键盘事件对象

    KeyboardEvent

    onkeyup：某个键盘按键被松开时触发
    onkeydown：某个键盘按键被按下时触发
    onkeypress：某个键盘按键被按下时触发 但不是吧功能键，比如ctrl shift 箭头等

  • 相关阅读:
    Java（二）数据类型与变量以及运算符
    数据结构与算法之集合: Leetcode 349. 两个数组的交集 (Typescript版)
    centos httpd
    【Redis实战】有MQ为啥不用？用Redis作消息队列！？Redis作消息队列使用方法及底层原理高级进阶
    某招聘网站_zp_stoken_逆向
    VMware无法连接网络问题&&不显示网络连接
    html实现扫雷小游戏(附源码)
    什么是 immutable？为什么要使用它？
    SouthMap平台版省去了安装CAD的诸多麻烦，集成在国产ZWCAD2022平台解决了此瓶颈！！！
    【Linux 下 MySQL5.7 中文编码设置】
  • 原文地址：https://blog.csdn.net/IOSSHAN/article/details/124915193