JavaScript

标签：function 标签 JavaScript alert var document 节点

二、JavaScript

1、JavaScript介绍

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

JS是弱类型，Java是强类型。

弱类型就是类型可变。

强类型，就是定义变量的时候，类型已确定，而且不可变。

特点：

交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解析JS的浏览器都可以执行，和平台无关）

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

2.1、第一种方式

只需要在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>

2.2、第二种方式

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

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

        script标签可以用来定义js代码，也可以用来引入js文件，
        但是不能同时使用两种方式，否则会报错。
    -->
    <script type="text/javascript" src="1.js">
    </script>
    <script>
        alert("现在可以执行了");
    </script>
</head>
<body>

</body>
</html>

3、变量

什么是变量？变量是可以存放某些值的内存的命名。

JavaScript的变量类型：

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

JavaScript里特殊的值：

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

JavaScript的定义变量格式：

var 变量名；
var 变量名 = 值；

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

4、关系（比较）运算

等于：== 等于是简单的数字面值的比较

全等于：=== 除了数字面值的比较之外，还好比较两个变量的数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script typeof="text/javascript">
        // 关系运算
        var a = 10;
        var b="10";
        alert(a == b); // true
        alert(a === b); // false
    </script>
</head>
<body>

</body>
</html>

5、逻辑运算

且运算：&&

或运算：||

取反运算：！

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

注意：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("a是true");

        }else
        {
            alert("a是false");
        }
        var b = null;
        if(b){
            alert("b是true");
        }else
        {
            alert("b是false");
        }
        var c = undefined;
        if(c){
            alert("c是true");
        }else
        {
            alert("c是false");
        }
        var d = "";
        if(d){
            alert("d是true");
        }else
        {
            alert("d是false");
        }*/
        /*
       && 且运算
       有两种情况：
       第一种：当表达式全为真的时候，返回最后一个表达式的值。
       第二种：当表达式中，有一个为假的时候，返回第一个为假的表达式的值

       || 或运算
       第一种情况：当表达式全为假的时候，返回最后一个表达式的值
       第二种情况：只要有一个表达式为真。就会把第一个为真的表达式的值返回

       并且&& 与运算 和 ||或运算 有短路。
       短路就是说，当这个&&或||运算有结果了之后。后面的表达式不再执行
        */
        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(a&&d&&c);//false
        //alert(d||c);//null
        //alert(c||d);//false
        //alert(a||c);//abc
        //alert(b||c);//true
    </script>
</head>
<body>

</body>
</html>

6、数组（重点）

6.1、数组定义方式

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 = [true,1];//定义一个空数组
        //alert(arr.length);//0
        arr[0] = 12;
        //alert(arr[0]);//12
        //alert(arr.length);//1
        //JavaScript数组的长度是可变的，
        //只要我们通过数组下标赋值，那么最大的下标值，
        //就会自动给数组做扩容操作
        arr[2] = "abc";
        //alert(arr.length);//3
        //alert(arr[1]);//undefined
        for (var i = 0; i < arr.length ; i++) {
            alert(arr[i]);
        }
    </script>
</head>
<body>

</body>
</html>

7、函数（重点）

7.1、函数的两种定义方式

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

使用的格式如下：

function 函数名(形参列表){
	函数体
}
在JavaScript语言中，如何定义带有返回值的函数？
只需要在函数体内直接使用return语句返回值即可！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //定义一个无参数的函数
        function show(){
            alert("这是一个无参数的函数");
        }
        //函数调用才会执行
        //show();
        function show2(a,b){
            alert("这是一个有参数的函数，参数a的值是"+a+"，参数b的值是"+b);
        }
        //show2(1,2);
        //定义一个有返回值的函数
        function show3(num1,num2){
            var sum=num1+num2;
            return "这是一个有返回值的函数，参数num1的值是"+num1+"，参数num2的值是"+num2+"，返回值是"+sum;
        }
        alert(show3(1,2));
    </script>
</head>
<body>

</body>
</html>

函数的第二种定义方式，格式如下：

使用格式如下：
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(a, b) {
            return a + b;
        }
        //alert(fun3(1, 2));
    </script>
</head>
<body>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function a() {
            alert("第一次定义a函数");
        }
        function a(a,b) {
            alert("第二次定义a函数");
        }
        a();
    </script>
</head>
<body>

</body>
</html>

7.2、函数的arguments隐形参数（只在funtion函数内）

就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量，我们管它叫做隐形参数。

