JavaScript对象编程

最新推荐文章于 2024-02-28 23:59:43 发布

静_步

最新推荐文章于 2024-02-28 23:59:43 发布

阅读量241

点赞数

分类专栏： 4、Web前端基础文章标签： javascript

本文链接：https://blog.csdn.net/qq_43785075/article/details/110931283

版权

4、Web前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript是基于对象的编程语言，通过对象的组织层次来访问并给对象施以相应的操作方法，可大大简化JavaScript程序设计，并提供直观、模块化的方式进行脚本程序开发。

1.文档对象模型（DOM）

什么是 DOM？
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
什么是 XML DOM？
XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
什么是 HTML DOM？
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

1.1文档对象模型（DOM）简介

DOM采用直观、一致的方式对结构化文档进行模块化处理，形成一棵树形结构的文档树，从而提供了访问、修改该文档的简易编程接口。所以，一旦掌握了DOM编程模型，就拥有了使用JavaScript脚本动态修改HTML页面的能力。
DOM提供了访问结构化文档的一种方式，但DOM并不是一种技术，它只是访问结构化文档的一种思想。
对于支持DOM模型的浏览器而言，但浏览器装载一个HTML页面后，浏览器内部已经得到了该HTML文档对应的DOM树。通过JavaScript脚本修改这颗DOM树，浏览器里的HTML页面会随之发生变化。

（1）HTML DOM 节点

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

HTML DOM 节点树
在这里插入图片描述
可通过节点的 innerHTML 属性来访问文本节点的值。

(2)HTML DOM 方法

方法是我们可以在节点（HTML 元素）上执行的动作。

getElementById()	返回带有指定 ID 的元素
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表
appendChild()	把新的子节点添加到指定节点
removeChild()	删除子节点
replaceChild()	替换子节点
insertBefore()	在指定的子节点前面插入新的子节点
createAttribute()	创建属性节点
createElement()	创建元素节点
createTextNode()	创建文本节点
getAttribute()	返回指定的属性值
setAttribute()	把指定属性设置或修改为指定的值

(3)HTML DOM 属性

属性是节点（HTML 元素）的值.。

innerHTML 属性	innerHTML 属性用于获取或替换 HTML 元素的内容
nodeName 属性	nodeName 属性规定节点的名称
nodeValue 属性	nodeValue 属性规定节点的值
nodeType 属性	nodeType 属性返回节点的类型。nodeType 是只读的

nodeName 属性
nodeName 是只读的
元素节点的nodeName与标签名相同
属性节点的nodeName与属性名相同
文本节点的nodeName始终是 #text
文档节点的 nodeName始终是#document
nodeName 始终包含 HTML 元素的大写字母标签名
2.nodeValue
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
3.nodeType 属性

元素类型	NodeType
元素	1
属性	2
文本	3
注释	8
文档	9

（4）HTML DOM 访问

getElementById() 方法返回带有指定 ID 的元素：

document.getElementById("intro");

getElementsByTagName() 返回带有指定标签名的所有元素：

document.getElementsByTagName("p");

getElementsByClassName() 方法查找带有相同类名的所有 HTML 元素：

document.getElementsByClassName("intro");

（5）HTML DOM - 修改

修改 HTML = 改变元素、属性、样式和事件

1).修改 HTML 元素

修改 HTML DOM 意味着许多不同的方面：

改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）

2).创建 HTML 内容

改变元素内容的最简答的方法是使用 innerHTML 属性
除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容

<html>
<body>

<p id="demo1">Hello World!</p>

<script>
document.getElementById("demo1").innerHTML="New text!";
</script>

</body>
</html>

3).改变 HTML 样式


<html>

<body>
<p id="demo2">Hello world!</p>

<script>
document.getElementById("demo2").style.color="blue";
</script>

</body>
</html>

在这里插入图片描述

4).创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上

<div id="demo3">
<p id="demo4">This is a paragraph.</p>
<p id="demo5">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");//创建了一个新的 <p> 元素
var node=document.createTextNode("This is new.");//创建文本节点
para.appendChild(node);//向 <p> 元素追加文本节点

var element=document.getElementById("demo3");//查找到一个已有的元素
element.appendChild(para);//向这个已存在的元素追加新元素
</script>

在这里插入图片描述

(6)HTML DOM - 事件

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

1).onload 和 onunload 事件

当用户进入或离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies。

2)onchange 事件

onchange 事件常用于输入字段的验证

3)onmouseover 和 onmouseout 事件

在鼠标指针移动到或离开元素时触发函数

2.窗口（window）对象

window对象在客户端JavaScript中扮演重要的角色，它是客户端程序的全局对象，也是客户端对象层次的根。它是JavaScript中最大的对象，它描述的是一个浏览器窗口。

2.1窗口介绍

window对象代表浏览器的框架或者浏览器的窗口。通过window对象的某些属性，可以查询到用户所使用的是哪一种浏览器、用户所访问过的页面的历史记录以及浏览器窗口的大小、用户计算机屏幕的大小等信息。还可以使用window对象来访问或修改浏览器状态栏中显示的文本信息、在浏览器中加载一个新页面，甚至打开一个新的浏览器窗口。
window对象是一个全局对象，因此可以直接使用全局对象的属性和方法，而无需写出全局对象的对象名。

2.2对话框

（1）弹出对话框
alert()—弹出一个包含“确定”按钮的对话框
（2）选择对话框
confirm()—弹出一个包含“确定”和“取消”按钮的对话框，如果单击“确定”，则返回true，如果单击“取消”，则返回false
（3）输入对话框
prompt()----弹出一个包含“确定”按钮、“取消”按钮和一个文本框的对话框，可以接收用户输入的信息。如果单击“确定”，则返回文本框已有内容，如果单击“取消”，则返回null

