JavaScript

该文档是:js简单学习

博客连接:https://www.loveuluo.cn

日期:2020-12-01

1. JavaScript简介

Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行 JavaScript 代码。
JS 是 Netscape 网景公司的产品,最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript。

**JS 是弱类型,Java 是强类型:**

​ int i = 10; (Java)

​ var i; i= 10;数值型 i="abc" 字符串类型 (JS)

特点:

  1. 交互性(它可以做的就是信息的动态交互)
  2. 安全性(不允许直接访问本地硬盘)
  3. 跨平台性(只要是可以解释 JS 的浏览器都可以执行,和平台无关)

2. JavaScript 和 和 html 代码的结合方式

script 标签可以用来定义 js 代码,也可以用来引入 js 文件
但是,两个功能二选一使用。不能同时使用两个功能

2.1 第一种方式

只需要在 head 标签中,或者在 body 标签中, 使用 script 标签 来书写 JavaScript 代码。

image-20201201143824513

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">
    alert("我丢");
</script>
<body>
</body>

2.2 第二种方式

使用 script 标签引入 单独的 JavaScript 代码文件。

image-20201201144127498

1.js文件内容

image-20201201144224249

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    现在需要使用 script 引入外部的 js 文件来执行
    src 属性专门用来引入 js 文件路径(可以是相对路径,也可以是绝对路径)

    script 标签可以用来定义 js 代码,也可以用来引入 js 文件
    但是,两个功能二选一使用。不能同时使用两个功能
    -->
    <script src="1.js"></script>
</head>
<body>

</body>
</html>

3. 变量

什么是变量?变量是可以存放某些值的内存的命名。
JavaScript 的变量类型:

数值类型: number
字符串类型: string
对象类型: object
布尔类型: boolean
函数类型: function

JavaScript 里特殊的值:

undefined 未定义,所有 js 变量未赋于初始值的时候,默认值都是 undefined.
null 空值
NaN 全称是:Not a Number。非数字。非数值。

JS 中的定义变量格式:
var 变量名;
var 变量名 = 值;

代码示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var i ;
        alert(i) //输出undefined
        var i = 10;
        //typeof是可以输出类型而不是数据
        alert(typeof(i)); //输出number
        var i = "abc"
        alert(typeof(i)) //输出string
        var a = 12;
        var b = "abc";
        alert(a*b); //输出 NaN(是非数字,非数值)
    </script>
</head>
<body>
</body>

3.1 变量的关系运算

等于: == 等于是简单的做字面值的比较
全等于: === 除了做字面值的比较之外,还会比较两个变量的数据类型

剩下的和java中差不多。

代码:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a = "12";
        var b = 12;
        alert( a == b ); // true
        alert( a === b ); // false
    </script>
</head>
<body>
</body>
</html>

3.2 变量的逻辑运算

且运算: &&
或运算: ||
取反运算: !

在 JavaScript 语言中,所有的变量,都可以做为一个 boolean 类型的变量去使用。
0 、null、 undefined、””(空串) 都认为是 false;

代码:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /* 在 JavaScript 语言中,所有的变量,都可以做为一个 boolean 类型的变量去使用。
        0 、 null 、 undefined 、 ””( 空串 ) 都认为是 false ; */
        var a = 0;
        if (a) {
        alert(" 零为真 ");
        } else {
        alert(" 零为假 "); //走这条
        }
        var b = null;
        if (b) {
        alert("null 为真 ");
        } else {
        alert("null 为假 "); //走这条
        }
        var c = undefined;
        if (c) {
        alert("undefined 为真 ");
        } else {
        alert("undefined 为假 "); //走这条
        }
        var d = "";
        if (d) {
        alert(" 空串为真 ");
        } else {
        alert(" 空串为假 "); //走这条
        }
        /* && 且运算。
        有两种情况:
        第一种:当表达式全为真的时候。返回最后一个表达式的值。
        第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值 */
        var a = "abc";
        var b = true;
        var d = false;
        var c = null;
        alert( a && b ); //true
        alert( b && a ); //abc
        alert( a && d ); // false
        alert( a && c ); // null

        /* || 或运算
        第一种情况:当表达式全为假时,返回最后一个表达式的值
        第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值 */
        alert( d || c ); // null
        alert( c|| d ); //false
        alert( a || c ); //abc
        alert( b || c ); //true
    </script>
</head>
<body>
</body>