隐形参数特别像java基础的可变长参数一样。

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]);*/
            alert("无参函数fun()")
            for(var i=0;i<arguments.length;i++){
                alert(arguments[i]);
            }
        }
        //fun(1,"a",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,"abc",5,6,7,8,9,10));
    </script>
</head>
<body>

</body>
</html>

8、JS中的自定义对象（扩展内容）

Object形式的自定义对象

var 变量名 = new Object(); //对象实例（空对象）

变量名.属性名=值；//定义一个属性

变量名.函数名=function(){}//定义一个函数

对象的访问：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var obj = new Object();
        obj.name = "张三";
        obj.age = 18;
        obj.fun = function(){
            alert("姓名："+this.name+"\n年龄："+this.age);
        }
        //对象的访问
        alert(obj.name);
        obj.fun();
    </script>
</head>
<body>

</body>
</html>

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var obj = {
            name: "张三",
            age: 18,
            fun: function () {
                alert("我的名字是" + this.name + "，我今年" + this.age + "岁了");
            }
        };
        alert(obj.name);
        obj.fun();
    </script>
</head>
<body>

</body>
</html>

9、js中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应，我们称之为事件。

常用事件：

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

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

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

静态注册事件：

通过html标签的事件属性直接赋予事件响应后的代码，这种方式就是静态注册

动态注册事件：

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

动态注册的基本步骤：

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

9.1、onload事件

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

</body>
</html>

9.2、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 () {
            //获取标签对象
            /*
            *document是js语言提供的一个对象（文档）
            * get    获取
            * Element   元素（就是标签）
            * By   通过。。由。。经。。
            * Id    id属性
             */
            var btn = document.getElementById("btn01");
            //通过标签对象注册onclick事件
            //alert(btn);
            btn.onclick = function () {
                alert("动态注册onclick事件");
            }
        }
    </script>
</head>
<body>
    <!--
    静态注册click事件
    -->
    <button onclick="onclickFun()">按钮1</button>
    <button id="btn01">按钮2</button>
</body>
</html>

