javaScript入门介绍2

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对这两种状态进行灵活转换就行了

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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/lucky-light/p/14476792.html