4. 数组(重要)

格式:
var 数组名 = []; // 空数组
var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素

代码:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var i=[];//定义一个空数组
        alert(i.length); //数组长度为0

        i[0] = "abc";
        alert(i.length); //数组长度为1

        // javaScript 语言中的数组,只要我们通过数组下标赋值,那么最大的下标值,就会自动的给数组做扩容操作。
        i[2] = "我";
        alert(i.length); //数组长度为3

        alert(i[1]); //因为上边直接把长度扩容为3,而下标1没有给值,所以是undefined

        //可以定义有值的数组,但是也会自动给数组做扩容。
        var a = [true,"abc"];
        a[3] = 10;
        alert(a.length); //数组长度为4

        //遍历数组
        for (var j = 0; j < a.length; j++) {
            alert(a[j]); //true abc undefined 10
        }
    </script>
</head>
<body>
</body>

5. 函数(重要)

5.1 第一种方式

可以使用 function关键字来定义函数。

使用的格式如下:
function 函数名(形参列表){
函数体
}

在 JavaScript 语言中,如何定义带有返回值的函数?
只需要在函数体内直接使用 return 语句返回值即可!

代码:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 定义一个无参函数
        function fun(){
            alert(" 无参函数 fun() 被调用了");
        }
        // 函数调用 === 才会执行
        fun();
        
        //定义一个有参函数
        function fun2(a ,b) {
            alert(" 有参函数 fun2()了 被调用了 a=>" + a + ",b=>"+b);
        }
        // 函数调用 === 才会执行
        fun2(12,"abc");
        
        // 定义带有返回值的函数
        function sum(num1,num2) {
            var result = num1 + num2;
            return result;
        }
        alert( sum(100,50) ); //直接打印返回值
    </script>
</head>
<body>
</body>

5.2 第二种方式

使用格式如下:
var 函数名 = function(形参列表) { 函数体 }

代码:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">
    var fun = function () {
        alert(" 无参函数");
    };
    fun();
    var fun2 = function (a,b) {
        alert(" 有参函数 a=" + a + ",b=" + b);
    };
    fun2(1,2);
    var fun3 = function (num1,num2) {
        return num1 + num2;
    };
    alert( fun3(100,200) );
</script>
<body>
</body>

5.3 JS不允许函数重载

注:在 Java 中函数允许重载。但是在 JS 中函数的重载会直接覆盖掉上一次的定义。

image-20201201180919439

5.4 函数的 arguments 隐形参数 (只在 function 函数内)

就是在 function 函数中不需要定义,但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。
隐形参数特别像 java 基础的可变长参数一样。
public void fun( Object ... args );
可变长参数其他是一个数组。

那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。

代码:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    function f(sum1,sum2) { //arguments就是隐藏参数也是所有的参数的数组
        var sum = 0;
        for (var i = 0; i < arguments.length; i++) {
            if ( typeof(arguments[i]) == "number" ) { //只有类型是数字的时候才相加
            sum += arguments[i];
            }
        }
        return sum;
    }
    alert(f(1,2,3,4,5,"abc",6,7,8,9,10)); //结果是55

    </script>
</head>
<body>
</body>

6. JS中的自定义对象

6.1 Object 形式的自定义对象

对象的定义:

var 变量名 = new Object(); // 对象实例(空对象)
变量名.属性名 = 值; // 定义一个属性
变量名.函数名 = function(){} // 定义一个函数

对象的访问:

变量名.属性 / 函数名();

image-20201201184655270

代码:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 对象的定义:
        // var 变量名 = new Object(); // 对象实例(空对象)
        // 变量名 . 属性名 = 值 ; // 定义一个属性
        // 变量名 . 函数名 = function(){} // 定义一个函数
        var obj = new Object();
        obj.name = " 华仔";
        obj.age = 18;
        obj.fun = function () {
            alert(" 姓名:" + this.name + " ,  年龄:" + this.age);
        };
        // 对象的访问:
        // 变量名 . 属性 / 函数名 ();
        // alert( obj.age );
        obj.fun(); 
    </script>
</head>
<body>
</body>

6.2 花括号形式的自定义对象

对象的定义:
var 变量名 = { // 空对象
属性名:值, // 定义一个属性
属性名:值, // 定义一个属性
函数名:function(){} // 定义一个函数
};
对象的访问:
变量名.属性 / 函数名();

