JavaScript【十一】2022.5.23第十三周

最新推荐文章于 2024-07-26 20:46:33 发布

小亓同学

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量91

点赞数

分类专栏：学习笔记JS 文章标签： javascript

本文链接：https://blog.csdn.net/m0_63564657/article/details/124944207

版权

学习笔记JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

API
应用程序编程接口
Web API 一般都要有输入和输出（函数的传参和返回值）
浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

DOM
文档对象模型是一种接口
通过已定义的DOM接口，可以改变网页的内容、结构和样式

DOM树 又称为文档树模型，把文档映射成树型结构
文档：指一个页面，用document表示
元素：指标签，用element表示
节点：网页中所有内容都称之为节点(包括标签、属性、文字、注释等)，用node表示
标签节点：网页中的所有标签，通常称为元素节点，又简称为元素
DOM把以上内容全都看做为对象

获取元素

*根据ID获取
document.getElementById('id');
使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="time">1990-4-20</div>
		<script>
		//因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
		//get 获得 element 元素 by 通过 驼峰命名法 
		//参数 id是大小写敏感的字符串
		//返回的是一个元素对象
		var timer = document.getElementById('time');
		console.log(timer);
		console.log(typeof timer);
		//console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
		console.dir(timer);
		</script>
	</body>
</html>

*根据标签名获取
document.getElementsByTagName('标签名');
注意：
因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
得到元素对象是动态的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			   <li>若夫淫雨霏霏连月不开1</li>
			   <li>若夫淫雨霏霏连月不开2</li>
			   <li>若夫淫雨霏霏连月不开3</li>
			   <li>若夫淫雨霏霏连月不开4</li>
			   <li>若夫淫雨霏霏连月不开5</li>
			  </ul>
			  <ol id="ol">
			   <li>生僻字</li>
			   <li>生僻字</li>
			   <li>生僻字</li>
			   <li>生僻字</li>
			  </ol>
			  <script>
			   // 1.返回的是获取到的对象的集合 以伪数组的形式存储
			   // 2.得到的元素内容是动态的
			   var lis = document.getElementsByTagName('li');
			   console.log(lis);
			   console.log(lis[0]);
			   // 2.遍历元素对象
			   for (var i = 0; i < lis.length; i++) {
			    console.log(lis[i]);
			   }
			   // 3. 如果页面中只有一个li 返回的还是伪数组的形式
			   // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
			   // 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
			   // var ol = document.getElementsByTagName('ol'); // [ol]
			   // console.log(ol[0].getElementsByTagName('li'));
			   var ol = document.getElementById('ol');
			   console.log(ol.getElementsByTagName('li'));
			  </script>
		</body>
</html>

*通过 HTML5 新增的方法获取
document.getElementsByClassName('类名')；// 根据类名返回元素对象集合
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器'); // 根据指定选择器返回
注意：
querySelector 和 querySelectorAll里面的选择器需要加符号，如:document.querySelector('#nav');

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">盒子</div>
		  <div class="box">盒子</div>
		  <div id="nav">
		   <ul>
		    <li>首页</li>
		    <li>产品</li>
		   </ul>
		  </div>
		  <script>
		   // 1.通过类名获取   document.getElementsByClassName('类名');  也是伪数组形式
		   var boxs=document.getElementsByClassName('box');
		   console.log(boxs);
		   
		   // 2.通过指定的选择器返回第一个元素对象 document.querySelector('选择器');
		   // 切记 里面的选择器需要加符号 如： .box #nav
		   var firstbox=document.querySelector('.box');
		   console.log(firstbox);
		   var nav=document.querySelector('#nav');
		   console.log(nav);
		   var li=document.querySelector('li');
		   console.log(li);
		   
		   // 3.根据指定选择器返回所有元素对象集合 document.querySelectorAll('选择器')
		   // 注意事项与第二个一样
		   var allBox=document.querySelectorAll('.box');
		   console.log(allBox);
		   var lis=document.querySelectorAll('li');
		   console.log(lis);
		  </script>
	</body>
</html>

*获取特殊元素（body，html）
获取body元素
doucumnet.body // 返回body元素对象
获取html元素
document.documentElement // 返回html元素对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		    // 1.获取body 元素
		    var bodyEle = document.body;
		    console.log(bodyEle);
		    console.dir(bodyEle);
		    // 2.获取html 元素
		    // var htmlEle = document.html;
		    var htmlEle = document.documentElement;
		    console.log(htmlEle);
		</script>
	</body>
</html>

事件基础

