JavaScript-程序员宅基地

文章目录

基本介绍

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

JS是弱类型，Java是强类型
弱类型就是类型可变的
强类型就是定义变量的时候，类型已确认，而且类型不可变

int i = 12; //强类型

var i;			//弱类型
i = 12;			//数值型
i = "abc"		//字符串类型

JS的特点

交互性（它可以做的就是信息的动态交互）【就好比鼠标移上去，信息显示，鼠标不移上去，信息不显示】

安全性（它不允许直接访问本地硬盘）

跨平台性（只要是可以JS的浏览器都可以执行，和平台无关）

JavaScript和html代码的结合方式

第一种方式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // alert 是JavaScript语言提供的一个警告框函数
        // 它可以接受任意类型的参数，这个参数就是警告框的提示信息
        alert("hello, JavaScript");
    </script>
</head>
<body>

</body>
</html>

alert是JS语言提供的一个警告框的函数

第二种方式

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

alert("hello, 1125JavaScript");

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

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        script标签可以用来定义js代码，也可以用来引入js文件
        但是，两个功能二选一使用，不能同时使用两个功能
    -->
    <script type="text/javascript" src="1.js"></script>
    <script type="text/javascript">
        alert("帅一次");
    </script>
</head>
<body>

</body>
</html>

不然出现的情况就是两个按照先后顺序出现

变量

基本介绍

变量是可以存放某些值的内存的命名

JavaScript的变量类型

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

JavaScript里特殊的值：

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

JS中的定义变量格式：
:::tips
var 变量名；
var 变量名 = 值；
:::

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var i;
        alert(i);// undefined
        i = 12;
        // typeof() 是JavaScript语言提供的一个函数
        // 它可以取变量的数据类型返回
        alert(i);// 12
        alert(typeof(i));//number
        i = "abc";
        alert(typeof(i));//string

        var a = 12;
        var b = "abc";

        alert( a * b ); // NaN是非数字，非数值

    </script>
</head>
<body>

</body>
</html>

未赋值的i，即var i

i = 12 的类型 number

i = “abc” 的类型 string

当两个不同类型的做运算产生的不是数字类型，即NaN

关系(比较)运算符

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

<!DOCTYPE html>
<html lang="en">
<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>

逻辑运算符

在JS中，所有的变量，都可以作为一个boolean类型的变量去使用

:::tips
即：0、null、undefined、“”(空串)都认为是false
:::

<!DOCTYPE html>
<html lang="en">
<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("空串为假");
      }


    </script>
</head>
<body>

</body>
</html>

0为假

null为假

undefined为假

字符串空串为假

且运算：&&

:::tips
&&且运算，有两种情况

当表达式全为真的时候，返回最后一个表达式的值
当表达式中，有一个为假的时候，返回第一个为假的表达式的值
:::

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
/*      && 且运算。有两种情况：
            第一种：当表达式全为真的时候。返回最后一个表达式的值。
            第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值*/
      var a = "abc"; //true
      var b = true;
      var d = false;
      var c = null; //false

      // alert(a && b); //true
      // alert(b && a); //abc
      //
      // alert( a && d ); //false
      // alert( a && c ); //null

      // alert( a && d && c ); // false
    </script>
</head>
<body>

</body>
</html>

或运算：||

:::tips
||或运算

当表达式全为假时，返回最后一个表达式的值
只要有一个表达式为真，就会返回第一个为真的表达式的值
:::

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      || 或运算
        第一种情况：当表达式全为假时，返回最后一个表达式的值
        第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值*/
      // alert( d || c );// null;
      // alert( c || d );// false

      alert( a || c );// abc
      alert( b || c );// true
    </script>
</head>
<body>

</body>
</html>

取反运算：！

ture转为false，false转为true

注意

:::tips
&&与运算和||或运算会有短路，即当这个运算有结果了之后，后面的表达式不会再执行
:::

数组