<head>
    <script type="text/javascript">
        // 对象的定义:
        // var 变量名 = { // 空对象
        // 属性名:值 , // 定义一个属性
        // 属性名:值 , // 定义一个属性
        // 函数名: function(){} // 定义一个函数
        // };
        var obj = {
            name:" 国哥",
            age:18,
            fun : function () {
                alert(" 姓名:" + this.name + " ,  年龄:" + this.age);
            }
        };
        // 对象的访问:
        // 变量名 . 属性 / 函数名 ();
        alert(obj.name);
        obj.fun();
    </script>
</head>
<body>
</body>

7. 事件

7.1 事件介绍

什么是事件?事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
常用的事件:
onload 加载完成事件: 页面加载完成之后,常用于做页面 js 代码初始化操作
onclick 单击事件: 常用于按钮的点击响应操作。
onblur 失去焦点事件: 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件: 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件: 常用于表单提交前,验证所有表单项是否合法。

7.2 事件的注册(绑定)

事件的注册又分为静态注册和动态注册两种:

什么是事件的注册(绑定)?
其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。

**静态注册事件 :**通过 html 标签的事件属性直接赋于事件响应后的代码,这种方式我们叫静态注册。
**动态注册事件 :**是指先通过 js 代码得到标签的 dom 对象,然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件

响应后的代码,叫动态注册。

动态注册基本步骤:

1、获取标签对象
2、标签对象.事件名 = fucntion(){}

7.3 onload加载完成事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            // onload 事件的方法
            function onloadFun() {
                alert(' 静态注册 onload  事件,所有代码');
            }
            // onload 事件动态注册。是固定写法
            window.onload = function () {
                alert(" 动态注册的 onload  事件");
            }
        </script>
    </head>
    <!-- 静态注册 onload 事件
    onload 事件是浏览器解析完页面之后就会自动触发的事件
    <body onload="onloadFun();">
    -->
<body>
</body>

7.4 onclick单击事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            alert(" 静态注册 onclick  事件");
        }
        // 动态注册 onclick 事件
        window.onload = function () {
            // 1 获取标签对象
            /*
            * document 是 JavaScript 语言提供的一个对象(文档) <br/>
            * get 获取
            * Element 元素(就是标签)
            * By 通过。。 由。。经。。。
            * Id id 属性
            *
            * getElementById 通过 id 属性获取标签对象
            **/
            var btnObj = document.getElementById("btn01");
            // alert( btnObj ); 这是一个标签对象
            // 2 通过标签对象 . 事件名 = function(){}
            btnObj.onclick = function () {
                alert(" 动态注册的 onclick  事件");
            }
        }
    </script>
</head>
<body>
<!-- 静态注册 onClick 事件 -->
<button onclick="onclickFun();">按钮 1</button>
<button id="btn01">按钮 2</button>
</body>

7.5 onblur失去焦点事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 静态注册失去焦点事件
        function onblurFun() {
            // console 是控制台对象,是由 JavaScript 语言提供,专门用来向浏览器的控制器打印输出, 用于测试使用
            // log() 是打印的方法
            console.log(" 静态注册失去焦点事件");
        }
        // 动态注册 onblur 事件
        window.onload = function () {
            //1 获取标签对象
            var passwordObj = document.getElementById("password");
            // alert(passwordObj);
            //2 通过标签对象 . 事件名 = function(){};
            passwordObj.onblur = function () {
                console.log(" 动态注册失去焦点事件");
            }
        }
    </script>
</head>
<body>
    用户名:<input type="text" onblur="onblurFun();"><br/>
    密码:<input id="password" type="text" ><br/>
</body>

7.6 onchange内容发生改变事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun() {
            alert(" 女神已经改变了");
        }
        window.onload = function () {
            //1 获取标签对象
            var selObj = document.getElementById("sel01");
            // alert( selObj );
            //2 通过标签对象 . 事件名 = function(){}
            selObj.onchange = function () {
                alert(" 男神已经改变了");
            }
        }
    </script>
</head>
<body>
请选择你心中的女神:
<!-- 静态注册 onchange 事件 -->
<select onchange="onchangeFun();">
    <option>--女神--</option>
    <option>芳芳</option>
    <option>佳佳</option>
    <option>娘娘</option>
</select>
请选择你心中的男神:
<select id="sel01">
    <option>--男神--</option>
    <option>国哥</option>
    <option>华仔</option>
    <option>富城</option>