2.3窗口操作

浏览网页时，经常通过超链接或按钮打开一个新窗口，通常窗口里会显示新的页面内容，实现弹出窗口使用window对象的open()方法即可。

open(<URL>,<窗口名称>，<参数>);

（1）URL:指定新窗口要打开页面的URL地址，如果为空，则不打开任何网页。
（2）窗口名称：指定被打开新窗口的名称，可以使用“_top”，“_blank”等内置名称。这里的名称跟<a href …target >里面的“target”属性是一样的。
（3）参数：指定被打开新窗口的外观。如果只需打开一个普通窗口，该参数为空即可。多个参数之间用逗号隔开。

3.文档对象

浏览器在加载文档元素时，会自动在客户端宿主环境中检索并构造文档元素对象，然后把同类元素对象的引用地址存储在对应的数组中，并把这个数组定义为Document对象的一个属性。
form对象、image对象、applet对象还可以直接使用name属性访问。

4.表单对象

4.1form对象

表单是页面元素的一种，隶属于Document对象，表单元素也是以数组的形式组织，根据表单在页面中的位置先后次序，依次排列形成表单数组。

4.2form对象属性与方法

属性	描述
action	设置或返回表单action属性
enctype	设置或返回表单用来编码内容的MIME类型
id	设置或返回表单id
length	返回表单中元素数目
method	设置或返回将数据发送到服务器的http方法
name	设置或返回表单的名称
target	设置或返回表单提交结果的Frame或Window名

方法	描述
reset()	把表单的输入元素重置为它们的默认值
submit()	提交表单

4.3下拉列表

一个完整的下拉列表由select元素对象和option元素对象组成，前者表示下拉列表的整个框架，后者则表示下拉列表中的每个具体选项。select元素对象对应于网页中的下拉列表，由<select>和</select>标签来表示；option元素对象对应下拉列表中的选项，由<option>和</option>标签来表示，且嵌套在select元素中。
表单中<select>标签每出现一次，一个select对象就会被创建。可以通过遍历表单的elements[]数组来访问select对象，也可以使用document.getElementById()方法访问。
例：显示下拉列表中选中项目的索引值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉列表</title>
		<script>
			function getIndex(){
				var n=document.getElementById("MySelect");
				alert(n.selectedIndex);
				// alert(n.value);
			}
		</script>
	</head>
	<body>
		<form method="post">
			<select id="MySelect">
				<option>咖啡</option>
				<option>红茶</option>
				<option>果汁</option>
				<option>矿泉水</option>
			</select>
		</form>
		<br />
		<br />
		<input type="button" value="显示选中项目索引" onclick="getIndex()" />
	</body>
</html>

在这里插入图片描述

4.4表单注册与表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单注册与验证</title>
		<script>
			function check(){
				f=document.form1;//获取表单对象
				//用户名不能为空
				if(f.uid.value==""){
					alert("用户名为必填项！");
					f.uid.focus();
					return false;
				}
				//验证两次密码输入是否一致
				if((f.pasw1.value!="")||(f.psw2.value!="")){
					if(f.pasw1.value!=f.psw2.value){
						alert("两次密码输入不一致，请重新输入！");
						f.psw1.focus();
						return false;
					}
				}
				else{
					alert("密码不能为空！");
					f.psw1.focus();
					return false;
				}
				if(f.gender.value==""){
					alert("性别必须填写！");
					return false;
					
				}
				alert("表单通过验证！");
				f.submit();
			}
		</script>
	</head>
	<body>
		<form method="post" name="form1" id="form1">
			<table width="150" border="0" align="center" cellpadding="0" cellspacing="5">
				<tbody>
					<tr>
						<td colspan="2" align="center">新用户注册</td>
					</tr>
					<tr>
						<td width="40%"><label for="uid">用户名：</label></td>
						<td width="60%"><input name="uid" type="text" id="uid" size="30" maxlength="10" /></td>
					</tr>
					<tr>
						<td>性别：</td>
						<td>
							<input name="gender" type="radio" id="gender" value="boy" />
							<label for="gender">男</label>
							<input name="gender" type="radio" id="gender" value="girl" />
							<label for="gender">女</label>
						</td>
					</tr>
					<tr>
						<td>密码：</td>
						<td><input name="psw1" type="password" id="pasw1" size="30" /></td>
					</tr>
					<tr>
						<td><label for="psw2">确认密码：</label></td>
						<td><input name="psw2" type="password" id="psw2" size="30" /></td>
					</tr>
					<tr>
						<td><label for="question">密码问题：</label></td>
						<td><input name="question" type="text" id="question" size="30" /></td>
					</tr>
					<tr>
						<td><label for="answer">密码答案：</label></td>
						<td><input name="answer" type="text" id="answer" size="30" /></td>
					</tr>
					<tr>
						<td><label for="email">电子邮件：</label></td>
						<td><input name="email" type="text" id="email" size="30" /></td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td>
							<input type="submit" name="submit" id="submit" value="注册" onclick="return check()" />
							<input type="reset" name="reset" id="reset" value="清除" />
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</body>
</html>

在这里插入图片描述
到此，JavaScript的基础就复习完了，对于此部分的学习需要有整体的认识和不断的练习，对于一些细节问题可以去w3c查找。
对于学习前端的朋友，在学习完JavaScript的基础上可以继续学习jQuery和Ajax。我在复习完HTML和CSS之后也会记录jQuery和Ajax。