数组定义方式
:::tips
JS中数组的定义格式：
var 数组名 = []；//空数组
var 数组名 = [1, “abc”, true]；//定义数组同时赋值元素
:::

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      var arr = []; //定义一个空数组
      // var arr2 = [true, 1];
      // alert(arr.length); // 0

      arr[0] = 12;
      // alert(arr[0]);
      // alert(arr.length); // 1

      //JavaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作
      arr[2] = "abc";
      // alert(arr[2]);
      // alert(arr.length);// 3
      // alert(arr[1]);// undefined

      //赋值的时候，读的操作不会导致数组扩容，数组还是原来的长度
      alert(arr[9]);
      alert(arr.length);

      //这里要用var，而不是int
      //遍历数组
      for (var i = 0; i < arr.length; i++) {
      
          alert(arr[i]);
      }

    </script>
</head>
<body>

</body>
</html>

JS的数组，只要我们通过数组下标进行赋值，就会对数组进行扩容
但是如果进行读的时候，不会对数组进行扩容，数组还是原来大小

没有进行赋值的元素值，那么就是undefined

函数

函数的两种定义方式

第一种：可以使用function关键字来定义函数

:::tips
格式：
function 函数名(形参列表) {
函数体
}
:::

<!DOCTYPE html>
<html lang="en">
<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");
      
    </script>
</head>
<body>

</body>
</html>

:::tips

在JS语言中，如何定义带有返回值的函数？
只需要在函数体内直接使用 return 语句返回值即可
:::

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      //定义带有返回值的函数
      function sum(num1, num2) {
      
        var result = num1 + num2;
        return result;
      }

      alert(sum(100, 150));

    </script>
</head>
<body>

</body>
</html>

第二种

:::tips
格式：
var 函数名 = function(形参列表) {
函数体
}
:::

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
</head>
<body>

</body>
</html>

无参函数

有参函数

return返回

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function fun(a, b) {
      
            alert("有参函数fun(a, b)");
        }

        function fun() {
      
            alert("无参构造fun()");
        }

        fun(1, "ad");

    </script>
</head>
<body>

</body>
</html>

当调用无参函数的时候，里面传入参数会被存储在arguments隐形参数里

函数的 arguments 隐形函数（只在function函数内）

:::tips
即在function函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数
隐形参数特别像JavaSE的可变长参数一样：
public void fun(Object … args);
可变长参数其实是一个数组
因此：JS中的隐藏参数也跟Java中的可变长参数一样，操作类似于数组
:::

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function fun() {
      
          // alert(arguments.length); //查看传入的参数个数

            // alert(arguments[0]);
            // alert(arguments[1]);
            // alert(arguments[2]);

            for (var i = 0; i < arguments.length; i++) {
      
                alert(arguments[i]);
            }

            alert("无参构造fun()");

        }

        // fun(1, "ad", true);

        //需求：要求编写一个函数，用于计算所有参数相加的和，并返回
        function sum(num1, num2) {
      
            var result = 0;
            for (var i = 0; i < arguments.length; i++) {
      
                if (typeof(arguments[i]) == "number") {
      
                    result += arguments[i];
                }
            }
            return result;
        }
        // alert(sum(1, 2, 3, 4, 5, 6, 7, 8, 9));
        alert(sum(1, 2, 3, 4, "abc", 6, 7, 8, 9));//会做字符串拼接动作 10abc6789

    </script>
</head>
<body>

</body>
</html>

arguments.length 查看传入的参数个数

需求解决

但当传入一个字符串的时候，会做字符串拼接动作

为了将这些不是数字的筛选掉，就得加上判断

JS中的自定义对象

Object 形式的自定义对象

:::tips
对象的定义：
var 变量名 = new Object(); //对象实例（空对象）
变量名.属性名 = 值; //定义一个属性
变量名.函数名 = function() {} //定义一个函数
对象的访问：
变量名.属性 / 函数名();
:::

<!DOCTYPE html>
<html lang="en">
<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.name);
      alert(obj.age);
      alert(obj.fun());

      // alert(typeof(obj));

      /*
        对象的访问：
          变量名.属性 / 函数名();
      */

    </script>
