欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaWeb之 JavaScript基础语法&各类对象&DOM&BOM

程序员文章站 2022-03-09 09:07:48
...

JavaScript基础(编程语言)

一、JavaScript

1)概念:JavaScript是一门客户端脚本语言,其运行在客户端浏览器中,每一个浏览器都有JavaScript的解析引擎

2)脚本语言:不需要编译,直接就可以被浏览器解析执行

3)JavaScript的功能:可以来增强用户和HTML页面的交互过程,可以来控制HTML元素,让页面有一些动态的效果,增强用户的体验

二、JavaScript发展史:

1)1992年,Nombase公司开发出第一门客户端脚本语言,专门用于表单的校验。命名为C- -。后更名为ScriptEase

2)1995年,Netscape(网景)公司,开发出一门客户端脚本语言LiveScript。之后与SUN公司修改LiveScript并更名为JavaScript

3)1996年,微软抄袭JavaScript开发出了JScript

4)1997年,由于市场混乱,ECMA(欧洲计算机制造商协会),发布了ECMAScript,即所有客户端脚本语言的标准

5)所以,JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

三、ECMAScript(客户端脚本语言的标准)

1)基本语法:

1.与HTML的结合方式

①内部JS
②外部JS

范例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS与Html结合方式</title>

    <!--内部JS-->
    <!--script可以定义在html文件的任意地方,但会影响执行的顺序-->
    <!--script标签可以定义多个-->

    <script>
        alert("Hello world");
    </script>

    <!--外部JS-->
    <!--链接外部的JS文件-->
    <script src="js/a.js"></script>

</head>
<body>

</body>
</html>

2.注释

注释:

   //单行注释
    
    /*多行注释*/

3.数据类型

①原始数据类型(基本数据类型)

number:数字。 整数/小数/NaN(Not A Number 一个不是数字的数字类型)

string:字符串。 只有字符串,没有字符,包括’a’ 、“a”

boolean:true和false

null:一个对象为空的占位符

underfined:未定义。如果一个变量没有给初始化值,则会被默认赋值为underfined

②引用数据类型:对象

4.变量:

变量的含义:变量是一小块存储数据的内存空间

Java语言是强类型语言,而JavaScript是弱类型语言。强类型即是指在开辟变量存储空间时,定义了空间将来存储的数据类型。只能存储固定类型的数据;弱类型是指在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据

语法:

var 变量名 = 初始化值;

范例:

<script>
    //定义变量
    var a = 3 ;
    alert(a);

    var a = "abc" ;
    alert(a);

    //定义num类型
    var num = 1;
    var num2 = 1.2;
    var num3 = NaN;

    //输出到页面上
    document.write(num+"---"+typeof(num)+"<br>");
    document.write(num2+"---"+typeof(num2)+"<br>");
    document.write(num3+"---"+typeof(num3)+"<br>");
    document.write()

    //定义String类型
    var str = "abc";
    var str2 = 'def';

    document.write(str+"---"+typeof(str)+"<br>");
    document.write(str2+"---"+typeof(str2)+"<br>");

    //定义boolean类型
    var flag = true;

    document.write(flag+"---"+typeof(flag)+"<br>");

    //定义null、undefined
    var obj = null;
    var obj2 = undefined;

    document.write(obj+"---"+typeof(obj)+"<br>");//bug
    document.write(obj2+"---"+typeof(obj2)+"<br>");

    //利用typeof运算符可以得知变量的类型


</script>

     

5.运算符

一元运算符:只有一个运算数的运算符:++、–、+(正号)

算数运算符:+、-、*、/、%

赋值运算符:=、+=、-=…

比较运算符:>、<、>=、<=、== 、 ===(全等于)类型相同则直接比较、类型不同先进行类型转换,再比较;字符串的比较则按字典顺序比较,按位逐一比较,直到得出大小为止;全等于即在比较之前先判断类型,如果类型不同则直接返回false

逻辑运算符:&&、||、!

三元运算符:表达式?值1 :值2,判断表达式的值,如果是true则取值1,如果是false则取值2

