标签：03 元素 console log JavaScript getElementById var document

一.JavaScript概述

1.简介

JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。

它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。

脚本语言是为了缩短传统的编写-编译-链接-运行（edit-compile-link-run）过程而创建的计算机编程语言。

一个脚本通常是解释执行而非编译。

2.组成部分

ECMAScript：也叫解释器，充当翻译角色，这是JavaScript的核心部分；

DOM：文档对象模型（Document Object Model），DOM赋予了JavaScript操作 HTML 的能力，即Document操作；

BOM：浏览器对象模型（Browser Object Model），BOM赋予了JavaScript操作浏览器的能力，即Window操作

3.目的

用于创建具有交互性较强的页面

动态更改内容

数据验证

4.使用位置

1.head中

<head>
    <script>
        JavaScript代码
    </script>
</head>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS在Head中使用</title>
		<script>
			//JavaScript在Head中运行
			//弹框
			alert("hello world");
			//在浏览器的控制台打印信息
			console.log("在console打印。。。。");
		</script>
	</head>
	<body>
	</body>
</html>

2.body中

<body>
    <script>
        JavaScript代码
    </script>
</body>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS在body中使用</title>
	</head>
	<body>
		<script>
			alert("hello world");
		</script>
	</body>
</html>

3.JavaScript文件中

将JavaScript代码单独放到一个xxx.js文件中

HTML文件引用

/*弹出helloworld*/
alert("hello world");

<head>
    <script src="js路径"></script>
</head>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在外部JS文件中使用</title>
		<script type="text/javascript" src="../js/test.js" >
			/*如果引入了外部JS文件，引入文件的script标签内部的代码不起作用。
			 *如果需要运行其他的JS代码，重新写一组script标签
			 */
		</script>
		<script>
			alert("*****");
		</script>
	</head>
	<body>
	</body>
</html>

4.嵌入HTML标签的事件中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>结合事件使用</title>
	</head>
	<body>
		<!--
		 	button按钮
		 	onclick：鼠标单击事件
		-->	 
		<input type="button" onclick="alert('hello wolrd');" />
	</body>
</html>

5.如何运行

1.自动执行型

2.事件驱动型: 通过HTML元素事件触发执行,如按钮的onclick事件

二.JavaScript基础语法

1.变量

旧版

var a;

新版

let a;

变量的有number、string、boolean、undefined（未定义）、null（空值）、object六种

在JavaScript中，当一个变量未被初始化的时候，它的值为undefined

判断是哪种数据类型：typeof运算符

2.运算符

算数运算

名称	运算符
加	+
减	-
乘	*
除	/
求余	%
赋值	=
加等	+=
减等	-=
除等	/=
乘等	*=
求余等	%=
自增	++
自减	--

逻辑运算

名称	运算符	描述
与	&&	要求表达式左右两边的表达式同为true，整体结果才为true
或	\|\|	要求表达式左右两边的表达式只要有一个为true，整体结果就为true
非	！	将布尔值取反操作

关系运算

名称	运算符
等于	==
小于	<
小于或等于	<=
大于	>
大于或等于	>=
不等于	!=
值和类型相同	===

三目运算符： ?:

数据类型转换，从网页获取的数据都是字符串，如果进行运算需要转换成相应的number类型。

parseInt

parseFloat

3.控制流程

1.分支结构

if-else分支

var a=1;
var b=1;
if(a==b){
    document.write("相等");
}else{
    document.write("不相等");
}
//很明显，运行结果是相等
//这就是if-else的结构，和Java语言是一样的。

switch分支

var a=2;
switch(a){
  case 1:
    document.write("值为1");
    break;
  case 2:
    document.write("值为2");
    break;
  case 3:
    document.write("值为3");
    break;
  default:
     document.write("值不是3也不是2也不是1");
}

/*
	三种程序结构
		1)顺序结构
		2)分支结构
			if
			switch
		3)循环结构
**/
var score = 80;
/*分支结构if*/
if(score >=60) {
    console.log("及格");
} else {
    console.log("不及格");
}