9.3、onblur事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册onblur事件
        function onblurFun(){
            //console是控制台对象，是由js语言提供，专门用于来向浏览器的控制台打印输出，用于测试使用
            //log()是打印的方法
            console.log("静态注册onblur事件");
        }
        //动态注册onblur事件
        window.onblur = function(){
            //获取标签对象
            var obj = document.getElementById("password");
            //alert(obj);
            //通过标签对象.事件名 = function(){}来注册事件
            obj.onblur = function(){
                console.log("动态注册onblur事件");
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" onblur="onblurFun()"><br/>
    密码：<input type="password" id="password" ><br/>
    <button onclick="check()">登录</button>
</body>
</html>

9.4、onchange事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun() {
            alert("女神已经改变了！");
        }
        window.onload = function () {
            var oSelect = document.getElementById("男神");
            //alert(oSelect);
            oSelect.onchange = function () {
                alert("男神已经改变了！");
            }
        }
    </script>
</head>
<body>
    请选择你们心中的女神：
    <!--静态注册onchange事件-->
    <select onchange="onchangeFun()">
        <option>--女神1--</option>
        <option>--女神2--</option>
        <option>--女神3--</option>
        <option>--女神4--</option>
        <option>--女神5--</option>
    </select>

    请选择你们心中的男神：
    <!--动态注册onchange事件-->
    <select id="男神">
        <option>--男神1--</option>
        <option>--男神2--</option>
        <option>--男神3--</option>
        <option>--男神4--</option>
        <option>--男神5--</option>
    </select>
</body>
</html>

9.5、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 () {
            //获取标签对象
            var form = document.getElementById("form01");
            //alert(form);
            //给表单对象添加onsubmit事件
            form.onsubmit = function () {
                //要验证所有表单项是否合法，如果有一个不合法就要阻止表单提交
                alert("动态注册表单提交请求----发现不合法");
                return false;
            }
        }
    </script>
</head>
<body>
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
        <input type="submit" value="静态提交"/>
    </form>
    <form action="http://localhost:8080" id="form01" method="get">
        <input type="submit" value="动态提交"/>
    </form>
</body>
</html>

10、DOM模型

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

大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。

那么它们是如何实现把标签，属性，文本转换成为对象来管理的呢？这就是下面学习的重点。

10.1、Document对象（重点）

Document对象的理解：

Document它管理了所有的HTML文档内容。
Document它是一种树结构的文档，有层级关系。
它让我们把所有的标签都对象化
我们可以通过Document访问所有的标签对象

什么是对象化？
举例：
有一个人年龄18岁，性别女，名字小李
我们要把这个人的信息对象化怎么办？
class Person{
	private int age;
	private String sex;
	private String name;
}

<!--那么html标签要对象化怎么办-->
<body>
    <div id="div01">div01</div>
</body>

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

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

document.getElementById(elementId)

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

document.getElementsByName(elementName)

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

document.getElementsByTagName(tagName)

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

document.createElement(tagName)

方法，通过给定的标签名，创建一个标签对象，tagName是要创建的标签名

getElementById方法示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /**
         * 需求：当用户点击了校验按钮，要获取输出框中的内容，然后做验证其是否合法。<br/>
         * 验证的规则是：必须由字母，数字，下划线组成，且长度不能小于6位，不能大于20位。<br/>
         */
        function onclickFun(){
            //1.当我们要操作一个标签的时候，我们需要先获取标签的对象。
            var usernameObj=document.getElementById("username");
            //alert(usernameObj);
            //[object HTMLInputElement]它就是dom对象
            //alert(usernameObj.type);
            //alert(usernameObj.value);//value值是用户输入的内容
            var usernameText=usernameObj.value;
            //2.验证用户输入的内容是否合法。
            //需要用到正则表达式
            var reg=/^\w{6,20}$/;
            /*
            * test()方法：用于测试一个字符串是否匹配我的规则
            * 匹配就返回true，不匹配就返回false。
             */
            if(reg.test(usernameText)){
                alert("用户名合法！");
            }else{
                alert("用户名不合法！");
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="aaa">
    <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();是根据指定的name属性值查询返回多个标签对象集合
            //这个集合的操作跟数组一样
            //集合中每一个元素都是dom对象
            var hobbies = document.getElementsByName("hobby");
            //alert(habbies[2].value);
            //checked表示是否选中，如果选中，则为true，否则为false
            //这个属性是读，可写的
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked = true;
            }
        }
        //全不选
        function checkNo(){
            var hobbies = document.getElementsByName("hobby");
            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;
            }
        }
    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp">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>
</html>

getElementByTagName：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function checkAll() {
            //document.getElementsByTagName("input")返回一个数组
            //这个集合的操作方法和数组的操作方法一样
            //集合中都是dom对象
            //集合中元素顺序 是他们在页面中从上到下的顺序
            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">C++
    <input type="checkbox" value="java">Java
    <input type="checkbox" value="js">JavaScript
    <br/>
    <button onclick="checkAll()">全选</button>
</body>
</html>

注意：
document对象的三个查询方法，如果有id属性优先使用getElementId方法来进行查询，如果没有id属性，则优先使用getElementsByName方法来进行查询，如果id属性和name属性都没有，最后再按标签名查getElementsByTagName
以上三个方法，代码一定要在页面加载完成之后执行，才能查询到标签对象

10.3、正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //表示字符串中是否包含e
        // var patt = new RegExp("e");
        //var patt = /e/;//更简单的写法
        //var patt = /[abcd]/;//匹配a或b或c或d
        //var patt = /[a-z]/;//匹配a-z的任意一个字符
        //var patt = /[A-Z]/;//匹配A-Z的任意一个字符
        //var patt = /[0-9]/;//匹配0-9的任意一个字符
        //var patt = /\w/;//匹配任意一个字符，包括字母、数字、下划线
        //var patt = /\W/;//匹配任意一个非字母、数字、下划线的字符
        //var patt = /a+/;//匹配a的至少一次
        //var patt = /a*/;//匹配a的0次或者多次
        //var patt = /a?/;//匹配a的0次或者1次
        //var patt = /a{2}/;//匹配a连续2次
        //var patt = /a{2,4}/;//匹配a连续2-4次
        //var patt = /[^a-z]/;//匹配除a-z以外的任意一个字符
        //var patt = /a{2,}/;//匹配a连续2次以上
        //var patt = /a$/;//匹配a的最后一个字符
        //var patt = /^a/;//匹配a的第一个字符
        //alert(patt);
        var patt = /\w{6,20}/;
        var str = "bbaaaaa";
        alert(patt.test(str));
        //问题：var patt = /a{2,4}/;//最多什么时候有用？
        //var patt = /^a{2,4}$/;
    </script>
</head>
<body>

</body>
</html>

10.4、两种常见的验证提示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /**
         * 需求：当用户点击了校验按钮，要获取输出框中的内容，然后做验证其是否合法。<br/>
         * 验证的规则是：必须由字母，数字，下划线组成，且长度不能小于6位，不能大于20位。<br/>
         */
        function onclickFun(){
            //1.当我们要操作一个标签的时候，我们需要先获取标签的对象。
            var usernameObj=document.getElementById("username");
            //alert(usernameObj);
            //[object HTMLInputElement]它就是dom对象
            //alert(usernameObj.type);
            //alert(usernameObj.value);//value值是用户输入的内容
            var usernameText=usernameObj.value;
            //2.验证用户输入的内容是否合法。
            //需要用到正则表达式
            var reg=/^\w{6,20}$/;
            /*
            * test()方法：用于测试一个字符串是否匹配我的规则
            * 匹配就返回true，不匹配就返回false。
             */
            var usernameSpanObj = document.getElementById("usernameSpan");
            //innerHTML起始标签和结束标签之间的内容
            //这个属性可读可写
            //alert(usernameSpanObj.innerHTML);
            usernameSpanObj.innerHTML="666";
            if(reg.test(usernameText)){
                //alert("用户名合法！");
                //usernameSpanObj.innerHTML="*用户名合法！";
                usernameSpanObj.innerHTML="<img src=\"right.png\" width=\"15px\" height=\"15px\">"
            }else{
                //alert("用户名不合法！");
                //usernameSpanObj.innerHTML="*用户名不合法！";
                usernameSpanObj.innerHTML="<img src=\"wrong.png\" width=\"15px\" height=\"15px\">"
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="aaa">
    <span id="usernameSpan" style="color: red;">

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

10.5、节点的常用属性和方法

节点就是标签对象

方法：

通过具体的元素节点调用getElementsByTagName()方法，获取当前节点的指定标签名孩子节点
appendChild(oChildNode)方法，可以添加啊一个子节点，oChildNode是要添加的孩子节点。

注意：

文本也是一个节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            //现在需要我们使用js代码来创建html标签，并显示在页面上
            //标签的内容就是：<div>666真厉害</div>
            var divObj=document.createElement("div");//在内存中，<div></div>

            var textNodeObj = document.createTextNode("666真厉害");//有一个文本节点
            divObj.appendChild(textNodeObj);//将文本节点添加到标签中
            

            //divObj.innerHTML="666真厉害";//在内存中，<div>666真厉害</div>
            //添加子节点
            document.body.appendChild(divObj);//将divObj添加到body中
        }
    </script>
</head>
<body>

</body>
</html>

属性：

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节点
      var btn01Ele= document.getElementById("btn01");
      btn01Ele.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(){
         //第一获取id为city的节点
         //第二通过city节点，getElementsByTagName获取所有的li节点
         var cityObj=document.getElementById("city");
         var lis=cityObj.getElementsByTagName("li");
         alert(lis.length);
      };
      //5.返回#city的所有子节点
      var btn05Ele = document.getElementById("btn05");
      btn05Ele.onclick = function(){
         var cityObj=document.getElementById("city");
         var lis=cityObj.childNodes;
         alert(lis.length);
      };
      //6.返回#phone的第一个子节点
      var btn06Ele = document.getElementById("btn06");
      btn06Ele.onclick = function(){
         var phoneObj=document.getElementById("phone");
         var firstChild=phoneObj.firstChild;
         alert(firstChild.innerHTML);
      };
      //7.返回#bj的父节点
      var btn07Ele = document.getElementById("btn07");
      btn07Ele.onclick = function(){
         var bjObj=document.getElementById("bj");
         var parentNode=bjObj.parentNode;
         alert(parentNode.innerHTML);
      };
      //8.返回#android的前一个兄弟节点
      var btn08Ele = document.getElementById("btn08");
      btn08Ele.onclick = function(){
         var androidObj=document.getElementById("android");
         var previousSibling=androidObj.previousSibling;
         alert(previousSibling.innerHTML);
      };
      //9.读取#username的value属性值
      var btn09Ele = document.getElementById("btn09");
      btn09Ele.onclick = function(){
         var usernameObj=document.getElementById("username");
         var value=usernameObj.value;
         alert(value);
      };
      //10.设置#username的value属性值
      var btn10Ele = document.getElementById("btn10");
      btn10Ele.onclick = function(){
         var usernameObj=document.getElementById("username");
         usernameObj.value="小明";
      };
      //11.返回#bj的文本值
      var btn11Ele = document.getElementById("btn11");
      btn11Ele.onclick = function(){
         var bjObj=document.getElementById("bj");
         //var text=bjObj.innerHTML;
         var text=bjObj.innerText;
         alert(text);
      };
   };
</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>
</html>

标签：function,标签,JavaScript,alert,var,document,节点
From： https://www.cnblogs.com/SilverStar/p/17415180.html