在JS中,如果运算数不是运算符所要求的类型,那么JS引擎会自动的将运算数进行类型转换:

String转number:按照字面值转换,如果字面值不是数字,则转为NaN(不是数字的数字)

boolean转number:true转为1,false转为0

6.其他类型转boolean

number:0或NaN为假,其他为真

string:除了空字符串,其他都是true

null&undefined:都是false
对象:所有对象都为true

7.流程控制语句

if…else

switch:在java中,switch可以接收的数据类型:byte int short char 枚举 ;在js中,switch语句可以接收任意类型的数据

while

do…while

for

练习:用js输出九九乘法表达到以下样本效果

样本:
JavaWeb之 JavaScript基础语法&各类对象&DOM&BOM

范例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <style>
        td{
            border: 1px solid;
        }
    </style>
    <script>
        document.write("<table align='center'>");
        //完成基本for循环
        for (var i = 1; i < 9 ; i++) {
            document.write("<tr>")
            for (var j = 1; j <= i ; j++) {
                document.write("<td>")
                document.write(j+" * "+i+"="+(j*i)+"&nbsp");
                document.write("</td>")
            }
            document.write("</tr>")
        }
        document.write("</table>")
    </script>
</head>
<body>

</body>
</html>

2)基本对象

Function:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Function对象</title>
    <script>
        /*
            Function:函数(方法)对象
                1.创建:
                    1.var fun = new Function(形参列表,方法体); 不推荐

                    2.function 方法名称(形参列表){
                        方法体
                    }

                    3. var 方法名 = function(形参列表){
                        方法体
                    }

                2.方法

                3.属性:
                    length:代表形参的个数

                4.特点:
                    1.方法定义时,形参的类型不用写,返回值类型也不用写
                    2.方法是一个对象,如果定义名称相同的方法,会覆盖
                    3.在JS中,方法的调用只与方法的名称有关,和参数列表无关
                    4.在方法声明中有一个隐藏的内置对象(数组),arguements。封装所有的实际参数

                5.调用:
                    方法名称(实际参数列表);

                */

        //创建方式1
        var fun1 = new Function("a","b","alert(a);");
        //调用方法
        fun1(3,4);

        //创建方式2
        function fun2(a,b){
            alert(a+b);
        }
        fun2(3,4);

        //创建方式3
        var fun3 = function (a,b){
            alert(a+b);
        }
        fun3(3,4);

        //求任意个数的和
        function add(){
            var sum = 0;
            for (var i = 0; i < arguments.length ; i++) {
                sum += arguments[i];
            }
            return sum;
        }
        var sum = add(1,2,3,4);
        alert(sum);
    </script>
</head>
<body>

</body>
</html>

Array:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Array对象</title>
    <script>
        /*
         Array:数组对象
            1.创建
                1.var arr = new Array(元素列表);
                2.var arr = new Array(默认长度);
                3.var arr = [元素列表];
            2.方法
                join(参数):将数组中的元素按照指定的分隔符拼接为字符串
                push(参数):向数组的末尾添加一个或更多元素,并返回新的长度
            3.属性
                length:数组的长度
            4.特点
                1.JS中,数组元素的类型可变的。
                2.JS中,数组长度可变

        */

        //创建方式
        var arr1 = new Array(1,2,3);
        var arr2 = new Array(5);
        var arr3 = [1,2,3,4];

        document.write(arr1+"<br/>");
        document.write(arr2+"<br/>");
        document.write(arr3+"<br/>");

        document.write(arr3.join("||"));

    </script>
</head>
<body>

</body>
</html>

Boolean:基本数据类型的包装类

Date:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date对象</title>
    <script>

        /*
         Date:日期对象
            1.创建:
                var date = new Date();
            2.方法:
                toLocalString():返回当前date对象对应的时间本地字符串格式
                getTime():获取毫秒值。返回当前对象描述的时间到1970年1月1日零点的毫秒值差


        */

        //创建方式
        var date =  new Date();

        document.write(date+"<br>");

        document.write(date.toLocaleString()+"<br>");

        document.write(date.getTime()+"<br>");


    </script>