</select>
</body>

7.7 onsubmit表单提交事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
        // 静态注册表单提交事务
        function onsubmitFun(){
            // 要验证所有表单项是否合法,如果,有一个不合法就阻止表单提交
            alert(" 静态注册表单提交事件---- 发现不合法");
            return flase;
        }
        // 动态注册表单提交事务
        window.onload = function () {
            //1 获取标签对象
            var formObj = document.getElementById("form01");
            //2 通过标签对象 . 事件名 = function(){}
            formObj.onsubmit = function () {
                // 要验证所有表单项是否合法,如果,有一个不合法就阻止表单提交
                alert(" 动态注册表单提交事件---- 发现不合法");
                return false;
            }
        }
    </script>
</head>
<body>
<!--return false 可以阻止 表单提交 -->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
    <input type="submit" value=" 静态注册"/>
</form>
<form action="http://localhost:8080" id="form01">
    <input type="submit" value=" 动态注册"/>
</form>
</body>

扩展:正则表达式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //表示要求字符串中,是否包含字母e
        var patt = new RegExp("e"); //是正则表达式对象(不推荐使用)
        var patt = /e/; // 这也是正则表达式对象(写法不同,这个比较方便)
        //表示要求字符串中,是否包含字母a或b或c
        var patt = /[abc]/;
        //表示要求字符串,是否包含小写字母
        var patt = /[a-z]/;
        //表示要求字符串,是否包含任意大写字母
        var patt = /[A-Z]/;
        //表示要求字符串,是否包含任意数字
        var patt = /[0-9]/;
        //表示要求字符串,是否包含字母,数字,下划线
        var patt = /\w/;
        //表示要求 字符串中是否包含至少一个a
        var patt = /a+/;
        //表示要求 字符串中是否 *包含* 零个 或 多个a
        var patt = /a*/;
        //表示要求 字符串是否包含一个或零个a
        var patt = /a?/;
        //表示要求 字符串是否包含连续三个a
        var patt = /a{3}/;
        //表示要求 字符串是否包 至少3个连续的a,最多5个连续的a
        var patt = /a{3,5}/;
        //表示要求 字符串是否包 至少3个连续的a,
        var patt = /a{3,}/;
        //表示要求 字符串必须以a结尾
        var patt = /a$/;
        //表示要求 字符串必须以a打头
        var patt = /^a/;

        //要求字符串中是否*包含* 至少3个连续的a
        var patt = /a{3,5}/;
        //要求字符串,从头到尾都必须完全匹配(必须包含3~5个a)
        var patt2 = /^a{3,5}$/;
        alert(patt2.test("aaaaa")); //true
        alert(patt2.test("aaa")); //true
        alert(patt2.test("aaaaaa")); //false

        //要求字符串,是否包含字母,数字,下划线 并且只能有5~12个
        var patt = /^\w{5,12}$/;

        var str = "wzg168[[["; //false

        alert( patt.test(str) );
    </script>
</head>
<body>
</body>

8. DOM模型(重要)

8.1 DOM介绍

DOM 全称是 Document Object Model 文档对象模型

例如一个html页面就叫做html文档。

大白话,就是把文档(页面)中的标签,属性,文本,转换成为对象来管理。
那么 它们是如何实现把标签,属性,文本转换成为对象来管理呢。这就是我们马上要学习的重点。

8.2 Document对象

image-20201201205513285

什么是对象化??
举例:
有一个人有年龄:18 岁,性别:女,名字:张某某
我们要把这个人的信息对象化怎么办!
Class Person {
private int age;
private String sex;
private String name;
}

image-20201201205546511

8.3 Document对象中的方法介绍

image-20201201210718975

8.3.1 getElementById方法示例代码:(校验用户名)

document.getElementsById();只能获取单个对象,因为每个标签的id不能重复!

image-20201201220909440

image-20201201221047331