/*分支结构switch 0~100*/
switch (parseInt(score/60)){
    case 1:
        console.log("及格");
        break;
    case 0:
        console.log("不及格");
        break;
}

2.循环结构

for循环

var a=0;
for(var i=1;i<=100;i++){
    a+=i;
}
document.write(a);
//上述代码是对1~100求和。

while循环

var a=0;
var i=1;
while(i<=100){
   a+=i;
   i++;
}
document.write(a);
//上述代码是对1~100求和。

do-while循环

var a=0;
var i=1;
do{
    a+=i;
  	i++;
}while(i<=100);
document.write(a);
//上述代码是对1~100求和。

break与continue关键字

break用于结束循环
continue用于结束本次循环

4.数组

var arr = ["123", 1, "111"];
var arr = new Array(数组的长度);
var arr = new Array(1, "2", "aaa");

通过下标访问数组的元素，下标范围0~length-1

数组的常用方法

concat数组合并
reverse数组逆序
push()数组末尾添加新元素
pop()删除数组最后的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义数组
        let arr1 = [1,'hello',false,null];
        console.log(arr1);
        let arr2 = new Array(5);
        console.log(arr2);
        let arr3 = [1,2,3,'hello'];
        console.log(arr3);

        //获取数组长度
        console.log("arr1的长度: " + arr1.length);
        //访问数组的元素,数组名[下标] 下标: 0~数组长度-1
        console.log("arr1的第一个元素: " + arr1[0]);
        console.log("arr1的最后一个元素: " + arr1[arr1.length - 1]);

        //数组遍历 - i 表示数组元素的下标
        for (let i = 0; i < arr1.length; i++) {
            console.log(arr1[i]);
        }
        console.log("------------------------------");

        let i = 0;
        while(i < arr1.length){
            console.log(arr1[i]);
            i++;
        }
        console.log("+++++++++++++++++++++++++++++")
    </script>
</head>
<body>

</body>
</html>

5.自定义函数

函数定义方式1

//参数列表不用写参数类型
function 函数名(参数列表) {
    函数体
    return 返回值;
}

函数定义方式2

