4 JavaScript基础(2)

Zinksl

已于 2023-04-24 17:26:24 修改

阅读量647

点赞数 19

分类专栏： ③《前端基础》文章标签： javascript 前端开发语言

于 2022-10-07 23:54:12 首次发布

本文链接：https://blog.csdn.net/Zinkse/article/details/127201284

版权

③《前端基础》专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

📖博主介绍

个人主页： Zinksl
编程社区： Zinksl编程酒馆
个人格言：想法落实的最佳时机就是现在！🏄

如果你 喜欢交流或热爱分享，欢迎加入编程社区或交流群 大家一起学习技术，交流心得，共同进步🚅

JavaScript对象：自定义对象、宿主对象、内建对象

内建对象: 由ES标准中定义的对象，在所有ES实现中都可以使用[Math、String、Number…]
**宿主对象：**由js环境提供的对象，如[BOM、DOM]
**自定义对象：**程序员自定义
:::

1 DOM对象(文档对象模型：Document Object Model)

1.1 模型图解

1.2 节点（node）：构成HTML最基本的单元，我们把常用节点分为4类

（1）文档节点：指HTML文档

（2）元素节点：指HTML中标签

（3）属性节点：指元素的属性

（4）文本节点：HTML中文本内容

2 事件

2.1 常用事件

在这里插入图片描述

2.2 常见问题

js绑定节点后发现值是null，无法进行相应的事件操作
如下：

原因: 代码执行顺序所导致的，因为js位置在页面代码之前加载，此时页面还未加载，所以找不到节点元素，无法进行其他操作

解决方案： 为window绑定一个onload事件，使得页面先加载
案例：

//windows绑定onload事件，使得js代码在页面加载完之后执行
window.onload = function (){
	// 获取button对象
	var buttonT = document.getElementById("btn2");
	// button绑定点击事件
	buttonT.onclick = function(){
		// 更换button文本内容
		buttonT.innerHTML = "buttonTest";
	}
	
}

2.3 获取元素节点

需要通过document对象获取元素节点

方法名	说明
getElementById()	通过id获取元素节点对象
getElementsByTagName()	通过标签名获取一组，元素节点对象
getElementsByName()	通过name属性获取一组，元素节点对象

案例

需求：做一个图片展示页面，
条件：①有提示语:共多少张图片，此时展示第几张
②通过按钮实现图片切换，当图片到最后一张时再点击下一张跳回第一张，第一张的上一张跳回最后一张

代码：
HTML页面代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM模型学习</title>
		<script type="text/javascript" src="js/test2.js"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#outer{
				width: 600px;
				margin: 60px auto;
				padding: 6px;
				background-color: skyblue;
				text-align: center;
			}
			img{
				width: 600px;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<span>图片展示：共5张，第1张</span>
			<img src="../JavaScript/img/1.jpg" alt="图片">
			<button id="prev"> 上一张</button>  <button id="next">下一张 </button>
		</div>
	</body>
</html>

js代码

window.onload = function(){
	// 通过id获取元素对象
	var pre = document.getElementById("prev");
	var nex = document.getElementById("next");
	// 定义数组存放图片路径
	var arrayImg = ["../JavaScript/img/1.jpg","../JavaScript/img/2.jpg","../JavaScript/img/3.jpg","../JavaScript/img/4.jpg","../JavaScript/img/5.jpg"];
	// 通过标签获取img元素对象
	var imgTest = document.getElementsByTagName("img")[0];
	var textT = document.getElementsByTagName("span")[0];
	var index = 0;
	nex.onclick = function(){
		index ++;
		if(index>4){
			index = 0;
		}
		imgTest.src = arrayImg[index];
		textT.innerHTML = "图片展示：共"+arrayImg.length+"张，第"+(index+1)+"张";
	} 
	pre.onclick = function(){
		index --;
		if(index<0){
			index = 4;
		}
		imgTest.src = arrayImg[index];
		textT.innerHTML = "图片展示：共"+arrayImg.length+"张，第"+(index+1)+"张";
	}
}

2.4 获取元素节点的相关节点

方法\属性	说明
获取子节点
getElementsByTagName()	方法，通过标签获取节点的子节点
childNodes	属性，获取节点的所有子节点（会获取到空字符）
firstChild	属性，获取节点第一个节点（会获取到空字符）
lastChild	属性，获取节点最后一个节点（会获取到空字符）
获取父节点和兄弟节点
parentNode	属性，获取当前节点父节点
previousSibling	属性，当前节点的前一个兄弟元素（不包含空字符，IE8以下不支持）
nextSibling	属性，当前节点的后一个兄弟节点