代码:使用了动态注册(绑定)事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        * 需求:当用户点击了较验按钮,要获取输出框中的内容。然后验证其是否合法。 <br/>
        * 验证的规则是:必须由字母,数字。下划线组成。并且长度是 5 到 12 位。
        * */
    window.onload = function () { //页面加载完成后要执行的方法
        //当我们要操作一个标签的时候,一定要获取这个标签对象
        var jyObj = document.getElementById("jY"); //绑定页面上id为jY的对象(它就是个DOM对象)
        jyObj.onclick = function () { //单击后要完成的方法
            var usernameOjb = document.getElementById("username"); //根据id得到文本输入框对象
            var uservalue = usernameOjb.value; //value就是input文本输入框其中的值
            var patt = /^\w{5,12}$/; //正则表达式对象 用于验证文本的格式
            var usernameSpanObj = document.getElementById("usernameSpan"); //获取span标签对象
            /*innerHTML表示起始标签和结束标签中的内容 例如:<span id="usernameSpan" style="color: red;"> 123 </span>
            那么123 就是innerHTML的内容 ,这个属性可读,可写。*/
            usernameSpanObj.innerHTML;
             if (patt.test(uservalue))  { //正则表达式的test方法,如果格式通过就为true,不是则相反
                usernameSpanObj.style = "color: green;" //将span标签的style属性的颜色改为绿色
                usernameSpanObj.innerText="用户名合法。"
             } else {
                usernameSpanObj.innerText="用户名不合法。"
             }
        }
    }
    </script>
</head>
<body>
    用户名:<input type="text" id="username" value="请输入用户名">
    <span id="usernameSpan" style="color: red;"></span>
    <button id="jY">验证</button>
</body>

8.3.2 getElementsByName方法示例代码:(全选,全不选,反选)

document.getElementsByName(); 是根据 指定的 name 属性查询返回多个标签对象集合,name可以重复,可以返回多个。

image-20201201222249490

代码:使用了静态注册(绑定)事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 全选
        function checkAll() {
            // 让所有复选框都选中
            // document.getElementsByName(); 是根据 指定的 name 属性查询返回多个标签对象集合
            // 这个集合的操作跟数组 一样
            // 集合中每个元素都是 dom 对象
            // 这个集合中的元素顺序是他们在 html 页面中从上到下的顺序
            var hobbies = document.getElementsByName("hobby");
            // checked 表示复选框的选中状态。如果选中是 true ,不选中是 false
            // checked 这个属性可读,可写
            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = true;
            }
        }
        // 全不选
        function checkNo() {
            var hobbies = document.getElementsByName("hobby");
            // checked 表示复选框的选中状态。如果选中是 true ,不选中是 false
            // checked 这个属性可读,可写
            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = false;
            }
        }
        // 反选
        function checkReverse() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = !hobbies[i].checked;
            // if (hobbies[i].checked) {
            // hobbies[i].checked = false;
            // }else {
            // hobbies[i].checked = true;
            // }
            }
        }
    </script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp" checked="checked">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>

8.3.3 getElementsByTagName方法示例代码:

按照指定标签名来进行查询并返回集合。

代码:使用了静态注册(绑定)事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 全选
        function checkAll() {
            // document.getElementsByTagName("input");
            // 是按照指定标签名来进行查询并返回集合
            // 这个集合的操作跟数组 一样
            // 集合中都是 dom 对象
            // 集合中元素顺序 是他们在 html 页面中从上到下的顺序。
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++){
                inputs[i].checked = true;
            }
        }
    </script>
</head>
<body>
兴趣爱好:
<input type="checkbox" value="cpp" checked="checked">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
</body>

8.3.4 createElement方法示例代码:

image-20201202100250028

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            // 现在需要我们使用 js 代码来创建 html 标签,并显示在页面上
            // 标签的内容就是: <div> 国哥,我爱你 </div>
            var divObj = document.createElement("div"); // 在内存中 <div></div>
            
            //这一种方法是添加文本节点
            var textNodeObj = document.createTextNode(" 国哥,我爱你"); // 有一个文本节点对象 # 国哥,我爱你
            divObj.appendChild(textNodeObj); // <div> 国哥,我爱你 </div>
            //这一种是直接innerHTML 修改文本内容
            divObj.innerHTML = " 国哥,我爱你 "; // <div> 国哥,我爱你 </div>, 但,还只是在内存中

            // 添加子元素(添加到body里)
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>
</body>

8.4 节点的常用属性和方法(节点就是标签对象)

image-20201202092725919

image-20201202092731535

8.5 DOM查询练习

image-20201202093939908