var 函数名 = function(参数列表) {
    函数体
    return 返回值;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自定义函数</title>
		<script>
			/*求和1*/
			function sum1(a, b) {
				return a + b;
			}
			/*求和2*/
			var sum2 = function(a, b) {
				return a + b;
			}
			
			/*函数调用*/
			var sum = sum1(1, 5);
			console.log(sum);
			var sum2 = sum2(1, 5);
			console.log(sum2)
		</script>
	</head>
	<body>
	</body>
</html>

6.弹窗函数

alert弹框：这是一个只能点击确定按钮的弹窗

alert方法没有返回值，也就是说如果用一个变量去接受返回值，将会得到undefined。无论你点击“确定”还是右上角的那个“X“关闭。

alert("你好");

confirm弹框：这是一个可以点击确定或者取消的弹窗

confirm方法与alert不同，他的返回值是boolean，当你点击“确定”时，返回true，无论你点击“取消”还是右上角的那个“X“关闭，都返回false。

confirm("你好");

prompt弹框：这是一个你可以输入文本内容的弹窗

第一个参数是提示信息，第二个参数是用户输入的默认值。

当你点击确定的时候，返回用户输入的内容。当你点击取消或者关闭的时候，返回null。

prompt("你爱学习吗？","爱");

7.对象

JavaScript 对象是拥有属性和方法的数据

属性是与对象相关的值
方法是能够在对象上执行的动作

定义属性

属性名:属性值

访问属性

对象名.属性名

定义方法

方法名:function(参数列表) {
	//方法体
}

运行方法

对象名.方法名()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>对象</title>
		<script>
			/*定义一个表示人的对象
			 	属性  "属性名":属性值
			 	方法 "方法名":function(参数列表) {
			 			方法体
			 		}
			 * */
			var person = {
				"name":"zhangsan",
				"age":10,
				"gender":"male",
				"addr":"dxy",
				"walk":function() {
					console.log("person walk.....");
				}
			};
			
			/*
			 * 1.访问对象当中的属性
			 * 		对象名.属性名
			 * 		对象名[属性名]
			 * 2.访问对象当中的方法
			 * 		对象名.方法名()
			 * */
			console.log(person["age"]);
			person.walk();
		</script>
	</head>
	<body>
	</body>
</html>

三.DOM

1.DOM简介

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），DOM 模型被构造为对象的树。

通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML

JavaScript能够改变页面中的所有HTML属性

JavaScript能够对页面中的所有事件做出反应

JavaScript能够改变页面中的所有CSS样式

2.操作元素

document对象表示整个html文档,通过document对象可以获取到html文档中的所有内容。

1.向页面输出内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>向页面输出内容</title>
		<script>
			//通过document对象向页面输出内容
			document.write("hello world");
		</script>
	</head>
	<body>
	</body>
</html>

2.获取HTML元素

getElememtById('元素ID值');

用的最多，必须记住
该方法返回一个与那个有着给定id属性值的元素节点对应的对象

getElementsByClassName("类名");

可返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。
该方法也只有一个参数，该参数是标签的名字

getElementsByName('元素name值');

getElementsByTagName('标签名称');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1" class="c1">hello div1</div>
<p id="p1">hello</p>
<div name="n1">hello div3</div>
<div name="n1">hello div4</div>
<script>
    let elementById = document.getElementById("div1");
    console.log(elementById);
    let elementById1 = document.getElementById("p1");
    console.log(elementById1);
    console.log("+++++++++++++++++++++++++++++++");
    let elementsByClassName = document.getElementsByClassName("c1");
    for (let elementsByClassNameElement of elementsByClassName) {
        console.log(elementsByClassNameElement);
    }
    console.log("+++++++++++++++++++++++++++++++");
    let elementsByClassName1 = document.getElementsByClassName("n1");
    for (let elementsByClassName1Element of elementsByClassName1) {
        console.log(elementsByClassName1Element);
    }
    console.log("+++++++++++++++++++++++++++++++");
    let elementsByTagName = document.getElementsByTagName("div");
    for (let elementsByTagNameElement of elementsByTagName) {
        console.log(elementsByTagNameElement);
    }
</script>
</body>
</html>

3.普通元素内容操作

获取值

var strValue = document.getElementById('元素ID值').innerText;
var strValue = document.getElementById('元素ID值').innerHTML;

赋值（显示动态值）

document.getElementById('元素ID值').innerText = 动态值;
document.getElementById('元素ID值').innerHTML = 动态值;

innerText和innerHTML

innerText:只对文本处理
innerHTML:可以解析HTML标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">Hello world</div>
    <div id="div2">
        Hello HTML
        <span>Hello JS</span>
        Hello CSS
    </div>
    <script>
        let innerText = document.getElementById("div1").innerText;
        console.log(innerText);
        document.getElementById("div1").innerText = "Hello Java";
        console.log(document.getElementById("div2").innerText);
        console.log("++++++++++++++++++++++++++++++++++")
        console.log(document.getElementById("div2").innerHTML);
        document.getElementById("div2").innerHTML = "<a href='https://www.baidu.com'> 百度 </a>"
    </script>
</body>
</html>

4.表单元素内容操作

从元素获取值：var strValue = document.getElementById('表单元素id值').value;

给元素赋值(显示动态值)： document.getElementById('表单元素id值').value = 动态值;

注意：从表单元素中获取的值都是字符串类型，如需要数值计算需要进行数据类型转换

parseInt
parseFloat

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <from action="" method="post">
        用户名 <input type="text" id="username" value="admin" /><br/>
        密码 <input type="password" id="password" value="1234"/> <br>
    </from>

    <script>
        console.log(document.getElementById("username").value);
        console.log(document.getElementById("password").value);
        document.getElementById("username").value = "root";
    </script>
</body>
</html>

5.属性操作

获取属性 getAttribute("属性名");

设置属性 setAttribute("属性名","属性值");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素属性操作</title>
		<style>
			.pclass {
				border: 1px solid black;
				color: yellow;
				text-align: center;
			}
		</style>
		<script>
			/*
			 	元素属性操作
			 	1)获取元素的属性的值
			 		元素对象.getAttribute("属性名");
			 	2)设置元素的属性
			 		元素对象.setAttribute("属性名", "属性值");
			*/
			function init() {
				/*
				 	获取所有p元素的id属性的值并打印
				 * */
				var allp = document.getElementsByTagName("p");
				for(var index = 0; index < allp.length; index++) {
					//获取元素的属性的值
					console.log(allp[index].getAttribute("id"));
					//设置元素的属性
					allp[index].setAttribute("class", "pclass");
				}
			}
		</script>
	</head>
	<body onl oad="init()">
		<p id="p1">这是一个段落1</p>
		<p id="p2">这是一个段落2</p>
	</body>
</html>

6.元素操作

如需向 HTML DOM 添加新元素，您必须首先创建这个元素（元素节点），然后将其追加到已有元素。因为是树结构

createElement()

创建元素节点

appendChild()

把新的子节点添加到指定节点
如需向 HTML DOM 添加新元素,首先必须创建该元素，然后把它追加到已有的元素上
新元素作为父元素的最后一个子元素进行添加

removeChild()

删除子节点

replaceChild()

替换子节点

insertBefore()

在指定的子节点前面插入新的子节点

createTextNode()

创建文本节点

实例:添加一行元素,可以通过每一行的删除按钮删除

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>元素操作</title>
    <style>
        #main {
            margin: 0 auto;/*设置整个盒子居中,一定要设置宽度*/
            width: 500px;
        }

        p {
            text-align: center;/*设置段落中的内容居中*/
        }

        table {
            width: 500px;
            border-collapse: collapse;/*去除边框中间的空白区域*/
        }

        table, tr, td {
            border: 1px solid black;
        }
    </style>
    <script>
        //在表格中添加信息
        function addItem() {
            /*
                 如何为表格添加信息?
                     1.在表格中添加信息,就是添加行;
                     2.行当中要添加单元格
                     3.单元格中添加信息 按钮

                 主要操作
                     1.获取表单中的信息    document.getElementById("id").value  createTextNode()
                     2.创建按钮    createElement()
                     3.创建单元格,在单元格中添加相关内容 createElement() appendChild()
                     4.创建行,在行中添加单元格 createElement() appendChiled()
                     5.将行添加到表格中 appendChild()
             * */
            //创建行
            var line = document.createElement("tr");

            //创建存放姓名的单元格
            var tdName = document.createElement("td");
            //创建一个表示姓名的文本节点
            var txtName = document.createTextNode(document.getElementById("username").value);
            //将表示姓名的文本节点添加到存放姓名的单元格中
            tdName.appendChild(txtName);

            //创建存放年龄的单元格
            var tdAge = document.createElement("td");
            //创建一个表示年龄的文本节点
            var txtAge = document.createTextNode(document.getElementById("age").value);
            //将表示年龄的文本节点添加到存放年龄的单元格中
            tdAge.appendChild(txtAge);

            //创建存放电话的单元格
            var tdTel = document.createElement("td");
            //创建一个表示电话的文本节点
            var txtTel = document.createTextNode(document.getElementById("tel").value);
            //将表示年龄的文本节点添加到存放年龄的单元格中
            tdTel.appendChild(txtTel);

            //创建存放删除按钮的单元格
            var tdDel = document.createElement("td");
            //创建删除按钮
            var btnDel = document.createElement("input");
            //设置按钮的属性
            btnDel.setAttribute("type", "button");
            btnDel.setAttribute("value", "删除");
           // btnDel.onclick = delTem;//为删除按钮绑定单击事件
            //btnDel.setAttribute("onclick","delTem");   不起作用,setAttribute无法访问到父节点
           btnDel.addEventListener("click",delTem);
            //将删除按钮添加到存放删除按钮的单元格中
            tdDel.appendChild(btnDel);

            //将单元格添加到行中
            line.appendChild(tdName);
            line.appendChild(tdAge);
            line.appendChild(tdTel);
            line.appendChild(tdDel);

            //将行添加到表格中
            var tb = document.getElementById("tb1");
            tb.appendChild(line);
        }

        function delTem() {
            /*
                 存在的问题,如何删除按钮所在的行
                     父元素.remove(子元素);
                     table.remove(行)
                     如何获取table
                     如何获取按钮所在的行
                     this 表示调用当前方法的对象
             * */
            var line = this.parentNode.parentNode;
            var tb = this.parentNode.parentNode.parentNode;
            tb.removeChild(line);
        }
    </script>