</head>
<body>

</body>
</html>

Math:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Math对象</title>
    <script>

        /*
           Math: 数学对象
                1.创建:
                    特点:Math对象不用创建,直接使用。 Math.方法名();

                2.方法:
                    random():返回0~1之间的随机数。包含0不包含1
                    ceil():对数进行上舍入(进)
                    floor():对数进行下舍入(退)
                    round():把数四舍五入为最接近的整数

                3.属性:
                    PI
         */

        document.write(Math.PI+"<br/>");
        document.write(Math.random()+"<br/>");
        document.write(Math.ceil(3.14)+"<br/>");
        document.write(Math.floor(3.14)+"<br/>");
        document.write(Math.round(4.5)+"<br/>");
    </script>
</head>
<body>

</body>
</html>

Number:基本数据类型的包装类

String:基本数据类型的包装类

RegExp:正则表达式对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RegExp对象</title>
    <script>
        /*
        正则表达式:定义字符串的组成规则
            1.单个字符[]
                如:[a]、[ab](a或者b)、[a-z]
                特殊符号代表特殊含义的单个字符:
                    \d:单个数字字符[0-9]
                    \w:单个单词字符[a-zA-Z0-9_]

            2.量词符号:
                ?:表示出现0次或1次
                *:表示出现0次或多次
                +:表示出现1次或多次
                {m,n}:表示 m=<数量<=n,m如果缺省,表示最多n次,n如果缺省,表示最少m次

                如:\w{6,12}

            3.开始结束符号
                ^:开始
                $:结束

         */

        /*
        正则表达式对象
            1.创建
                1.var reg = new RegExp("正则表达式");
                2.var reg = /正则表达式/;
            2.方法
                1.test(参数):验证指定的字符串是否符合正则定义的规范
         */

        var reg1 = new RegExp("^\\w{6,12}$");
        var reg2 = /^\w{6,12}$/;//由字母开始,到字母结束

        var username = "zhangsan";
        var flag = reg1.test(username);

        alert(flag);
        alert(reg1);
        alert(reg2);

    </script>
</head>
<body>

</body>
</html>

Global:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Global对象</title>
    <script>
        /*
        Global:全局函数对象
            1.特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。 方法名();
            2.方法:
                encodeURI():url编码
                decodeURI():url解码

                encodeURIComponent():url编码,编码的字符更多
                decodeURIComponent():url解码

                parseInt():将字符串转为数字
                    逐一判断每一个字符是否是数字,直到不是数字为止,把前面的数字部分转为number

                isNaN():判断一个值是否为NaN
                    因为NaN参与的==比较全为false,例如a==NaN即使a=NaN也为false,所以需要用到此方法

                eval():将JavaScript字符串作为脚本代码来执行

            3.url编码
                "哈哈哈哈" = "%E5%93%88%E5%93%88%E5%93%88%E5%93%88";
         */

        var str = "哈哈哈哈";
        var encode = encodeURI(str);
        document.write(encode);

        var str2 = "%E5%93%88%E5%93%88%E5%93%88%E5%93%88";
        var decode = decodeURI(str2);
        document.write(decode);

        var jscode = "alert(123)";
        eval(jscode);
        
    </script>
</head>
<body>

</body>
</html>

四、DOM简单学习

1)DOM的功能:控制html文档的内容

2)获取页面的标签(元素)对象Element:document.getElementById(“id值”);//通过元素的id获取元素对象

3)操作Element对象:

①修改属性值:明确获取的对象,查看文档找其可以修改的属性

②修改标签体内容:利用属性innerHTML

范例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素对象</title>

</head>
<body>
    <img src="img/off.gif" id="light">
    <h1 id="title">
        这是一个标题
    </h1>

    <script>
        //通过id来获取元素对象
        var light= document.getElementById("light");
        alert("换图片");
        light.src = "img/on.gif";

        var title = document.getElementById("title");
        alert("换标题");
        title.innerHTML = "这是修改后的标题";
    </script>

