JavaScript 编程基础（二）_小明很喜欢编写函数,因为他觉得将代码放在函数中能提高程序的可读性,也可以促进代-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43412080/article/details/103477345

这篇博客介绍了JavaScript的基础知识，包括函数的定义、调用和作用域，Array数组的创建、遍历和常用属性，以及DOM节点树和节点访问的相关概念。通过示例详细讲解了如何操作函数和数组，帮助初学者理解JavaScript编程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 编程基础

一、函数

JavaScript 中提供了函数，函数可以将程序中繁琐的代码模块化，提高程序的可读性，并且便于后期的维护。

（1）函数的定义

为了使代码更为简洁并可以重复使用，通常将某段实现特定功能对的代码定义成一个函数。所谓函数，就是在程序中多条语句组成的逻辑单元。
在 JavaScript 中，函数使用关键字 function 来定义，其语法格式如下：

<script type="text/javascript">
	function 函数名 ([参数1,参数2,......]){
		函数体
	}
</script>

function：在声明函数时，必须使用的关键男子。
函数名：创建函数的名称，函数名唯一。
参数：外界传递给函数的值，可选，当有多个参数时，各参数之间用“,”隔开。
函数体：函数定义的主体，用于实现特定的功能。

（2）函数的调用

函数定义后不会自动执行，而是需要在特定的位置调用函数。函数调用很简单，只许引入函数名，并传入相应的参数即可。语法格式如下：

	函数名称 ([参数1,参数2,......])

例：下面定义一个带有参数的函数 show(text) ，在页面中输出“Hello World”.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>调用函数</title>
		<script type="text/javascript">
			//定义一个含有形参text的函数
			function show(text){
				document.write(text);	
			}
		</script>
	</head>
	<body>
		<script type="text/javascript">
			//调用函数show(),给出实参“Hello World”
			show("Hello World");
		</script>
	</body>
</html>

首先执行函数 show() 的函数体，然后，JavaScript 在其执行函数体之前会把实参值“Hello World”传递给形参 text。

（3）函数中变量的作用域

函数中的变量需要先定义后使用，但并不意味着定义变量后就可以随意使用。变量需要在它的作用范围内才可以被使用，这个作用范围称为变量的作用域。
变量的作用域取决于这个变量是哪一种变量，在 JavaScript 中，变量一般分为全局变量和局部变量。

全局变量：定义在所有函数之外，作用于整个程序的变量。
局部变量：定义在函数体之内，作用于函数体的变量。

二、Array 数组

与其他计算机语言一样，JavaScript 也是通过数组来保存具有相同类型的数据。

（1）创建数组

在 JavaScript 中，使用内置对象类 Array 可以创建数组对象,其语法格式如下：

var arrayname= new Array();		//新建一个长度为0的数组
var arrayname=new Array(n);		//新建一个指定长度为n的数组

//新建一个指定长度的数组，并赋值
var arrayname= new Array(元素1,元素2,元素3,......);	

var arraryname=[元素1,元素2,元素3,......];

一个数组元素由数组名、一对方括号**[ ]** 和括号中的下标组合而成，不同的数组元素可以通过下标进行区别。
例如，创建一个长度为 Y 的数组对象 year ,对于这个 year 数组对象，它包含数组元素year[0]、year[1]、year[2]、…、year[Y-1]。

（2）使用 for…in 语句

JavaScript 的 for…in 语句是一种特殊的 for 语句，专门用于处理与数组和对象相关的循环操作。for…,in 语句可以依次对数组中的每个元素执行一条或多条语句。其语法格式如下：

		for (变量 in 对象){
			//此处为JavaScript代码
		}

（3）数组的常用属性和方法

属性/方法	说明
length	返回数组中数组元素的个数，即数组长度
toString	返回一个字符串，该字符串包含数组中所有元素，各个元素之间用逗号隔开

数组的 length属性是数组最常用的属性，另外，由于数组索引值是从0开始的，因此 length 属性值比数组中的最大索引值大 1。

（4）二维数组

对于复杂的业务逻辑，有时简单的一维数组不能够满足需求，需要使用二维数组。当数组中所有的元素也是数组时，就形成了二维数组。
例如，要保存一个班级所有人的姓名、年龄、性别等数据。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>二维数组</title>
	</head>
	<body>
		<script typr="text/javascript">
			var students,i,j;
			students = new Array();
			studetns[0]=new Array("张三","18岁","男");
			students[1]=new Array("李四","17岁","男");
			students[2]=new Array("王五","18岁","女");
			for(i in students[i]){
				for(j in students[i]){
					document.write(students[i][j]+"\t");
				}
				document,write.("<br />");
			}
	</body>