</head>
<body>
<div id="main">
    <div id="divform">
        <form>
            <p>
                <label>姓名</label>
                <input type="text" id="username" />
            </p>
            <p>
                <label>年龄</label>
                <input type="text" id="age" />
            </p>
            <p>
                <label>电话</label>
                <input type="text" id="tel"/>
            </p>
            <p>
                <button type="button" onclick="addItem()">添加</button>
            </p>
        </form>
    </div>
    <hr/>
    <div id="divtable">
        <table id="tb1">
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>电话</td>
                <td>操作</td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

3.操作css

HTML DOM允许JavaScript改变HTML元素的样式

document.getElementById(id).style.property=新样式

document.getElementById('元素的id').style.color="red"

document.getElementById('元素的id').style

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS操作</title>
		<style>
			#p1 {
				color: black;
				border: 1px solid black;
				background-color: blue;
			}
		</style>
		<script>
			function test() {
				//设置元素的CSS
				document.getElementById("p1").style.color = "red";
			}
		</script>
	</head>
	<body onl oad="test()">
		<p id="p1">这是一个段落</p>
	</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    .c1{
        color: yellow;
        border: 2px solid black;
    }
</style>
</body>
    <div id="div1" class="c1">Hello Java</div>
<script>
    document.getElementById("div1").style.color = "red";