</body>
</html>

五、事件简单学习

1)事件简单概念:某些组件被执行了某些操作后,去触发某些代码的执行

2)绑定事件的方式:

1.直接在html标签上指定事件的属性(操作),属性值就是js代码,如onclick(单机事件)

2.通过js获取元素对象,指定事件属性,设置一个函数

范例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>

</head>
<body>
    <!--方式一-->

    <img src="img/off.gif" onclick="fun();">

    <!--方式二-->

    <img src="img/off.gif" id="light2">

    <script>
        function fun(){
            alert('我被点了');
            alert('我又被点了');
        }

        function fun2(){
            alert('又是我');
        }

        var light2 = document.getElementById("light2");
        light2.onclick = fun2;
    </script>

</body>
</html>

案例分析:简单实现电灯开关

范例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>

    <!--创建图片对象-->
    <img src="img/off.gif" id="light">

    <script>
        // 设置来回切换的方法
        function fun(){
            if (flag) {
                light.src = "img/off.gif";
                flag = false;
            }
            else{
                light.src = "img/on.gif";
                flag = true;
            }
        }

        var light = document.getElementById("light");
        var flag = false;
        
        //可以点F12打开控制台查看错误

        light.onclick = fun;
    </script>


</body>
</html>

六、BOM

1)概念:BOM Browser Object Model 浏览器对象模型,它的作用是将浏览器的各个组成部分封装成对象

2)BOM的组成

Window:窗口对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window对象</title>
</head>
<body>
    <input type="button" id="openBtn" value="打开百度">
    <input type="button" id="closeBtn" value="关闭打开的那个窗口">
    <script>
            /*
                Window:窗口对象
                    1.创建
                    2.方法
                        1.与弹出框有关的方法
                            alert():显示带有一段消息和一个确认按钮的警告框
                            confirm():显示带有一段消息以及确认按钮和取消按钮的对话框
                                *如果用户点击确定按钮,则方法返回true
                                *如果用户点击取消按钮,则方法返回false
                            prompt():显示可提示用户输入的对话框
                                *返回值:获取用户输入的值
                        2.与打开、关闭有关的方法
                            open():打开一个新的浏览器窗口,返回一个窗口对象
                            close():关闭浏览器窗口,且关闭调用者的窗口
                        3.与定时器有关的方法
                            setTimeout():在指定的毫秒数后调用函数或计算表达式
                                *参数
                                    1.js代码或者方法
                                    2.毫秒值
                                *返回值:返回定时对象的唯一标识,用于取消定时器
                            clearTimeout():取消setTimeout()方法设置的timeout
                            setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式
                            clearInterval():取消由setInterval()设置的timeout
                    3.属性
                        1.获取其他BOM对象:
                            history、location、Navigator、Screen
                        2.获取DOM对象:
                            document

                    4.特点
                        Window对象不需要创建可以直接使用window使用。 window.方法名();
                        window可以省略。 方法名(); 如:alert();
             */

            //1.与弹出框有关的方法
            alert("1.与弹出框有关的方法");
            var flag = confirm("确定退出?");
            alert(flag);
            if (flag){
                //退出操作
                alert("Bye");
            }else{
                //其他操作
                alert("执行其他操作");
            }
            var result = prompt("请输入XXX");
            alert(result);

            //2.与打开、关闭有关的方法
            var openBtn = document.getElementById("openBtn");
            var newWindow
            openBtn.onclick = function (){
                //打开百度页面
                newWindow = open("https://www.baidu.com");
            }
            var closeBtn = document.getElementById("closeBtn");
            closeBtn.onclick = function (){
                //关闭新打开的窗口
                newWindow.close();
            }

            //3.与定时器有关的方法
            //一次性的定时器,3秒钟之后执行片段
            var id1 = setTimeout(fun,3000);
            //取消
            clearTimeout(id1);

            function fun(){
                alert('hello');
            }
            //循环定时器
            var id2 = setInterval(fun,3000);
            //取消
            clearInterval(id2);

    </script>
