JavaWeb-JavaScript

Neo丶

已于 2023-03-20 12:17:36 修改

阅读量867

点赞数

文章标签： javascript 学习前端

于 2023-01-04 00:46:05 首次发布

本文链接：https://blog.csdn.net/ego_ekko/article/details/128520530

版权

JavaScript简介

JavaScript语言是用来完成网页的数据验证，运行在客户端，需要运行浏览器来解析执行JavaScript代码

特点：

①交互性，可以做信息的动态交互

②安全性，不允许直接访问本地硬盘

③跨平台性，只要是可以解释JS语言的浏览器都可以执行

JavaScript和HTML代码的结合方式

方式一：在head标签中或者在body标签中使用script标签来书写JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS与HTML结合方式（第一种）</title>
    <script type="text/javascript">
        //alert是JavaScript语言提供的警告框函数，可以接收任意类型的参数，该参数是警告框的提示信息
        alert("new world");
    </script>
</head>
<body>
    
</body>
</html>

方式二：使用script标签引入单独的JavaScript代码文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS与HTML结合方式（第二种</title>
    <!-- 使用script标签引入外部的js文件来执行
        src属性用来引入js文件路径（可以是绝对路径，也可以是相对路径）
        script标签可以用来定义js代码，也可以用来引入js文件
        但是两种方式只能选其一，不能够同时使用
        js执行顺序是从上到下依次执行
     -->
    <script type="text/javascript" src="JS与HTML结合方式（第二种）.js"></script>
    <script type="text/javascript">
        alert("hello js")
    </script>
</head>
<body>

</body>
</html>

alert("new world");

变量

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

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>JS变量定义格式</title>
    <script type="text/javascript" src="JS变量定义格式.js"></script>
</head>
<body>

</body>
</html>

var i;
i = "new world";
//typeof()是js语言提供的取变量数据类型返回的函数
alert(typeof (i));
var j = 32;
alert(typeof (j))
var a = 12;
var b = "abc";
alert(a * b);   //输出NaN

关系运算符

常规关系运算符与Java语言相通，不相同的如下：

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系运算符</title>
    <script type="text/javascript" src="关系运算符.js"></script>
</head>
<body>

</body>
</html>

var a = "12";
var b = 12;
alert(a==b);    //true
alert(a===b);   //false

逻辑运算符

且运算：&&

或运算：||

取反运算：!

在JS语言中，所有变量都可以作为一个boolean类型的变量来使用，0、null、undefined、""（空字符串）都认为为false；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算</title>
    <script type="text/javascript" src="逻辑运算.js"></script>
</head>
<body>

</body>
</html>

/**
 * 在JS语言中，所有变量都可以作为一个boolean类型的变量来使用
 * 0、null、undefined、""（空字符串）都认为为false
 */

var a = 0;
if (a){
    alert("0为true");
}else {
    alert("0为false");
}

var b = null;
if (b){
    alert("null为true");
}else {
    alert("null为false");
}

var c = undefined;
if (c){
    alert("undefined为true");
}else {
    alert("undefined为false");
}

var d = "";
if (d){
    alert("空串为true");
}else {
    alert("空串为false")
}

/**
 * &&且运算两种情况：
 * ①当表达式全为true的时候，返回最后一个表达式的值
 * ②当表达式中有一个为false的时候，返回第一个为false的表达式的值
 *
 * ||或运算两种情况：
 * ①当表达式全为false时，返回最后一个表达式的值
 * ②当有一个表达式为true时，返回第一个为true的表达式的值
 *
 * 并且&&且运算 和 ||或运算 有短路，也就是说当&&或者||运算有了结果后，后面的表达式将不再执行
 */
var e = "abc";
var f = true;
var g = false;
var h = null;

alert(e && f);  //返回f的值”true"
alert(f && e);  //返回e的值"abc"
alert(e && g);  //返回g的值“false”
alert(e && h);  //返回h的值"null"
alert(e && g && h); //返回g的值"false"

alert(g || h);  //返回h的值"null"
alert(h || g);  //返回g的值"false"
alert(e || h);  //返回e的值"abc"

数组

数组的定义：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
  <script type="text/javascript" src="数组.js"></script>
</head>
<body>

</body>
</html>