</script>
</html>

4.事件驱动

事件：发生在 HTML 元素上的事情

HTML事件列表

onclick 鼠标点击某个对象
onblur 元素失去焦点
onfocus 元素获得焦点
onabord 图像加载被中断
ondbclick 鼠标双击某个事件
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onmousedown 某个鼠标按键按下
onkeyup 某个键盘的键被松开
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onpouseup 某个鼠标按键被松开

在事件发生时，可以执行一些JS代码。

全选反选案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全选案例</title>
    <script>
        /*
             1.实现页面；
             2.确定复选框选中和没有选中如何确定
                 dom对象当中的checked属性
                     |----true 选中
                     |----false    没有选中
             3.分析
                 全选----将所有checkbox的checked熟悉设置为true
                 全不选--将所有checkbox的checked熟悉设置为false
                 反选----对checkbox当前的checked属性取反
         * */
        //       function testCheckBox() {
        //          alert(document.getElementById("test").checked);
        //       }

        /*
             购物车
         * */
        //全选
        function checkAllFun() {
            //找出表示爱好的四个checkbox
            var hobbys = document.getElementsByClassName("hobby");
            //设置每个checkbox的checked为true
            for(var index = 0; index < hobbys.length; index++) {
                hobbys[index].checked = true;
            }
        }
        //全不选
        function checkNoFun() {
            //找出表示爱好的四个checkbox
            var hobbys = document.getElementsByClassName("hobby");
            //设置每个checkbox的checked为false
            for(var index = 0; index < hobbys.length; index++) {
                hobbys[index].checked = false;
            }
        }
        //反选
        function checkOptFun() {
            //找出表示爱好的四个checkbox
            var hobbys = document.getElementsByClassName("hobby");
            //设置每个checkbox的checked为当前checked属性取反之后的值
            for(var index = 0; index < hobbys.length; index++) {
                hobbys[index].checked = !hobbys[index].checked;
            }
        }
        /*
             ArrayList   size()
             int len = list.size();
             for(int index = 0; index < len; index++) {
                 list.get(index);
             }
         *
         * */
        //全选/全不选
        function checkAllOrNot() {
            //找出表示爱好的四个checkbox
            var hobbys = document.getElementsByClassName("hobby");
            //获取表示全选/全不选的checkbox的状态
            //var state = document.getElementById("allOrNot").checked;
            //设置每个checkbox的checked为"全选/全不选"这个复选框的状态
            for(var index = 0; index < hobbys.length; index++) {
                //hobbys[index].checked = state;
                hobbys[index].checked = document.getElementById("allOrNot").checked;
            }
        }
    </script>