<head>
    <meta charset="UTF-8">
    <title>dom 查询</title>
    <link rel="stylesheet" type="text/css" href="style/css.css" />
    <script type="text/javascript">
        window.onload = function(){
            //1. 查找 #bj 节点
            document.getElementById("btn01").onclick = function () {
                var bjObj = document.getElementById("bj");
                alert(bjObj.innerHTML);
            }
            //2. 查找所有 li 节点
            var btn02Ele = document.getElementById("btn02");
            btn02Ele.onclick = function(){
                var lis = document.getElementsByTagName("li");
                alert(lis.length)
            };
            //3. 查找 name=gender 的所有节点
            var btn03Ele = document.getElementById("btn03");
            btn03Ele.onclick = function(){
                var genders = document.getElementsByName("gender");
                alert(genders.length)
            };
            //4. 查找 #city 下所有 li 节点
            var btn04Ele = document.getElementById("btn04");
            btn04Ele.onclick = function(){
            //4.1 获取 id 为 city 的节点
            //4.2 通过 city 节点 .getElementsByTagName 按标签名查子节点
                var lis = document.getElementById("city").getElementsByTagName("li");
                alert(lis.length)
            };
            //5. 返回 #city 的所有子节点
            var btn05Ele = document.getElementById("btn05");
            btn05Ele.onclick = function(){
            //1 获取 id 为 city 的节点
            //2 通过 city 获取所有子节点
                alert(document.getElementById("city").childNodes.length);
            };
            //6. 返回 #phone 的第一个子节点
            var btn06Ele = document.getElementById("btn06");
            btn06Ele.onclick = function(){
            // 查询 id 为 phone 的节点
                alert( document.getElementById("phone").firstChild.innerHTML );
            };
            //7. 返回 #bj 的父节点
            var btn07Ele = document.getElementById("btn07");
            btn07Ele.onclick = function(){
            //7.1 查询 id 为 bj 的节点
                var bjObj = document.getElementById("bj");
            //7.2 bj 节点获取父节点
                alert( bjObj.parentNode.innerHTML );
            };
            //8. 返回 #android 的前一个兄弟节点
            var btn08Ele = document.getElementById("btn08");
            btn08Ele.onclick = function(){
            // 获取 id 为 android 的节点
            // 通过 android 节点获取前面兄弟节点
                alert( document.getElementById("android").previousSibling.innerHTML );
            };
            //9. 读取 #username 的 value 属性值
            var btn09Ele = document.getElementById("btn09");
            btn09Ele.onclick = function(){
                alert(document.getElementById("username").value);
            };
            //10. 设置 #username 的 value 属性值
            var btn10Ele = document.getElementById("btn10");
            btn10Ele.onclick = function(){
                document.getElementById("username").value = " 国哥你真牛逼";
            };
            //11. 返回 #bj 的文本值
            var btn11Ele = document.getElementById("btn11");
            btn11Ele.onclick = function(){
                alert(document.getElementById("city").innerHTML); //区别是这个会返回所有内容包括里边的标签
                alert(document.getElementById("city").innerText); //这个只会返回文本
            };
        };
    </script>
</head>
<body>
<div id="total">
    <div class="inner">
        <p>
            你喜欢哪个城市?
        </p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>
        <br>
        <br>
        <p>
            你喜欢哪款单机游戏?
        </p>
        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>
        <br />
        <br />
        <p>
            你手机的操作系统是?
        </p>
        <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
    </div>
    <div class="inner">
        gender:
        <input type="radio" name="gender" value="male"/>
        Male
        <input type="radio" name="gender" value="female"/>
        Female
        <br>
        <br>
        name:
        <input type="text" name="name" id="username" value="abcde"/>
    </div>
</div>
<div id="btnList">
    <div><button id="btn01">查找#bj 节点</button></div>
    <div><button id="btn02">查找所有 li 节点</button></div>
    <div><button id="btn03">查找 name=gender 的所有节点</button></div>
    <div><button id="btn04">查找#city 下所有 li 节点</button></div>
    <div><button id="btn05">返回#city 的所有子节点</button></div>
    <div><button id="btn06">返回#phone 的第一个子节点</button></div>
    <div><button id="btn07">返回#bj 的父节点</button></div>
    <div><button id="btn08">返回#android 的前一个兄弟节点</button></div>
    <div><button id="btn09">返回#username 的 value 属性值</button></div>
    <div><button id="btn10">设置#username 的 value 属性值</button></div>
    <div><button id="btn11">返回#bj 的文本值</button></div>
</div>
</body>
最后修改:2020 年 12 月 04 日 09 : 51 AM
如果觉得我的文章对你有用,请随意赞赏