</head>
<body>

</body>
</html>

{}大括号形式的自定义对象

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

注意：在对象的定义的时候，定义属性后如果还需要定义属性，则用逗号分隔，但是最后一个不需要了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
            对象的定义：
                var 变量名 = { // 空对象
                属性名：值, // 定义一个属性
                属性名：值, // 定义一个属性
                函数名：function(){} // 定义一个函数
                };
        */
        var obj = {
      
            name: "华仔",
            age: 18,
            fun: function () {
      
                alert("姓名=" + this.name + " 年龄=" + this.age);
            }
        };
        // alert(typeof(obj));
        alert(obj.name);

        obj.fun();


    </script>
</head>
<body>

</body>
</html>

JS中的事件

基本介绍

事件就是电脑输入设备与页面进行交互的响应

事件的注册（静态注册和动态注册）

事件的注册(绑定)就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定

静态注册事件

:::tips
通过html标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册
:::

注意：静态注册的事件需要在body内调用

动态注册事件

:::tips
是指先通过JS代码得到标签的DOM对象，然后再通过DOM对象.事件名 = function() {}，这种形式赋予事件响应后的代码，叫动态注册
:::

动态注册的事件不需要调用，会自动执行

动态注册基本步骤：

获取标签对象
标签对象.事件名 = function() {}

常用的事件

onload加载完成事件	页面加载完成之后，常用于做页面JS代码初始化操作
onclick单机事件	常用于按钮的点击响应操作
onblur失去焦点事件	常用于输入框失去焦点后验证其输入内容是否合法
onchange内容发生改变事件	常用于下拉下列和输入框内容发生改变后操作
onsubmit表单提交事件	常用于表单提交前，验证所有表单项是否合法

onload加载完成事件

onload事件是浏览器解析完页面之后会自动触发的事件，即表示文档加载完成后再执行的一个事件

<!DOCTYPE html>
<html lang="en">
<head>
    <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 οnlοad="onloadFun()" - 静态的
-->
<body>

</body>
</html>