</head>
<body>
<form>
    <p>
        你喜欢的运动是?<input id="allOrNot" type="checkbox" onchange="checkAllOrNot()" />全选/全不选
    </p>
    <p>
        <input type="checkbox" class="hobby" />足球
        <input type="checkbox" class="hobby" />篮球
        <input type="checkbox" class="hobby" />乒乓球
        <input type="checkbox" class="hobby" />拳击
    </p>
    <p>
        <button type="button" onclick="checkAllFun()">全选</button>
        <button type="button" onclick="checkNoFun()">全不选</button>
        <button type="button" onclick="checkOptFun()">反选</button>
        <button type="submit">提交</button>
    </p>
</form>
<!--<input id="test" type="checkbox"  />
<input type="button" onclick="testCheckBox()" />-->
</body>
</html>

5.使用DOM操作进行表单验证

概念：在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证

常见验证类型

非空验证
内容验证
- 长度验证
- 内容格式验证（正则表达式）

非空验证案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    onsubmit 当表单提交时运行脚本
-->
<form action="http://www.baidu.com" method="post" onsubmit=" return judgeAll()">
    <table>
        <tr>
            <td>
                <label>账号</label>
            </td>
            <td>
                <input type="text" id="username" placeholder="请输入账号" onblur="judgeNull('username','usernameInfo','账号不能为空')" onfocus="clearInfo('usernameInfo')"/>
            </td>
            <td>
                <span id="usernameInfo"></span>
            </td>
        </tr>
        <tr>
            <td>
                <label>密码</label>
            </td>
            <td>
                <input type="password" id="password"  placeholder="请输入密码" onblur="judgeNull('password','passwordInfo','密码不能为空')" onfocus="clearInfo('passwordInfo')"/>
            </td>
            <td>
                <span id="passwordInfo"></span>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <button type="submit">登录</button>
            </td>
        </tr>
    </table>

    <script>
        //非空验证
        function judgeNull(id,infoId,msg){
            if (document.getElementById(id).value === ""){
               document.getElementById(infoId).innerText = msg;
               return false;
            }
            return true;
        }

        //清除记录
        function clearInfo(infoId){
            document.getElementById(infoId).innerText = "";
        }

        //判断都不为空
        function judgeAll(){
            if(judgeNull('username','usernameInfo','账号不能为空') === false){
                return false;
            }

            if(judgeNull('password','passwordInfo','密码不能为空') === false){
                return false;
            }

        }
    </script>
</form>
</body>
</html>

6.正则表达式

//正则表达式 长度是6-10位 只能包含数字
let reg = /^[0-9]{6,10}$/; //规则,^$代表从开头到结尾,^开头元素 $结尾元素 []代表范围 {}代表长度
let str1 = "12344500";
let str2 = "1234456";
let str3 = "a1234456";
console.log(reg.test(str1));
console.log(reg.test(str2));
console.log(reg.test(str3));

概念：使用单个字符串来描述、匹配一系列符合某个句法规则的字符串

语法格式

元字符
- . 匹配除换行符以外的任意字符
- \w匹配字母或数字或下划线
- \s匹配任意的空白符
- \d匹配数字
- \b匹配单词的开始或结束
- ^匹配字符串的开始
- $匹配字符串的结束
重复次数
- *重复零次或更多次
- +重复一次或更多次
- ?重复零次或一次
- {n}重复n次
- {n,}重复n次或更多次
- {n,m}重复n到m次
字符转义：如果你想查找元字符本身的话，比如你查找.或者*，就出现了问题，你没办法指定它们，因为它们会被解释成别的意思。这时你就得使用\来取消这些字符的特殊意义。因此，你应该使用\和*。当然，要查找\本身，你也得用\\。

