2.1 文档对象模型
2.1.1 文档对象模型介绍
- 文档对象模型(Document Object Model，DOM)：DOM定义了访问HTML和XML文档的标准。
- DOM是独于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
- DOM将HTML描绘成一个由多层节点构成的结构。节点可以分为多种不同类型，每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据和方法，也与其他节点存在某种关系。
- 节点之间构成了层次，所有页面标记表现为一个以特定节点为根节点的树形结构。
2.1.2 常用对象类型
- Node：基类型，定义了基本方法
- Document：文档对象
- Element：元素节点对象
- Attr(attribute)：属性节点对象
- Text：文本节点对象
2.1.3 DOM对象访问
-
文档对象模型为层次结构，所有下层对象都是其上层对象的子对象。
-
子对象其实就是父对象的属性，其引用方式与对象属性的引用相同。
-
当引用较低层次的对象时，要根据对象的包含关系，使用成员引用操作符 . 一层一层地引用对象。
-
引用文档中表单（form1）的文本输入框的name：
document.form1.name
2.1.4 DOM示例
示例 用户在输入组件中输入圆的半径，计算圆的面积
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算圆的面积</title>
</head>
<script type="text/javascript">
function getArea() {
<!--一定要和名字匹配-->
var input = document.form.radius;
var radius = input.value;
radius = Number(radius);
var res = 3.14 * radius * radius;
alert(res);
}
</script>
<body>
<form action="a.jsp" method="post" name="form">
半径<input type="text" name="radius" /> <br />
<input type="button" name="button" value="Cal" onclick="getArea()" />
</form>
</body>
</html>
示例 链接 http://www.ysu.edu.cn加上id属性进行唯一标识
document.getElementById("ID内容")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接元素</title>
</head>
<script type="text/javascript">
function getLink() {
alert("函数运行");
<!--有 BUG -->
var link = document.getElementById("idlink");
var href = link.attributes[1];
var text = link.childNodes[0];
alert(text.nodeValue);
alert(href.nodeValue);
}
</script>
<body>
<a id="idlink" href="http://www.ysu.edu.cn">燕山大学</a> <br />
<input type="button" name="btn" value="获取信息" onclick="getLink()" />
</body>
</html>
2.2 自定义对象
- JavaScript可以使用的对象包括三种：内置对象，浏览器对象，自定义对象。
- JavaScript中实现自定义对象，使用function关键字。
function 类名()
{
this.成员变量 = 初始值;
this.成员函数 = function()
{
...
}
}
下面示例，
定义圆类(Circle)
一个成员变量：半径(radius)
一个成员函数：计算面积(area)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算圆的面积</title>
</head>
<script type="text/javascript">
function getArea() {
<!--一定要和名字匹配-->
var input = document.form.radius;
var radius = input.value;
radius = Number(radius);
var res = 3.14 * radius * radius;
alert(res);
}
<!--定义类 Circle-->
function Circle() {
this.radius = 0;
this.area = function () { // 计算面积的函数
return 3.14 * this.radius * this.radius;
}
}
</script>
<body>
<form action="a.jsp" method="post" name="form">
半径<input type="text" name="radius" /> <br />
<input type="button" name="button" value="Cal" onclick="getArea()" />
</form>
</body>
</html>
2.3 验证表单
-
当用户单击了表单中的提交按钮之后，用户在表单中填写或选择的内容将被传送到服务器端特定的程序(由action属性指定)，由该程序进行具体的处理。
-
表单正式提交到服务器之前，需要使onSubmit的值为true，因此可以通过为onSubmit事件指定的处理函数来进行表单数据的验证。
- 因此我们根据 onSubmit 这个东西，验证填写表单内容是否 规范
onSubmit="return Check('id')" ;对应 document.form.get
2.4 DIV
- <div>可定义文档中的分区，可以把文档分割为独立的、不同的部分
- l可以对一个 <div> 元素定义 id 属性，用于标识唯一的 div。
2.5 菜单
-
利用Div和JavaScript可以实现菜单。
-
利用JavaScript控制Div的显示和隐藏。
- div.style.display
- "none"
- "block"
- 利用js对这两种状态进行灵活转换就行了
- div.style.display
2.6 作业
计算圆的面积，使用
onclick, onSubmit, document.form1.radius.value, getElementById(id)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算圆的面积</title>
</head>
<script type="text/javascript">
function Cal() {
var radius = document.form1.radius.value;
if (radius == "") {
alert("未输入任何数据");
} else {
radius = Number(radius);
if (radius >= 0) {
alert("圆的面积为=" + (3.14 * radius * radius));
} else {
alert("半径数值有误");
}
}
return true;
}
function Check(id) {
alert('id='+id);
var radius = document.getElementById(id);
alert('radius='+radius);
alert('radius.nodeValue='+radius.nodeValue);
alert('radius.nodeName='+radius.nodeName);
alert('radius.nodeType='+radius.nodeType);
alert('radius.value='+radius.value); <!--这个才是真实显示-->
return false;
}
</script>
<body>
<form action="a.jsp" method="post" name="form1" onsubmit="return Check('123456')">
半径 <input type="text" name="radius" id="123456"/> <br />
<input type="button" name="btn" value="开始计算" onclick="Cal()"/>
<input type="submit" name="submit1" value="submit" />
</form>
</body>
</html>
尝试DIV和超链接整个小菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用DIV来</title>
</head>
<script type="text/javascript">
function showDiv(id) {
var tar = document.getElementById(id);
if (tar.style.display == "none") {
tar.style.display = "block";
} else {
tar.style.display = "none";
}
return false;
}
</script>
<body>
<div id="ysu_school">
<a href="" onclick="return showDiv('ysu_college')">燕山大学</a><br /> <!--注意链接的是哪些地方-->
<div id="ysu_college">
<a href="" onclick="return showDiv('ysu_department')">-- 信息学院</a><br />
<div id="ysu_department">
<a href="">---- 计算机</a><br />
<a href="">---- 光电子</a><br />
<a href="">---- 软件工程</a><br />
</div>
<a href="">-- 机械学院</a><br />
</div>
</div>
</body>
</html>