var a = [true,1]; //定义一个空数组
alert(a.length); //0
a[0] = 12;
alert(a[0]);    //12
alert(a.length); //1
/*js语言中的数组，只要通过数组下标值添加元素，数组就会按照最大下标值进行扩容*/
a[2] = "new world";
alert(a.length); //3
alert(a[1]);    //undefined

/*数组遍历*/
for (var i = 0; i < a.length; i++) {
    alert(a[i]);
}

函数

函数的定义方式有两种：

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

function 函数名(形参列表){
    函数体
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的定义（第一种）</title>
    <script type="text/javascript" src="函数的定义（第一种）.js"></script>
</head>
<body>

</body>
</html>

function f1(){
    alert("无参函数被调用！")
}
//函数被调用才会执行
f1();

function f2(a,b){
    alert("有参函数被调用！a=" + a + "b=" + b)
}
f2(1,"abc");

//在js语言中，定义有返回值的函数：只需要在函数体中直接使用return语句返回值即可
function f3(a,b){
    return a+b;
}
alert(f3(1,2));

第二种：格式如下

var 函数名 = function(形参列表){ 函数体 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数的定义（第二种）</title>
    <script type="text/javascript" src="函数的定义（第二种）.js"></script>
</head>
<body>

</body>
</html>

var f1 = function (a,b){
    return a+b;
}
alert(f1(100,200));

注意：在JS中函数的重载会直接覆盖掉上一次定义的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS中不允许函数的重载</title>
    <script type="text/javascript" src="JS中不允许函数的重载.js"></script>
</head>
<body>

</body>
</html>

function f1(){
    alert("无参函数f1被调用！")
}
function f1(a,b){
    alert("有参函数f1被调用！")
}
f1();   //有参函数f1被调用
f1(1,2) //有参函数f1被调用

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

在function函数中不需要定义，可以直接用来获取所有参数的变量，称为隐形参数；相当于java语言中的可变长参数，可变长参数其实是一个数组，js中的隐形参数也和java可变长参数相同操作类似数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐形参数arguments</title>
    <script type="text/javascript" src="隐形参数arguments.js"></script>
</head>
<body>

</body>
</html>

function f1() {
    alert(arguments.length);    //查看函数参数个数

    for (var i = 0; i < arguments.length; i++) {
        alert(arguments[i]);    //相当于操作参数数组
    }
    alert("无参函数f1()");
}
f1(1,2,3,4,5);

//计算所有参数相加的和并返回
function sum(num1,num2) {
    var result = 0;
    for (var i = 0; i < arguments.length; i++) {
        if (typeof (arguments[i]) == "number"){
            result = result + arguments[i];
        }
    }
    return result;
}
alert(sum(1,2,3,4,5,6,7,8,9));

JS中的自定义对象

Object形式的自定义对象

对象的定义：

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

对象的访问：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Object形式的自定义变量</title>
    <script type="text/javascript" src="Object形式的自定义对象.js"></script>
</head>
<body>

</body>
</html>

var obj1 = new Object();
obj1.name = "pero";

obj1.run = function () {
    alert(this.name + "跑起来！")
}

alert(obj1.name);
obj1.run();

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>花括号形式的自定义对象</title>
    <script type="text/javascript" src="花括号形式的自定义对象.js"></script>
</head>
<body>

</body>
</html>

var obj1 = {
    name:"nano",
    run:function () {
        alert(this.name + "跑起来！")
    }
};
obj1.run();

JS中的事件

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

常用的事件

①onload加载完成事件：页面加载完成后，常用于做页面js代码初始化操作；

②onclick单击事件：按钮的点击响应操作；

③onblur失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法；

④onchange内容发生改变事件：常用下拉列表和输入框内容发生改变后的操作；

⑤onsubmit表单提交事件：常用于表单提交前验证所有表单是否合法。

事件的注册

通知浏览器当事件响应后要执行哪些操作代码，成为事件注册或者事件绑定

静态注册事件：

通过HTML标签的事件属性直接赋予事件响应后的代码

动态注册事件：

先通过JS代码获取HTML标签的dom对象，然后再通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码

动态注册基本步骤：①获取标签对象；②标签对象.事件名 = function(){}

onload事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload事件</title>
    <script type="text/javascript" src="onload事件.js"></script>
</head>
  <!--  静态注册onload事件
    onload事件是浏览器解析完页面之后会自动触发的事件
    <body onload="onloadFun()">
   -->
<body>

</body>
</html>

function onloadFun() {
    alert("静态注册onload事件，相关代码！")
}
//onload事件动态注册固定的写法
window.onload = function () {
    alert("动态注册的onload事件")
}

onclick按钮事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onclick事件</title>
    <script type="text/javascript" src="onclick事件.js"></script>
</head>
<body>
  <!-- 静态注册onclick事件-->
  <button onclick="onclickFun()">按钮1</button><br/>
  <button id="btn01">按钮2</button>
</body>
</html>

function onclickFun() {
    alert("静态注册onclick事件")
}
//动态注册onclick事件
window.onload = function () {
    //①获取标签对象
    /**
     * document是JS语言提供的一个对象（文档），整个html页面的所有内容
     * getElementById()：通过id属性获取标签对象
     */
    var btnObj = document.getElementById("btn01");
    //alert(btnObj);
    //②通过标签对象.事件名 = function(){}
    btnObj.onclick = function () {
        alert("动态注册的onclick事件")
    }
}

onblur失去焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onblur失去焦点事件</title>
    <script type="text/javascript" src="onblur失去焦点事件.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>用户名：</td>
            <td><input type="text" onblur="onblurFun();"/></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" id="pw01"/></td>
        </tr>
        <tr>
            <td><button>重置</button></td>
            <td><button>提交</button></td>
        </tr>
    </table>
</body>
</html>

//静态注册失去焦点事件
function onblurFun() {
    //console是控制台对象，是由JS语言提供，专门用来向浏览器的控制器打印输出，用于测试
    //log()是打印方法
    console.log("静态注册失去焦点事件");
}
//动态注册失去焦点事件
window.onload = function (){
    //①获取标签对象
    var pw01 = document.getElementById("pw01");
    //②通过标签对象.事件名 = function(){};
    pw01.onblur = function () {
        console.log("动态注册失去焦点事件")
    }
}

onchange事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange事件</title>
    <script type="text/javascript" src="onchange事件.js"></script>
</head>
<body>
    <!-- 静态注册onchange事件 -->
  国籍：
     <select onchange="onchangeFun()">
    <option>---请选择你的国籍---</option>
    <option>中国</option>
    <option>美国</option>
    <option>法国</option>
    <option>英国</option>
    <option>德国</option>
    </select><br/>
    想前往的国家：
    <select id="sel01">
        <option>---请选择你的国籍---</option>
        <option>中国</option>
        <option>美国</option>
        <option>法国</option>
        <option>英国</option>
        <option>德国</option>
    </select>
</body>
</html>

function onchangeFun(){
    alert("国籍已改变")
}
//动态注册onchange事件
window.onload = function () {
    //①获取标签对象
    var selObj = document.getElementById("sel01");
    //②通过标签对象.事件名 = function(){}
    selObj.onchange = function () {
        alert("想前往的国家已经改变")
    }
}

onsubmit事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onsubmit事件</title>
    <script type="text/javascript" src="onsubmit事件.js"></script>
</head>
<body>
<!-- return false可以组织表单提交 -->
    <form action="https://localhost:8080" method="get" onsubmit="return onsubmitFun()">
    <input type="submit" value="静态注册onsubmit事件"/>
    </form>

    <form action="https://localhost:8080" method="get" id="form01">
        <input type="submit" value="动态注册onsubmit事件"/>
    </form>
</body>
</html>

//静态注册表单提交onsubmit事件
function onsubmitFun() {
    //需要验证所有表单项是否合法，如果有一个不合法阻止表单提交
    alert("静态注册onsubmit事件,表单不合法阻止提交");
    return false;
}

//动态注册表单提交onsubmit事件
window.onload = function () {
    //①获取标签对象
    var formObj = document.getElementById("form01");
    //②通过标签对象.事件名 = function(){}
    formObj.onsubmit = function () {
        alert("动态注册onsubmit事件，表单不合法阻止提交");
        return false;
    }
}

DOM模型

全称为Document Object Model 文档对象模型，就是将HTMl页面文档中的标签、属性、文本转换成为对象来管理

Document对象

<html>
    <head>
        <title>MyHtml.html<title>
    </head>
    <body>
        <a href="https://localhost:8080">我的链接</a>
        <h1>我的标题</h1>
    </body>
</html>

文档

根元素

<html>

元素

<head>

元素

<body>

元素

<title>

属性

href

元素

<a>

元素

<h1>

文本

"文档标题"

文本

"我的链接"

文本

"我的标题"

Document对象理解

①Document对象管理了所有的html文档内容；

②Document是一种树状结构的文档，有层级关系；

③把所有的标签都对象化；

④可以通过Document访问所有的标签对象。

Document对象中的方法

①document.getElementByID(elementID)

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

②document.getElementsByName(elementName)

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByName</title>
    <script type="text/javascript" src="getElementsByName.js"></script>
</head>
<body>
    <table>
      <tr>
        <td>兴趣爱好：</td>
        <td><input type="checkbox" name="hobby" value="JavaScript" checked="checked">JavaScript</td>
        <td><input type="checkbox" name="hobby" value="Java">Java</td>
        <td><input type="checkbox" name="hobby" value="Go">Go</td>
        <td><input type="checkbox" name="hobby" value="C#/CPP">C#/C++</td>
      </tr>
        <tr>
            <td><button id="checkAll">全选</button></td>
            <td><button id="checkNo">全不选</button></td>
            <td><button id="checkReverse">反选</button></td>
        </tr>
    </table>
</body>
</html>

window.onload = function () {
    var checkAllObj = document.getElementById("checkAll");
    var checkNoObj = document.getElementById("checkNo");
    var checkReverseObj = document.getElementById("checkReverse");
    
    checkAllObj.onclick = function () {
        //获取指定name属性查询返回多个标签对象集合，该集合的操作和数组相同
        //集合中每个元素都是dom对象，元素顺序就是在页面中从上到下的顺序
        var hobbies = document.getElementsByName("hobby");
        for (var i = 0; i < hobbies.length; i++) {
            hobbies[i].checked = true;
        }
    }
    checkNoObj.onclick = function () {
        var hobbies = document.getElementsByName("hobby");
        for (var i = 0; i < hobbies.length; i++) {
            hobbies[i].checked = false;
        }
    }
    checkReverseObj.onclick = function () {
        var hobbies = document.getElementsByName("hobby");
        for (var i = 0; i < hobbies.length; i++) {
            if (hobbies[i].checked){
                hobbies[i].checked = false;
            }else {
                hobbies[i].checked = true;
            }
        }
    }
}

③document.getElementsByTagName(tagName)

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementByTagName</title>
    <script type="text/javascript" src="getElementsByTagName.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>兴趣爱好：</td>
            <td><input type="checkbox"  value="JavaScript" checked="checked">JavaScript</td>
            <td><input type="checkbox"  value="Java">Java</td>
            <td><input type="checkbox"  value="Go">Go</td>
            <td><input type="checkbox"  value="C#/CPP">C#/C++</td>
        </tr>
        <tr>
            <td><button id="checkAll">全选</button></td>
            <td><button id="checkNo">全不选</button></td>
            <td><button id="checkReverse">反选</button></td>
        </tr>
    </table>
</body>
</html>

window.onload = function () {
    var checkAllObj = document.getElementById("checkAll");
    var checkNoObj = document.getElementById("checkNo");
    var checkReverseObj = document.getElementById("checkReverse");

    checkAllObj.onclick = function () {
        //获取指定tagName属性查询返回多个标签对象集合，该集合的操作和数组相同
        //集合中每个元素都是dom对象，元素顺序就是在页面中从上到下的顺序
        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = true;
        }
    }
    checkNoObj.onclick = function () {
        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = false;
        }
    }
    checkReverseObj.onclick = function () {
        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].checked){
                inputs[i].checked = false;
            }else {
                inputs[i].checked = true;
            }
        }
    }
}