如何在JavaScript中使用

var reg=表达式;
reg.test(相关变量);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>正则表达式</title>
		<script>
			/*
			 	目前校验存在的问题
			 		用户名:6~10位字母、数字，第一个字符必须是字母
			 			1)判断长度
			 			2)判断第一个字符是否为字母
			 			3)判断每个字符是否都是字母或者数字
			 		密码：6~10位数字
			 	正则表达式:使用单个字符串来描述、匹配一系列符合某个句法规则的字符串
			 		|----理解为一个特殊字符串
			 		|----描述了一系列的规则
			 		|----正则表达式不是JavaScript特有的
			 	如何使用正则表达式
			 		var reg = 正则表达式;
			 		reg.test("被判断的字符串");
			 			|----true被判断的字符串通过了校验
			 			|----false被判断的字符串没有通过校验
			 	如何写正则表达式-----正则表达式的书写规则
			 		^	匹配字符串的开始
			 		$	匹配字符串的结尾
			 		[]	匹配一个字符(不管方括号中有多少内容)
			 		
			 		{n} 表示n位
			 		{n,} 最少n位
			 		{n,m} n~m位
			 		* 0次或多次
			 		+ 1次或多次
			 		? 0次或1次
			 		
			 		\w 字母数字下划线
			 		\d 数字
			 * */
			var reg1 = /^[0-9]$/;//0-9 单个字符
			console.log(reg1.test("a"));//false
			console.log(reg1.test("1"));//true
			console.log(reg1.test("1111"));//false
			var reg2 = /^[0-9]{6}$/;//6位数字
			console.log(reg2.test("123456777"));
			var reg3 = /^[0-9]*$/;//0次或多次
			console.log(reg3.test("h"));
			var reg4 = /^[0-9]+$/;//1次或多次
			console.log(reg4.test("1111"));
			var reg5 = /^[0-9]?$/;//0次或1次
			console.log(reg5.test("11"));
			var reg6 = /^[0-9a-zA-Z]{6,10}$/;
			console.log(reg6.test("a12345"));
			var reg7 = /^[\w]{6,10}$/;//6~10位字母数字下划线
			console.log(reg7.test("abcd_1"));
			var reg8 = /^[\d]{6,10}$/;//6~10位数字
			console.log(reg8.test("88888"));
		</script>
	</head>
	<body>
	</body>
</html>

7.使用正则表达式完成表单验证的内容验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://www.baidu.com" method="post" onsubmit="return checkAll();">
    <table>

        <tr>
            <td>
                <label>账号</label>
            </td>
            <td>
                <input type="text" id="username" placeholder="请输入账号" autofocus="autofocus"  onblur="checkInfo('username', 'usernameInfo',/^[a-zA-Z][\w]{5,9}$/,'6~10位字母、数字、下划线，第一个字符必须是字母')" onfocus="clearInfo('usernameInfo')" />
            </td>
            <td>
                <span id="usernameInfo"></span>
            </td>
        </tr>
        <tr>
            <td>
                <label>密码</label>
            </td>
            <td>
                <input type="password" id="password" placeholder="请输入密码" onblur="checkInfo('password', 'passwordInfo',/^[\d]{6,10}$/,'6~10位数字')" onfocus="clearInfo('passwordInfo')" />
            </td>
            <td>
                <span id="passwordInfo"></span>
            </td>
        </tr>
        <tr>
            <td>
                <label>重复密码</label>
            </td>
            <td>
                <input type="password" id="passwordAgain" placeholder="请重复输入密码" onblur="checkPasswordAgain('password', 'passwordAgain', 'passwordAgainInfo','两次密码不一致')" onfocus="clearInfo('passwordAgainInfo')" />
            </td>
            <td>
                <span id="passwordAgainInfo"></span>
            </td>
        </tr>
        <tr>
            <td>
                <label>邮箱</label>
            </td>
            <td>
                <input type="text" id="email" placeholder="请输入电子邮箱" onblur="checkInfo('email', 'emailInfo',/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,'邮箱格式不正确')" onfocus="clearInfo('emailInfo')" />
            </td>
            <td>
                <span id="emailInfo"></span>
            </td>
        </tr>
        <tr>
            <td>
                <label>手机号</label>
            </td>
            <td>
                <input type="text" id="tel" placeholder="请输入手机号" onblur="checkInfo('tel', 'telInfo',/^\d{11}$/,'手机号格式不正确')" onfocus="clearInfo('telInfo')"/>
            </td>
            <td>
                <span id="telInfo"></span>
            </td>
        </tr>
        <tr>
            <td>
                <label>qq</label>
            </td>
            <td>
                <input type="text" id="qq" placeholder="请输入qq" onblur="checkInfo('qq', 'qqInfo',/[1-9][0-9]{4,}/,'QQ号格式不正确')" onfocus="clearInfo('qqInfo')"/>
            </td>
            <td>
                <span id="qqInfo"></span>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <button type="submit">注册</button>
            </td>
        </tr>
    </table>