</body>
</html>

案例:实现简单的轮播图效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
    <!--创建轮播图框-->
    <img src="img2/banner_1.jpg" id="banner">

    <script>
        //获取轮播图对象
        var banner = document.getElementById("banner");
        var num = 1;
        //更换图片的方法
        function fun(){
            num++;
            if (num>3){
                num = 1;
            }
            banner.src = "img2/banner_"+num+".jpg";
        }
        //设置循环定时器实现轮播图
        setInterval(fun,1000);
    </script>

</body>
</html>

Navigator:浏览器对象

Screen:显示器屏幕对象

History:历史记录对象

  1. 创建: window.history history
  2. 方法:
    back() 加载history列表中的前一个URL
    forward() 加载history列表中的下一个URL go(参数) 加载history列表中的某个具体页面,参数为正则表示前进几个历史记录,负数表示后退几个历史记录
  3. 属性:length 返回当前窗口历史列表中的URL数量

Location:地址栏对象

  1. 获取(创建)Location对象:window.location location
  2. 方法:reload() //重新加载当前文档。刷新
  3. 属性:href 设置或返回完整的URL

范例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location对象</title>

</head>
<body>
    <input type="button" id="btn" value="刷新">
    <input type="button" id="goBaidu" value="去百度">

    <script>
        //reload方法,定义一个按钮,点击按钮,刷新当前页面
        var btn = document.getElementById("btn");
        btn.onclick = function (){
            location.reload();
        }

        //获取href
        var href = location.href;
        // alert(href);
        //设置href
        var btn2 = document.getElementById("goBaidu");
        btn2.onclick = function (){
            location.href = "https://www.baidu.com";
        }

    </script>

</body>
</html>

案例分析:实现简单的自动跳转页面

范例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转页面</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>


</head>
<body>
    <p>
        <span id="time">5</span>秒之后,自动跳转到首页...
    </p>

    <script>
        /*
               1.显示页面效果<p>
               2.倒计时读秒效果实现
                    *定义一个方法,获取span标签,修改span标签体内容
                    *定义一个定时器,1秒执行一次该方法
               3.如果时间<=0,则跳转
                */
        var second = 5;
        var time;
        function showTime() {
            second--;
            time = document.getElementById("time");
            time.innerHTML = second+"";
            if(second<=0){
                location.href = "https://baidu.com";
            }
        }

        setInterval(showTime,1000);

    </script>

</body>
</html>

七、DOM

1)概念: Document Object Model 文档对象模型,将标记语言文档的各个组成部分封装成对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作。DOM是W3C(万维网联盟)的标准,其定义了访问HTML和XML文档的标准。DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式
JavaWeb之 JavaScript基础语法&各类对象&DOM&BOM

2)W3C DOM标准被分为3个不同的部分:

核心DOM:针对任何结构化文档的标准模型
XML DOM:针对XML文档的标准模型
HTML DOM:针对HTML文档的标准模型

3)核心DOM模型:

<script>
    /*
    Document:文档对象
        1.创建(获取):在html dom模型中可以使用window对象来获取
            window.document
            document
        2.方法:
            1.获取Element对象:
                1.getElementById():根据id属性值获取元素对象。id属性值一般唯一
                2.getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
                3.getElementsClassName():根据Class属性值获取元素对象们。返回值是一个数组
                4.getElementsByName():根据name属性值获取元素对象们。返回值是一个数组
            2.创建其他DOM对象:
                1.createAttribute(name):创建属性
                2.createComment():创建注释
                3.createElement():创建元素
                4.createTextNode():创建文本节点
        3.属性
     Element:元素对象
        1.创建(获取):通过document来获取和创建
        2.方法:
            1.removeAttribute():删除属性
            2.setAttribute():设置属性
     Node:节点对象,其他对象的父对象
        1.特点:所有DOM对象都可以被认为是一个节点
        2.方法:
            CRUD dom树:
                appendChild():向节点的子节点列表的结尾添加新的子节点
                removeChild():删除(并返回)当前节点的指定子节点
                replaceChild():用新节点代替一个子节点
        3.属性
            parenNode:返回节点的父节点
     */
	/*
	超链接功能:
   	 	1.可以被点击:样式
    		2.点击后跳转到href指定的url
	需求:保留1功能,去掉2功能,相当于一个按钮
	实现:href = "javascript:void(0);"
 */