事件是可以被JavaScript侦测到的行为
触发---响应机制
网页中的每一个元素都可以产生触发JavaScript的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn">唐伯虎</button>
		<script>
		    // 点击一个按钮，弹出对话框
		    //(1) 事件源 
		    var btn = document.getElementById('btn');
		    //(2) 事件类型 
		    //(3) 事件处理程序  
		    btn.onclick = function() {
		        alert('点秋香');
		    }
		</script>
	</body>
</html>

执行事件的步骤：
1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序(采取函数赋值形式)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>123</div>
		<script>
		    // 执行事件步骤
		    // 点击div 控制台输出 我被选中了
		    // 1. 获取事件源
		    var div = document.querySelector('div');
		    // 2.绑定事件 注册事件
		    // div.onclick 
		    // 3.添加事件处理程序 
		    div.onclick = function() {
		        console.log('我被选中了');
		
		    }
		</script>
	</body>
</html>

常见的鼠标事件：
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发

操作元素

DOM操作可以改变网页内容、结构和样式
可以利用DOM操作元素来改变元素里面的内容、属性等

改变元素内容
element.innerText//从起始位置到终止位置的内容, 但它去除 html 标签，同时空格和换行也会去掉
element.innerHTML//起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style>
	        div,
	        p {
	            width: 300px;
	            height: 30px;
	            line-height: 30px;
	            color: #fff;
	            background-color: pink;
	        }
	    </style>
	</head>
	
	<body>
	    <button>显示当前系统时间</button>
	    <div>某个时间</div>
	    <p>1123</p>
	    <script>
	        // 当我们点击了按钮，div里面的文字会发生变化
	        // 1. 获取元素 
	        var btn = document.querySelector('button');
	        var div = document.querySelector('div');
	        // 2.注册事件
	        btn.onclick = function() {
	            // div.innerText = '1990-4-20';
	            div.innerHTML = getDate();
	        }
	        function getDate() {
	            var date = new Date();
	            var year = date.getFullYear();
	            var month = date.getMonth() + 1;
	            var dates = date.getDate();
	            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
	            var day = date.getDay();
	            return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
	        }
	        // 我们元素可以不用添加事件
	        var p = document.querySelector('p');
	        p.innerHTML = getDate();
	    </script>
	</body>
</html>

常用元素的属性操作
innerText、innerHTML 改变元素内容
src、href
id、alt、title

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div></div>
		<p>
		    文字
		    <span>123</span>
		</p>
		<script>
		    // innerText 和 innerHTML的区别 
		    //  innerText 不识别html标签 非标准  去除空格和换行
		    var div = document.querySelector('div');
		    // div.innerText = '<strong>今天是：</strong> 2022';
		    //  innerHTML 识别html标签 W3C标准 保留空格和换行的
		    div.innerHTML = '<strong>今天是：</strong> 2022';
		    // 这两个属性是可读写的  可以获取元素里面的内容
		    var p = document.querySelector('p');
		    console.log(p.innerText);
		    console.log(p.innerHTML);
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style>
	        img {
	            width: 300px;
	        }
	    </style>
	</head>
	
	<body>
	    <button id="ldh">刘德华</button>
	    <button id="zxy">张学友</button> <br>
	    <img src="img/ldh.jpg" alt="" title="刘德华">
	
	    <script>
	        // 修改元素属性 src
	        // 1. 获取元素
	        var ldh = document.getElementById('ldh');
	        var zxy = document.getElementById('zxy');
	        var img = document.querySelector('img');
	        // 2. 注册事件  处理程序
	        zxy.onclick = function() {
	            img.src = 'img/zxy.jpg';
	            img.title = '张学友';
	        }
	        ldh.onclick = function() {
	            img.src = 'img/ldh.jpg';
	            img.title = '刘德华';
	        }
	    </script>
	</body>
	
	</html>

案例：分时显示不同图片,显示不同问候语

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			img {
				width: 300px;
			}
		</style>
	</head>
	<body>
		<img src="img/早上好.gif" alt="" />
		<div>上午好</div>
		<script>
			// 1. 获取元素
			var img = document.querySelector("img");
			var div = document.querySelector("div");
			// 2. 得到当前的小时数
			var date = new Date();
			var h = date.getHours();
			// 3. 判断小时数改变图片和文字信息
			if (h < 12) {
				img.src = "img/早上好.gif";
				div.innerHTML = "早上好";
			} else if (h < 18) {
				img.src = "img/下午好.png";
				div.innerHTML = "下午好";
			} else {
				img.src = "img/晚上好.gif";
				div.innerHTML = "晚上好";
			}
		</script>
	</body>
</html>