④document.createElement(tagName)

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

document对象三个查询方法的使用注意事项

如果有id属性，优先使用getElementById方法来查询；如果没有id属性，优先使用getElemenstByName方法来查询；如果id属性和name属性都没有，再使用getElementsByTagName方法来查询。以上三个方法一定要在页面加载完成后执行，才能够查询到标签对象。

验证用户名是否有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementByID</title>
    <script type="text/javascript" src="getElementByID.js"></script>
</head>
<body>
    用户名：<input type="text" id="username" value=""/><br/>
    <button onclick="onclickFun()">校验1</button><br/>
    <button id="but01">校验2</button>
</body>
</html>

/**
 * 点击校验按钮获取输入框中的内容，验证其是否合法
 * 验证规则：必须由数字、字母、下划线组成，并且长度为5~12位
 */
function onclickFun() {
    var usernameObj = document.getElementById("username");
    var usernameText = usernameObj.value;
    var patt = /^\w{5,12}$/;
    if (patt.test(usernameText)){
        alert("用户名合法")
    }else {
        alert("用户名不合法")
    }
}
window.onload = function () {
    var button01 = document.getElementById("but01");
    button01.onclick = function () {
        var username = document.getElementById("username");
        var usernameText = username.value;
        var patt = /^\w{5,12}$/;
        if (patt.test(usernameText)){
            alert("校验成功，用户名合法！");
        }else {
            alert("校验失败，用户名不合法！")
        }
    }
}