</script>

案例分析:简单实现动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

    <div>
        <input type="text" id="id" placeholder="请输入编号">
        <input type="text" id="name"  placeholder="请输入姓名">
        <input type="text" id="gender"  placeholder="请输入性别">
        <input type="button" value="添加" id="btn_add">

    </div>


    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>1</td>
            <td>A</td>
            <td></td>
            <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>B</td>
            <td></td>
            <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>C</td>
            <td>?</td>
            <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
        </tr>


    </table>

    <script>
        /*
            1.添加:
                1.给添加按钮绑定单击事件
                2.获取文本框的内容
                3.创建td,设置td的文本为文本框的内容
                4.创建tr
                5.将td添加到tr中
                6.获取table,将tr添加到table中
         */

        //1.获取btn
        var btn_add = document.getElementById("btn_add");
        //2.绑定单击事件
        btn_add.onclick = function(){
            //获取每一个输入框内容
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var gender = document.getElementById("gender").value;

            //获取表格
            var table = document.getElementsByTagName("table")[0];

            //创建tr
            var tr = document.createElement("tr");
            //创建td
            var td_id = document.createElement("td");
            var text_id = document.createTextNode(id);
            td_id.appendChild(text_id);
            tr.appendChild(td_id);

            var td_name = document.createElement("td");
            var text_name = document.createTextNode(name);
            td_name.appendChild(text_name);
            tr.appendChild(td_name);

            var td_gender = document.createElement("td");
            var text_gender = document.createTextNode(gender);
            td_gender.appendChild(text_gender);
            tr.appendChild(td_gender);

            var td_option = document.createElement("td");

            var a = document.createElement("a");
            a.setAttribute("href","javascript:void(0);");
            a.setAttribute("onclick","delTr(this)");
            var text_a = document.createTextNode("删除");
            a.appendChild(text_a);
            td_option.appendChild(a);
            tr.appendChild(td_option);

            table.appendChild(tr);

        }

        function delTr(obj){
            var table = obj.parentNode.parentNode.parentNode;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }

    </script>

</body>
</html>

Tips:可使用innerHTML追加元素

4)HTML DOM:

1.标签体的设置和获取:inner HTML
2.使用html元素对象的属性
3.控制元素样式

八、事件

1) 概念:某些组件被执行了某些操作后,触发某些代码的执行。

  • 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了

  • 事件源:组件。如: 按钮 文本输入框…

  • 监听器:代码。

  • 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。

2)常见的事件:

  1. 点击事件:

    	1. onclick:单击事件
    	2. ondblclick:双击事件
    
  2. 焦点事件

    	1. onblur:失去焦点,一般用于表单验证
    	2. onfocus:元素获得焦点。
    
  3. 加载事件:

    	1. onload:一张页面或一幅图像完成加载。
    
  4. 鼠标事件:

    	1. onmousedown	鼠标按钮被按下。定义方法时,定义一个形参,接受event对象。event对象的button属性可以获取鼠标那个键被点击了。
    	2. onmouseup	鼠标按键被松开。
    	3. onmousemove	鼠标被移动。
    	4. onmouseover	鼠标移到某元素之上。
    	5. onmouseout	鼠标从某元素移开。
    
  5. 键盘事件:

    	1. onkeydown	某个键盘按键被按下。	
    	2. onkeyup	某个键盘按键被松开。
    	3. onkeypress	某个键盘按键被按下并松开。
    
  6. 选择和改变

    	1. onchange	域的内容被改变。
    	2. onselect	文本被选中。
    
  7. 表单事件:

    	1. onsubmit	确认按钮被点击。可以阻止表单的提交,方法返回false则表单被阻止提交
    	2. onreset		重置按钮被点击。