onclick单机事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      function onClickFun() {
      
          alert("静态注册onclick事件");
      }

      //动态注册onclick
      window.onload = function () {
      
          //1. 获取标签对象
          /**
           * document 是JavaScript语言提供的一个对象（文档），就表示整个页面里的所有内容
           * get        获取
           * Element    元素（就是标签）
           * By         通过....由....经
           * Id         id属性
           * 通过 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>
</html>

onblur失去焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        //静态注册失去焦点事件
        function unBlurFun() {
      
            //console是控制台对象，是由JavaScript语言提供，专门用于向浏览器的控制台打印输出，用于测试使用
            //log() 是打印的方法
            console.log("静态注册失去焦点事件");
        }

        //动态注册失去焦点事件
        window.onload = function () {
      
            //1. 获取标签对象
            var passwordObj = document.getElementById("password");
            //2. 通过标签对象.事件名 = function() {}
            passwordObj.onblur = function () {
      
                console.log("动态失去焦点事件");
            }
        }

    </script>
</head>
<body>
    用户名：<input type="text" onblur="unBlurFun()"><br/>
    密码：<input type="text" id="password"><br/>
</body>
</html>

console是控制台对象，专门用于浏览器的控制台打印输出，用于测试使用
log() 是打印的方法

onchange内容发生改变事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function unchangeFun() {
      
            alert("女神已经改变了");
        }

        window.onload = function () {
      
            //1. 获取标签对象
            var selObj = document.getElementById("sel01");
            //2. 通过标签对象.事件名 = function() {}
            selObj.onchange = function () {
      
                alert("男神已经改变了");
            }
        }


    </script>
</head>
<body>
    请选择你心中的女神：
    <!--静态注册onchange事件-->
    <select onchange="unchangeFun()">
      <option>--女神--</option>
      <option>芳芳</option>
      <option>佳佳</option>
      <option>环环</option>
    </select>

    请选择你心中的男神：
    <!--动态注册onchange事件-->
    <select id="sel01">
        <option>--男神--</option>
        <option>国哥</option>
        <option>华仔</option>
        <option>朝伟</option>
    </select>
</body>
</html>

onsubmit表单提交事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        //静态注册表单提交事件
        function onsubmitFun() {
      
            //要验证所有表单项时候合法，如果有一个不合法就阻止表单提交
            alert("静态注册表单提交事件-----发现不合法");
            return false;
        }

        window.onload = function () {
      
            //1. 获取标签对象
            var formObj = document.getElementById("form01");
            //2. 通过标签对象.事件名 = function(){}
            formObj.onsubmit = function () {
      
                alert("动态注册表单提交事件-----发现不合法");
                // return false;//不写也能提交，或者return true也可以提交
            }
        }

    </script>
</head>
<body>
<!--return可以阻止表单提交-->
    <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>
</html>

正则表达式

:::tips
即要么为 var patt = new RegExp(…);
要么就是 var patt = /…/;
:::

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      //正则表达式
      // e 表示要求字符串中，是否包含字母e
      // var patt = new RegExp("e");
      // var patt = /e/; //这个也是正则表达式对象
      // var patt = /[abc]/; //表示要求字符串中是否包含字母a或b或c
      // var patt = /[a-z]/; //表示要求字符串中是否包含字母a - z，即小写字母
      // var patt = /[A-Z]/; //表示要求字符串中是否包含字母A - Z，即大写字母
      // var patt = /[0-9]/; //表示要求字符串中是否包含任意数字 0-9
      // var patt = /\w/; //表示要求字符串中是否包含字母、数字、下划线
      // var patt = /a+/; //表示要求字符串中是否包含至少一个a
      // var patt = /a*/; //表示要求字符串中是否 *包含* 0个 或 多个a
      // var patt = /a?/; //表示要求字符串中是否 *包含* 0个 或 一个a
      // var patt = /a{3}/; //表示要求字符串中是否 *包含* 连续3个a
      // var patt = /a{3,5}/; //表示要求字符串中是否 *包含* 至少3个连续的a，最多5个连续的a
      // var patt = /a{3,}/; //表示要求字符串中是否 *包含* 至少3个连续的a
      // var patt = /a$/; //表示要求字符串必要以a结尾
      // var patt = /^a/; //表示要求字符串必要以a开头

      //要求字符串中是否 包含 至少3个连续的a
      // var patt = /a{3,5}/;
      // //要求字符串从头到尾都必须完全匹配
      // var patt = /^a{3,5}$/;
      var patt = /^\w{5,12}$/;


      alert(patt);

      var str = "wzg168";

      alert(patt.test(str));

      //问题：var patt = /a{3,5}/; 最大什么时候有用
    	//只有当加上了^ 和 $ 才会用到这个最大
    </script>
</head>
<body>

</body>
</html>

DOM模型

基本介绍

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

就是把文档中的标签、属性、文本转换成为对象来管理
:::

Document对象（重点）

:::tips
Document对象的理解：
第一点：Document它管理了所有的HTML文档内容
第二点：document它是一种树结构的文档，有层级关系
第三点：它让我们把所有的标签都对象化
第四点：我们可以通过document访问所有的标签对象
:::
将html标签对象化

:::tips
模拟对象化，相当于：
class Dom {
private String id; //id属性
private String tagName; //表示标签名
private Dom parentNode; //父节点
private List children;//子节点
private String innerHTML; //起始标签和结束标签中间的内容
}
:::

Document对象中的方法介绍（重点）

:::tips
document.getElementById(elementId)

通过标签的id属性查找标签DOM对象，elementId是标签的id属性值

document.getElementsByName(elementName)

通过标签的name属性查找标签DOM对象，elementName标签的name属性值

document.getElementsByTagName(tagName)

通过标签名查找标签DOM对象，tagName是标签名

document.createElement(tagName)

方法，通过给定的标签名，创建一个标签对象，tagName是要创建的标签名
:::
:::tips
注：
document对象的三个查询方法，如果有id属性，优先使用getElementById方法来进行查询
如果没有id属性，则优先使用getElementsByName方法来进行查询
如果id属性和name属性都没有最后再按标签名查getElementsByTagName
以上三个方法，一定要再页面加载完成之后执行，才能查询到标签对象
:::

getElementById方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      /**
       * 需求：当用户点击了校验按钮，要获取输入框里的内容，然后验证其是否合法
       * 需要验证的规则是：必须有字母、数字、下划线组成，并且长度是5-12位
       */
      function onclickFun() {
      
          //1. 当我们要操作一个标签的时候，一定要先获取这个标签对象
          var usernameObj = document.getElementById("username");
          // alert(usernameObj);
          //[object HTMLInputElement] 它就是DOM对象
          // alert(usernameObj.value);
          var usernameText = usernameObj.value;
          //如何验证字符串符合某些规则，需要使用正则表达式技术
          var patt = /^\w{5,12}$/;
          
          var usernameSpanObj = document.getElementById("usernameSpan");
          // alert(usernameSpanObj);
          // innerHTML表示起始标签和结束标签中的内容
          // innerHTML 这个可读可写
          // usernameSpanObj.innerHTML = "国哥真可爱！";
          // alert(usernameSpanObj.innerHTML);

          //test() 方法用于测试某个字符串是不是匹配我的规则
          //匹配就返回true，不匹配就返回false
          if (patt.test(usernameText)) {
      
              // alert("用户名合法");
              // usernameSpanObj.innerHTML = "用户名合法";
              usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";

          } else {
      
              // alert("用户名不合法");
              // usernameSpanObj.innerHTML = "用户名不合法";
              usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
          }

      }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="zan"/>
    <span id="usernameSpan" style="color: red">


    </span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>

getElementsByName方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function checkAll() {
      
            //让所有复选框都选中
            //document.getElementsByName("hobby"); 是根据指定的name属性查询返回多个标签对象集合
            //这个集合的操作和数组一样
            //集合中每个元素都是DOM对象
            //这个集合中的元素顺序是他们在html页面中从上到下的顺序
            var hobbies = document.getElementsByName("hobby");
            //checked 表示复选框的选中状态，如果选中是true，不选中是false
            //这个属性可读，可写
            for (var i = 0; i < hobbies.length; i++) {
      
                hobbies[i].checked = true;
            }
        }

        //全不选
        function checkNone() {
      
            var hobbies = document.getElementsByName("hobby");
            //checked 表示复选框的选中状态，如果选中是true，不选中是false
            //这个属性可读，可写
            for (var i = 0; i < hobbies.length; i++) {
      
                hobbies[i].checked = false;
            }
        }

        //反选
        function checkReverse() {
      
            var hobbies = document.getElementsByName("hobby");
            //checked 表示复选框的选中状态，如果选中是true，不选中是false
            //这个属性可读，可写
            for (var i = 0; i < hobbies.length; i++) {
      
                // if (hobbies[i].checked) {
      
                //     hobbies[i].checked = false;
                // } else {
      
                //     hobbies[i].checked = true;
                // }
                hobbies[i].checked = !hobbies[i].checked;
            }
        }
    </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="checkNone()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>

getElementsByTagName方法

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

createElement方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
      

            //现在需要我们使用js代码来创建html标签，并显示在页面上
            //标签的内容就是：    <div>Zan帅</div>
            var divObj = document.createElement("div");//在内存中 <div></div>
            // alert(divObj);//[object HTMLDivElement]

            var textNode = document.createTextNode("Zan帅");// 有一个文本节点对象 Zan帅

            divObj.appendChild(textNode);

            // divObj.innerHTML = "Zan帅";// <div>Zan哥帅</div> 但还只是在内容中

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

</body>
</html>

节点的常用属性和方法

节点就是标签对象

方法

:::tips
通过具体的元素节点调用 **getElementsByTagName() **方法

获取当前节点的指定标签名孩子节点

**appendChild( oChildNode ) **方法

可以添加一个子节点，oChildNode 是要添加的孩子节点
:::

属性

:::tips
childNodes 属性

获取当前节点的所有子节点

**firstChild **属性

获取当前节点的第一个子节点

**lastChild **属性

获取当前节点的最后一个子节点

**parentNode **属性

获取当前节点的父节点

**nextSibling **属性

获取当前节点的下一个节点

**previousSibling **属性

获取当前节点的上一个节点

**className **

用于获取或设置标签的 class 属性值

**innerHTML **属性

表示获取/设置起始标签和结束标签中的内容

**innerText **属性

表示获取/设置起始标签和结束标签中的文本
:::

案例讲解

<!DOCTYPE html>
<html>
<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 liObj = document.getElementsByTagName("li");
			alert(liObj.length);
		};
		//3.查找name=gender的所有节点
		var btn03Ele = document.getElementById("btn03");
		btn03Ele.onclick = function(){
      
			var genderObj = document.getElementsByName("gender");
			alert(genderObj.length);
		};
		//4.查找#city下所有li节点
		var btn04Ele = document.getElementById("btn04");
		btn04Ele.onclick = function(){
      
			//1. 获取id为city的节点
			//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(){
      
			//1. 查找id为phone的节点
			alert(document.getElementById("phone").firstChild.innerHTML);
		};
		//7.返回#bj的父节点
		var btn07Ele = document.getElementById("btn07");
		btn07Ele.onclick = function(){
      
			//1. 查询id为bj的节点
			//2. bj节点获取父节点
			alert(document.getElementById("bj").parentNode.innerText);
			// alert(document.getElementById("bj").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 = "Zan哥牛"
		};
		//11.返回#bj的文本值
		var btn11Ele = document.getElementById("btn11");
		btn11Ele.onclick = function(){
      
			// alert(document.getElementById("bj").innerHTML);
			alert(document.getElementById("bj").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>

		

		


		<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>
</html>

本文链接：https://blog.csdn.net/weixin_65508929/article/details/128210208

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

hdu 1229 还是A+B（水）-程序员宅基地

文章浏览阅读122次。还是A+BTime Limit: 2000/1000 MS (Java/Others)Memory Limit: 65536/32768 K (Java/Others)Total Submission(s): 24568Accepted Submission(s): 11729Problem Description读入两个小于10000的正整数A和B，计算A+B。...

http客户端Feign——日志配置_feign 日志设置-程序员宅基地

文章浏览阅读419次。HEADERS：在BASIC的基础上，额外记录了请求和响应的头信息。FULL：记录所有请求和响应的明细，包括头信息、请求体、元数据。BASIC：仅记录请求的方法，URL以及响应状态码和执行时间。NONE：不记录任何日志信息，这是默认值。配置Feign日志有两种方式；方式二：java代码实现。注解中声明则代表某服务。方式一：配置文件方式。_feign 日志设置

[转载]将容器管理的持久性 Bean 用于面向服务的体系结构-程序员宅基地

文章浏览阅读155次。将容器管理的持久性 Bean 用于面向服务的体系结构本文将介绍如何使用 IBM WebSphere Process Server 对容器管理的持久性 (CMP) Bean的连接和持久性逻辑加以控制，使其可以存储在非关系数据库..._javax.ejb.objectnotfoundexception: no such entity!

基础java练习题（递归）_java 递归例题-程序员宅基地

文章浏览阅读1.5k次。基础java练习题一、递归实现跳台阶从第一级跳到第n级，有多少种跳法一次可跳一级，也可跳两级。还能跳三级import java.math.BigDecimal;import java.util.Scanner;public class Main{ public static void main(String[]args){ Scanner reader=new Scanner(System.in); while(reader.hasNext()){ _java 递归例题

面向对象程序设计（荣誉）实验一 String_对存储在string数组内的所有以字符‘a’开始并以字符‘e’结尾的单词做加密处理。-程序员宅基地

文章浏览阅读1.5k次，点赞6次，收藏6次。目录1.串应用- 计算一个串的最长的真前后缀题目描述输入输出样例输入样例输出题解2.字符串替换(string)题目描述输入输出样例输入样例输出题解3.可重叠子串 (Ver. I)题目描述输入输出样例输入样例输出题解4.字符串操作（string）题目描述输入输出样例输入样例输出题解1.串应用- 计算一个串的最长的真前后缀题目描述给定一个串，如ABCDAB，则ABCDAB的真前缀有：{ A, AB,ABC, ABCD, ABCDA }ABCDAB的真后缀有：{ B, AB,DAB, CDAB, BCDAB_对存储在string数组内的所有以字符‘a’开始并以字符‘e’结尾的单词做加密处理。

算法设计与问题求解/西安交通大学本科课程MOOC/C_算法设计与问题求解西安交通大学-程序员宅基地

文章浏览阅读68次。西安交通大学/算法设计与问题求解/树与二叉树/MOOC_算法设计与问题求解西安交通大学

随便推点

[Vue warn]: Computed property “totalPrice“ was assigned to but it has no setter._computed property "totalprice" was assigned to but-程序员宅基地

文章浏览阅读1.6k次。问题：在Vue项目中出现如下错误提示：[Vue warn]: Computed property "totalPrice" was assigned to but it has no setter. (found in <Anonymous>)代码：<input v-model="totalPrice"/>原因：v-model命令，因Vue 的双向数据绑定原理，会自动操作 totalPrice，对其进行set 操作而 totalPrice 作为计..._computed property "totalprice" was assigned to but it has no setter.

basic1003-我要通过！13行搞定：也许是全网最奇葩解法_basic 1003 case 1-程序员宅基地

文章浏览阅读60次。十分暴力而简洁的解决方式：读取P和T的位置并自动生成唯一正确答案，将题给测点与之对比，不一样就给我爬！_basic 1003 case 1

服务器浏览war文件,详解将Web项目War包部署到Tomcat服务器基本步骤-程序员宅基地

文章浏览阅读422次。原标题：详解将Web项目War包部署到Tomcat服务器基本步骤详解将Web项目War包部署到Tomcat服务器基本步骤1 War包War包一般是在进行Web开发时，通常是一个网站Project下的所有源码的集合，里面包含前台HTML/CSS/JS的代码，也包含Java的代码。当开发人员在自己的开发机器上调试所有代码并通过后，为了交给测试人员测试和未来进行产品发布，都需要将开发人员的源码打包成Wa..._/opt/bosssoft/war/medical-web.war/web-inf/web.xml of module medical-web.war.

python组成三位无重复数字_python组合无重复三位数的实例-程序员宅基地

文章浏览阅读3k次，点赞3次，收藏13次。# -*- coding: utf-8 -*-# 简述：这里有四个数字，分别是：1、2、3、4#提问：能组成多少个互不相同且无重复数字的三位数？各是多少？def f(n):list=[]count=0for i in range(1,n+1):for j in range(1, n+1):for k in range(1, n+1):if i!=j and j!=k and i!=k:list.a..._python求从0到9任意组合成三位数数字不能重复并输出

ElementUl中的el-table怎样吧0和1改变为男和女_elementui table 性别-程序员宅基地

文章浏览阅读1k次，点赞3次，收藏2次。<el-table-column prop="studentSex" label="性别" :formatter="sex"></el-table-column>然后就在vue的methods中写方法就OK了methods: { sex(row,index){ if(row.studentSex == 1){ return '男'; }else{ return '女'; }..._elementui table 性别

java文件操作之移动文件到指定的目录_java中怎么将pro.txt移动到design_mode_code根目录下-程序员宅基地

文章浏览阅读1.1k次。java文件操作之移动文件到指定的目录_java中怎么将pro.txt移动到design_mode_code根目录下