正则表达式对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>regexp正则表达式</title>
    <script type="text/javascript" src="regexp正则表达式.js"></script>
</head>
<body>

</body>
</html>

var patt = new RegExp("e");
alert(patt);    /* /e/ */

var str = "abcde";
alert(patt.test(str));

var patt01 = /[abc]/;   //表示要求字符串中，是否包含字母a或b或c
var patt02 = /[a-z]/;   //是否包含小写字母
var patt03 = /[A-Z]/;   //是否包含大写字母
var patt04 = /[0-9]/;   //是否包含数字
var patt05 = /\w/;      //是否包含字母、数字、下划线
var patt07 = /n+/;	    //匹配任何包含至少一个n的字符串。
var patt08 = /n*/;	    //匹配任何包含零个或多个n的字符串。
var patt09 = /n?/;	    //匹配任何包含零个或一个n的字符串。
var patt10 = /n{3}/;	//匹配包含连续3个n的序列的字符串。
var patt11 = /n{5,12}/;	//匹配包含5至12个连续n的序列的字符串。
var patt12 = /n{2,}/;	//匹配包含至少2个连续n的序列的字符串。
var patt13 = /n$/;	    //匹配任何结尾为 n 的字符串。
var patt14 = /^n/;	    //匹配任何开头为 n 的字符串。
var patt15 = /a=n/;	    //匹配任何其后紧接指定字符串 n 的字符串。
var patt16 = /a!n/;	    //匹配任何其后没有紧接指定字符串 n 的字符串
var patt17 = /^a{3,5}$}/;   //从头到尾必须完全匹配，有连续字符a三到五个