</form>
<script>
    /*
            账号：6~10位字母、数字、下划线，第一个字符必须是字母
               /^[a-zA-Z][\w]{5,9}$/
            密码：6~10位数字
               /^[\d]{6,10}$/
          * */
    //检验内容
    function checkInfo(ID,infoID,jug,msg){
        let str = document.getElementById(ID).value;
        if(!jug.test(str)){
            document.getElementById(infoID).innerText = msg;
            return false;
        }
    }

    //清除提示
    function clearInfo(infoID){
        document.getElementById(infoID).innerText = "";
    }

    //检查重复密码
    function checkPasswordAgain(oldPasswordID,ID,infoID,msg){
        let str = document.getElementById(ID).value;
        if(str !== document.getElementById(oldPasswordID).value){
           document.getElementById(infoID).innerText = msg;
           return false;
        }
    }

    //检测全部元素
    function checkAll(){
        if(checkInfo('username', 'usernameInfo',/^[a-zA-Z][\w]{5,9}$/,'6~10位字母、数字、下划线，第一个字符必须是字母') === false
            || checkInfo('password', 'passwordInfo',/^[\d]{6,10}$/,'6~10位数字') === false
            || checkInfo('tel', 'telInfo',/^\d{11}$/,'手机号格式不正确' )===false
                || checkInfo('qq', 'qqInfo',/[1-9][0-9]{4,}/,'QQ号格式不正确')=== false
                ||checkPasswordAgain('password', 'passwordAgain', 'passwordAgainInfo','两次密码不一致') === false){
            alert("输入的信息有误,请核对后输入")
            return false;
        }
        return true;
    }
</script>
</body>
</html>

四.BOM

1.window

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一。
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。一些例子：
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口（80 或 443）
- location.protocol 返回所使用的 web 协议（http:// 或 https://）
- location.href 属性返回当前页面的 URL 十分重要
- location.assign() 方法加载新的文档

2.JavaScript定时器

定义定时器：

setInterval('调用函数',毫秒时间)：每间隔固定毫秒值就执行一次函数

setTimeout('调用函数',毫秒时间)：在固定时间之后执行一次调用函数

关闭定时器：

clearInterval(定时器名称)

clearTimeout(定时器名称)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作CSS</title>
    <script>
        var timeout = setTimeout(function () {
            console.log("***************");
        }, 2000);
    </script>
</head>
<body>
    <button type="button" onclick="clearTimeout(timeout)">click</button>
</body>
</html>

显示时间案例

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<div id="times">

	</div>
	<script type="text/javascript">
		function getD1() {
			//当前时间
			var date = new Date();
			//格式化
			var d1 = date.toLocaleString();
			//获取div
			var div1 = document.getElementById("times");
			div1.innerHTML = d1;
		}

		//使用定时器实现每一秒写一次时间
		setInterval("getD1();",1000);
		
	</script>

 </body>
</html>

标签：03,元素,console,log,JavaScript,getElementById,var,document
From： https://www.cnblogs.com/AaaalexQaQ/p/17581139.html

03_JavaScript