</html>

三、DOM 节点树

DOM（Document Object Model）称为文档对象模型，是一个表示和处理文档的应用程序接口（API），可用于动态访问、更新文档的内容、结构和样式。DOM将网页中文档对象的关系规划为节点层级，构成他们之间的等级关系，这种各对象间的层次结构被称为节点树。

DOM 节点树

如上图展示了DOM文档的树形结构，其中“html、head、body”都表示节点，一个文档的树形结构就是由各种不同的节点组成的。文档对象节点树有以下特点。

每个节点树有一个根节点。
除了根节点，每个节点都有一个父节点。
每个节点都可以有许多子节点。
具有相同父节点的节点叫“兄弟节点”。

四、节点的访问

在 DOM 中，每个节点都是一个对象，因此每个节点对象都有一系列的属性、方法。JavaScript 中可使用节点的属性和方法访问指定元素，来得到文档中的对象。

（1）访问指定元素

访问指定节点的常用方法。

方法	说明
getElementById()	获取拥有指定id的第一个元素引用对象
getElementByName()	获取带有指定名称的元素对象集合
getElementByTagName()	获取带有指定标签名的元素对象集合
getElementByClassName()	获取指定class的元素对象集合（不支持IE6~8浏览器）

（2）访问相关元素

节点对象的常用属性

属性	说明
parentNode	元素节点的父节点
childNode	元素节点的子节点数组
firstChild	第一个子节点
lastChild	最后一个子节点
previousSibling	前一个兄弟节点
nextSibling	下一个兄弟节点

*需要注意的是，document 对象是所有 DOM 对象的的访问入口，进行节点访问的时候需要首先从 document 对象开始。

五、元素对象常用操作

类型	方法	说明
创建节点	createElement()	创建元素节点
	createTextNode	创建文本节点
节点操作	appendChild()	为当前节点增加一个子节点（作为最后一个节点）
	insertBedore()	为当前节点增加一个子节点（插入到指定子节点之前）
	removeChild()	删除当前节点的某个子节点

使用Demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>节点的创建和追加操作</title>
	</head>
	<script type="text/javascript">
		function init(){
			//创建一个<h1>节点
			var h1 = document.createElement("h1");	
			//创建一个文本节点
			var text = document.createTextNode("Hello World!");
			//为<h1>追加文本节点
			h1.appendChild(text);
			//为<body>追加<h1>元素
			document.body.appendChild(h1);
		}
	</script>
	<body onload="init()">
	</body>
</html>

运行Demo结果
Demo运行结果

六、元素属性与操作

元素对象除了节点操作，还具有一些属性和内容的操作。

类型	属性/方法	说明
元素内容	inneHTML	获取或设置元素的HTML内容
样式属性	classnName	获取或设置元素的class属性
	style	获取或设置元素的style样式属性
位置属性	offsetWidth、offsetHeight	获取或设置元素的宽和高（不含滚动条）
	scrollEidth、scrollHeight	获取或设置元素的完整的宽和高（含滚动条）
	offsetTop、offsetLeft	获取或设置包含滚动条，距离上或左边滚动过的距离
	scrollTop、scrollLeft	获取或设置元素在网页中的坐标
属性操作	getAttribute()	获得元素指定属性值
	getAttribute()	为元素设置新到的属性
	removeAttribute()	为元素删除指定的属性

七、元素的样式操作

在操作元素属性时，style 属性可以修改元素的样式，className 属性可以修改元素的雷鸣，通过这两种方法即可完成元素的样式操作。

（1）style 属性

var test = document,getElementById("test");	//获得需要操作的对象
test.style.width="200px";	//设置样式，相当于： #test{width:200px;}
test.style.height="100px";	//相当于：#test{height:100px;}
test.style.backgroundColor = "#ff0000":	//相当于： #test{background-color:#ff0000;}
var testWidth=test.style.width;	//获得width样式

在CSS属性中带有“-”的样式（如background-color）,在style 操作中需要用“驼峰式”（如backgroundColor）,即在第二个及后续单词的首字母大写。

（2）className 属性

元素对象的className 属性用于切换元素的类名或为元素追加类名。

var test = document.getElementById("test");	//获得元素对象<div id="test">
test.className = "aa";	//添加样式，执行：<div id="tesst" class="aa">
test.className +="bb"'	//追加样式，执行： <div id="test" class="aa bb">
test.className = test.className.replace("bb","cc");
//替换样式，执行：<div id="test" class="aa cc">
tes.className = test.className.replace("cc","");
//删除cc，执行：<div id="test" class="aa">
test.className="";		//删除所有的样式