验证提示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户名验证</title>
    <link rel="stylesheet" href="用户名验证.css">
    <script type="text/javascript" src="用户名验证.js"></script>
</head>
<body>
    <form action="http://localhost:8080" method="get" id="form01">
        <table>
            <tr>
                <td>用户名:</td>
                <td><input type="text" id="userName" value=""/></td>
                <td><span id="userNameSpan"></span></td>
            </tr>
            <tr>
                <td><input type="reset" value="重置" ></td>
                <td><input type="submit" value="提交"></td>
            </tr>
        </table>
    </form>
</body>
</html>

#userNameSpan{
    color: red;
}
#img{
    width: 18px;
    height: 18px;
}

/**
 * 用户名输入完毕后光标离开后显示输入内容是否合法
 */
//动态注册
window.onload = function (){
    //获取userName标签对象
    var usernameObj = document.getElementById("userName");
    var submitObj = document.getElementById("form01");
    usernameObj.onblur = function (){
        var usernameText = usernameObj.value;
        var unameSpanObj = document.getElementById("userNameSpan");
        var patt = /^\w{5,12}$/;
        if (patt.test(usernameText)){
            unameSpanObj.innerHTML = "<img src=\"../imags/对.png\" id=\"img\" >";
        }else {
            unameSpanObj.innerHTML = "<img src=\"../imags/错.png\" id=\"img\" >";
        }
    }
    submitObj.onsubmit = function () {
        var usernameText = usernameObj.value;
        var patt = /^\w{5,12}$/;
        if (patt.test(usernameText)){
            alert("提交成功，表单合法");
            return true;
        }else {
            alert("提交失败，表单不合法");
            return false;
        }
    }
}

节点的常用属性和方法

节点是指标签的对象

常用属性

①ChildNodes属性，获取当前节点的所有子节点

②firstChild属性，获取当前节点的第一个子节点

③lastChild属性，获取当前节点的最后一个子节点

④parentNode属性，获取当前节点的父节点

⑤nextSibling属性，获取当前节点的下一个节点

⑥previousSibling属性，获取当前节点的上一个节点

⑦className属性，获取或设置标签的class属性值

⑧innerHTML属性，获取或设置起始标签和结束标签中的内容

⑨innerText属性，获取或设置起始标签和结束标签中的文本

常用方法

①getElementsByTagName()方法，获取当前节点的指定标签名子节点

②appendChild(oChildNode)方法，可以添加一个子结点，oChildNode是要添加的子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM查询练习</title>
    <link rel="stylesheet" href="DOM查询练习.css">
    <script type="text/javascript" src="DOM查询练习.js"></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="pero"/>
      </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>

@charset "UTF-8";

body{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
button{
    width: 300px;
    margin-bottom: 10px;
}
#btnList{
    float: left;
}
#total{
    width: 450px;
    float: left;
}
ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
li{
    background: #cce5ff;
    float: left;
    margin: 5px;
}
div{
    border: 1px solid black;
}

window.onload = function () {
    document.getElementById("btn01").onclick = function () {
        var bjObj = document.getElementById("bj");
        alert(bjObj.innerHTML);
    };
    document.getElementById("btn02").onclick = function () {
        var lis = document.getElementsByTagName("li");
        alert(lis.length);
    };
    document.getElementById("btn03").onclick = function () {
        var genders = document.getElementsByName("gender");
        alert(genders.length);
    };
    document.getElementById("btn04").onclick = function (){
        var lis = document.getElementById("city").getElementsByTagName("li");
        alert(lis.length);
    };
    document.getElementById("btn05").onclick = function () {
        var cityChildNodes = document.getElementById("city").childNodes;
        alert(cityChildNodes.length);
    };
    document.getElementById("btn06").onclick = function () {
        var phoneFirstChild = document.getElementById("phone").firstChild;
        alert(phoneFirstChild.innerHTML);
    };
    document.getElementById("btn07").onclick = function () {
        var bjParentNode = document.getElementById("bj").parentNode;
        alert(bjParentNode.innerHTML);
    };
    document.getElementById("btn08").onclick = function () {
        var androidPreviousSibling = document.getElementById("android").previousSibling;
        alert(androidPreviousSibling.innerHTML)
    };
    document.getElementById("btn09").onclick = function () {
        var userNameValue = document.getElementById("username").value;
        alert(userNameValue);
    };
    document.getElementById("btn10").onclick = function () {
        document.getElementById("username").value = "nano";
    };
    document.getElementById("btn11").onclick = function () {
        var bjInnerText = document.getElementById("bj").innerText;
        alert(bjInnerText);
        /**
         * innerText取出标签的文本内容，标签内容剔除
         * innerHTMl取出标签的所有内容，包括标签内容
         */
    }
}

document对象补充说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>createElement</title>
    <script type="text/javascript" src="createElement.js"></script>
</head>
<body>
    <div>new world</div>
</body>
</html>

window.onload = function () {   //页面加载后才能在body中添加div标签
    var divObj = document.createElement("div");
    //divObj.innerHTML = "nano";  //在内存中没有显示出来

    var textNodeObj = document.createTextNode("pero");
    divObj.appendChild(textNodeObj);
    document.body.appendChild(divObj);  //在body中添加div标签（子节点）
}

Neo丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb-JavaScript

JavaScript语言是用来完成网页的数据验证，运行在客户端，需要运行浏览器来解析执行JavaScript代码特点：①交互性，可以做信息的动态交互②安全性，不允许直接访问本地硬盘③跨平台性，只要是可以解释JS语言的浏览器都可以执行
复制链接

扫一扫