JavaScript基础

一、概述
二、嵌入方法
- 1、内嵌式
- 2、外链式
- 3、行内式
三、语句
四、注释
五、变量
六、JavaScript 保留关键字
七、JavaScript 作用域
- 1、JavaScript 局部变量
- 2、JavaScript 全局变量
八、数据类型
- 1、判断类型
- 2、数字类型（Number）
- 3、字符串型（string）
- 4、布尔类型（boolean）
- 5、null（空）
- 6、undefined（未定义）
- 7、数组
- - 7.1 定义数组的方法：
  - 7.2 数组的操作
- 8、函数
- 9、字典
- 10、js的序列化和反序列化
- 11、转义
- 12、eval
- 13、时间
- 14、面向对象
- 15、原型
- 16、运算符
- - 16.1 算术运算符
  - 16.2 比较运算符
  - 16.3 赋值运算符
  - 16.4 逻辑运算符
  - 16.5 三元运算符（三目运算符）
- 17、流程控制语句
- - 17.1 if语句
  - 17.2 if else语句
  - 17.3 if.....else if......else语句
  - 17.4 switch语句:多分支语句
  - 17.5 循环结构
- 18、JS操作DOM
- - 18.1 什么是DOM？
  - 18.2 DOM查找元素
  - - 18.2.1 查找
    - 18.2.2 操作

一、概述

JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
诞生于1995年，当时的主要目的是验证表单的数据是否合法。
JavaScript本来应该叫Livescript，但是在发布前夕，想搭上当时超热的java顺风车，临时把名字改为了JavaScript。（也就是说js跟java没有关系，当时只是想借助java的名气）。
JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等。JavaScript是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比如： Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。

二、嵌入方法

1、内嵌式

理论上js可以写在任何第一个地方但是一般写在head标签里或者body下

<script type="application/javascript">
alert("内嵌式");
</script>
<script>alert("内嵌式");</script>

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ZY技术分享</title>
		<script type="application/javascript">
		alert("ZY技术分享");
		</script>
	</head>
	<body>
	</body>
</html>

输出结果：
在这里插入图片描述

2、外链式

首先新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html页面中。
<script src="js文件路径地址">这里不能写js语句</script>
这里我们新建一个js文件，这里我创建了一个js.js的文件：
js.js实现代码

alert('ZY技术分享');

这里仅输出ZY技术分享
index.html实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ZY技术分享</title>
		<script type="text/javascript" src="js/js.js"></script>
	</head>
	<body>
	</body>
</html>

输出结果：
在这里插入图片描述

3、行内式

直接书写在标签身上，是一个简写的事件，所以又称之为事件属性。onclick单击事件

<input type="button" value="登陆" onclick="alert('登陆成功');">
<button onclick="alert('提交成功');">提交</button>

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ZY技术分享</title>
		<!--<script type="text/javascript" src="js/js.js"></script>-->
	</head>
	<body>
	<input type="button" value="登陆" onclick="alert('登陆成功');">
	<button onclick="alert('提交成功');">提交</button>
	</body>
</html>

输出结果：

三、语句

1.在编程语言中，这些编程指令被称为语句。
JavaScript 程序就是一系列的编程语句。
注释： 在 HTML 中，JavaScript 程序由 web 浏览器执行。
2.JavaScript 语句由以下构成：
值、运算符、表达式、关键词和注释。
3.用分号（;）分隔JavaScript语句。

四、注释

单行注释： // 注释语句快捷键ctrl+/
多行注释： /* 注释语句 */ 快捷键ctrl+shift+/
注意： 多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！

五、变量

变量是用于存储信息的"容器"
javascript单双引号没区别
var a=’ZY’;
控制台打印案例：
实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ZY技术分享</title>
		<!--<script type="text/javascript" src="js/js.js"></script>-->
		<script>
			var name="ZY"
			console.log(name);
		</script>
	</head>
	<body>
	<!--<input type="button" value="登陆" οnclick="alert('登陆成功');">
	<button οnclick="alert('提交成功');">提交</button>-->
	</body>
</html>

输出结果：
在这里插入图片描述

六、JavaScript 保留关键字

JavaScript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 JavaScript 以后扩展使用。
在这里插入图片描述

七、JavaScript 作用域

1、JavaScript 局部变量

局部作用域，变量在函数内声明，变量为局部作用域。

function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

案例使用：
实现代码：

<html>
	<head>
		<meta charset="UTF-8">
		<title>ZY技术分享</title>
		<!--<script type="text/javascript" src="js/js.js"></script>-->
		<script>
			function getname(){
			var name="ZY"
			console.log(name);
			}
			getname();
		</script>
	</head>
	<body>
	<!--<input type="button" value="登陆" οnclick="alert('登陆成功');">
	<button οnclick="alert('提交成功');">提交</button>-->
	</body>
</html>

输出结果：
在这里插入图片描述
这里补充： function以及console.log
JavaScript中的function是一种用来封装可重用代码的构造。它允许您定义一块代码块，其可以在需要的时候被调用。函数可以带有参数，以接收输入值，并可以返回一个值作为结果。
以下是一个简单的JavaScript函数的例子：

function sayHello(name) {
  console.log("Hello, " + name + "!");
}

sayHello("John"); // 输出：Hello, John!

在上面的例子中，sayHello是一个函数名，它定义了一个函数，其中有一个参数name。函数体内的代码使用console.log打印一条包含参数name的信息。
console.log是JavaScript的一个函数，它用于在控制台输出消息。在浏览器中，可以使用开发者工具的控制台来查看console.log输出的消息。在Node.js环境中，console.log会将消息打印到终端。
以下是一个使用console.log的例子：

console.log("Hello, World!"); // 输出：Hello, World!

console.log可以接受多个参数，并将它们打印为一个字符串。例如：

var firstName = "John";
var lastName = "Doe";

console.log("Full name:", firstName, lastName); // 输出：Full name: John Doe

上面的例子中，console.log接受了三个参数，并将它们连接成一个字符串进行输出。它在每个参数之间自动添加了一个空格。

2、JavaScript 全局变量

变量在函数外定义，即为全局变量。
全局变量有全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}

案例使用：
实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ZY技术分享</title>
		<!--<script type="text/javascript" src="js/js.js"></script>-->
		<script>
			name="ZY"
			function getname(){
//			var name="ZY"
			console.log(name);
			}
			getname();
		</script>
	</head>
	<body>
	<!--<input type="button" value="登陆" οnclick="alert('登陆成功');">
	<button οnclick="alert('提交成功');">提交</button>-->
	</body>
</html>

输出结果：
在这里插入图片描述

八、数据类型

数值型： number（凡是数字都是数值型，不区分整数和小数）
字符串： string（凡是引号包裹起来的内容全部都是字符串）
布尔： boolean（true、false）
对象类型： object（特殊取值null）
未定义型： undefined
对象类型数组字典
案例使用：
在这里插入图片描述
这里新建一个html文件，然后运行在控制台上进行使用即可。

1、判断类型

var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};　

alert(typeof a)  ------------> string
alert(typeof b)  ------------> number
alert(typeof c)  ------------> object
alert(typeof d)  ------------> object
alert(typeof e)  ------------> function
alert(typeof f)  ------------> function

2、数字类型（Number）

只有一种数字类型，数字可以是小数，也可以的整数
以0开头 默认使用8进制来表示我的这个数字
以0x开头 默认使用16进制来表述我的这个数字
如果以-开头 默认以负数
如果我带有e： 以科学计数法来解析我的这个数字

parseInt(..) 将某值转换成数字，不成功则NaN
parseFloat(..) 将某值转换成浮点数，不成功则NaN
特殊值：
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。
案例使用判断：
在这里插入图片描述

3、字符串型（string）

字符串是存储字符的变量，用来表示文本的数据类型，程序中的字符串是包含单引号/双引号的，由单引号来界定我双引号中包含的字符串
obj.length 长度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight()
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项

$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号
案例判断使用：
在这里插入图片描述

4、布尔类型（boolean）

一般是用在流程控制语句中，字符串和数字类型都是无穷多个，然而我们的布尔数据类型只有两个：true 和 false
这两个值一般用于说明某个事物是真或者假
js一般用布尔类型来比较所得到的结果
布尔类型仅包含真假，
== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且
案例使用：
在这里插入图片描述

5、null（空）

关键字null是一个特殊的值，它表示变量为空值，用来定义空的或者是不存在的引用。
如果试图去引用一个没有定义的值，就会返回一个null。
这里注意一点：null并不等于"" 或者0

6、undefined（未定义）

这个值表示变量不含有值，没有定义的值，或者被定义了一个不存在的属性值

！null和undefined区别：
null它表示一个变量被赋予一个空值，而undefined是表示变量还没有被赋值
案例使用及其判断：
在这里插入图片描述

7、数组

数组内可以存放任意数据类型的数据（本质上它也是对象）
数组元素不赋值的情况下值为undefined
如果数组打印的时候，元素不赋值""
访问数组范围之外的元素，不会出现越界的问题，undefined
定义数组大小，照样可以添加更多元素

7.1 定义数组的方法：

var arr=[]//定义一个空数组
var arr=[10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"]]//定义的同时赋值
var arr=new Array();//定义一个空数组
var arr = new Array(10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"])//定义的同时赋值
var arr=new Array(10)//定义一个长度为10的数组

7.2 数组的操作

obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序

8、函数

JavaScript 函数语法
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数：

var x = myFunction(7, 8);        
// 调用函数，返回值被赋值给 x
function myFunction(a, b) {
    return a * b;                
    // 函数返回 a 和 b 的乘积
}

普通函数：

function func(arg){
	return arg+1;
		}
		
	var result = func(1);
	console.log(result);		var result = func(1);
	console.log(result);

使用案例：
实现代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
    	function get_name(arg){
			var name=1+arg;
			return name;
			}

		console.log(get_name(2));
		
    </script>
</head>
<body>
</body>
</html>

输出结果：
在这里插入图片描述
匿名函数（没有名字的函数称为匿名函数）

setInterval(function(){
		console.log(123);
},500)

使用案例：
实现代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
		setInterval(function(){
			console.log(1);
		},500);
    </script>
</head>
<body>
</body>
</html>

输出结果：
在这里插入图片描述
这里0.5秒输出一个1，前面为输出的次数。
自执行函数 （创建函数并且自动执行）

(function(arg){
	console.log(arg);
})(1);

案例使用：
实现代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
		(function(arg){
			console.log(arg);
		})(1);
    </script>
</head>
<body>
</body>
</html>

输出结果：
在这里插入图片描述

9、字典

字典是一种以键-值对形式存储数据的数据结构
var dict = {'k1':"moonsec",'k2':'moon','age':18};
输出字典元素
for(var item in dict){console.log(dict[item]);}
获取指定元素
dict['age'] 获取key为age的元素
赋值
dict['age']=10
删除元素
delete dict['one']; delete dict.age;
使用过程：
在这里插入图片描述

10、js的序列化和反序列化

Json与字符串的转换
把对象转为字符串
JSON.stringify()
把字符串转为数组
newli = JSON.parse()

序列化 即js中的Object转化为字符串
使用toJSONString
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
使用stringify
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
反序列化即js中JSON字符串转化为Object
使用过程：
在这里插入图片描述

11、转义

decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符
encodeURIComponent( ) 转义URI组件中的字符
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出

12、eval

eval() 函数可计算某个字符串，并执行其中的的 JavaScript代码。
在这里插入图片描述

13、时间

Date 对象
var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-???)
myDate.getMonth(); //获取当前月份(0-11,0代表1月) 所以获取当前月份是 myDate.getMonth()+1;
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期 X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime = myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
加一天
var dateTime = new Date();
dateTime=dateTime.setDate(dateTime.getDate()+1);
dateTime=new Date(dateTime);
dateTime=dateTime.setDate(dateTime.getDate()+1);
在这里插入图片描述

14、面向对象

JavaScript是一种基于原型的语言，它没类的声明语句，比如C+ +或Java中用的。这有时会对习惯使用有类申明语句语言的程序员产生困扰。相反，JavaScript可用方法作类。定义一个类跟定义一个函数一样简单。在下面的例子中，我们定义了一个新类Person。
第一种方法

function Person(name) {
     //构造函数里面的方法和属性
    this._name = name;
    this.getName = function () {
         console.log(this._name);
     };
     this.setName = function (name) {
         this._name = name;
     };
 }
 
 var p = new Person("张三");
 p.getName();  // 张三
 p.setName("李四");
 p.getName();  // 李四

对于上述代码需要注意：
Person充当的构造函数
this代指对象
创建对象时需要使用 new
实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
		function Person(name){
			this.name=name;
			this.get_name = function(){
				console.log(this.name);
			}
			this.set_name=function(name){
				this.name=name
				console.log(this.name);
			}
		}
		
		var p1 =new Person('ZY');
		p1.get_name();
		p1.set_name('Developer');
		</script>
	</head>
	<body>
	</body>
</html>

输出结果：
在这里插入图片描述
然后，我们这里让其仅仅输出修改之后的值，于是：
实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
		function Person(name){
			this.name=name;
			this.get_name = function(){
				console.log(this.name);
			}
			this.set_name=function(name){
				this.name=name
				return this.name;
			}
		}
		
		var p1 =new Person('ZY');
		//p1.get_name();
		p1.set_name('Developer');
		p1.get_name();
		</script>
	</head>
	<body>
	</body>
</html>

输出结果：
在这里插入图片描述
第二方法

// 定义类class Person {
     //类的构造函数，实例化的时候执行，new的时候执行
     constructor(name) {
         this._name = name;
     }
     getName() {
         console.log(this._name);
     }
     setName(name) {
        this._name = name
    }
}
 let p = new Preson('张三')
 p.getName();  // 张三
 p.setName('李四');
 p.getName();  // 李四

实现原代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			class Person{
				constructor(name){	
					this.username=name;
				}
				getName(){
					console.log(this.username);
				}
				setName(name){
					this.username=name;
				}
			}			
			var p1 =new Person('ZY');
			//p1.getName();
			p1.setName('Developer');
			p1.getName();
		</script>
	</head>
	<body>
	</body>
</html>

输出结果：
在这里插入图片描述

15、原型

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
这个属性对应着一个对象，这个对象就是我们所谓的原型对象
如果函数作为普通函数调用时 prototype没有任何作用
当函数以构造函数调用时，它所创建的对象中都会有一个隐含的的属性
指向该构造函数的原型我们可以通过__proto__来访问该属性
我们可以将对象中公有的内容，统一设置到原型对象中

function Persion(username,age){
}
//console.log(Persion.prototype);
var p = new Persion();
console.log(p.__proto__ == Persion.prototype);

定义原型变量和原型变量

function Persion(username,age){

}
//console.log(Persion.prototype);
Persion.prototype.a = '女';
Persion.prototype.Sayname=function(){
	return Persion.name;
}
var p1 = new Persion('moonsec');
var p2 = new Persion();
alert(p1.Sayname());

16、运算符

用于执行程序代码运算，会针对一个以上操作数来进行

16.1 算术运算符

+ - * / % ++ --
*字符串拼接使用“+”

16.2 比较运算符

<
>
==
！=
<=
>=
=== 全等于： 将数值以及数据类型一并比较
！==不全等于： 将数值以及数据类型一并比较

16.3 赋值运算符

=
+=
-=
*=
/=
%=
a=a+2;==>a+=2
a=a-2;==>a-=2
a=a*2;==>a*=2
a=a/2;==>a/=2
a=a%2;==>a%=2

16.4 逻辑运算符

&& 全真为真
|| 一个为真就是真
！ 取反

16.5 三元运算符（三目运算符）

表达式1?表达式2:表达式3
当我的表达式1成立时执行表达式2 否则执行表达式

var max = 2>1?'>':'<';
console.log(max);

17、流程控制语句

17.1 if语句

if(条件){
函数体
}

17.2 if else语句

if(条件){
函数体1
}else{
函数体2
}

17.3 if…else if…else语句

if(条件1){

}else if(条件2){

}else if(条件n){

}else{

}

17.4 switch语句:多分支语句

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
} 

switch (new Date().getDay()) {
    case 6:
        text = "今天是周六";
        break; 
    case 0:
        text = "今天是周日";
        break; 
    default: 
        text = "期待周末~";
}

17.5 循环结构

while循环
先判断条件当条件成立再执行

while(循环成立条件){
....
}

do...while循环
do...while循环:不论条件成不成立先执行一遍再判断

do{
.....
}while(循环成立条件)

for循环
for in循环
continue：
跳过当前循环，直接进入循环的下一个步骤
break:
结束循环

18、JS操作DOM

18.1 什么是DOM？

DOM（document object model）文档对象模型，是针对HTML和XML的一个API（应用程序接口）。DOM给我们描述了一个具有层次化特点的节点树，允许开发人员增删改查页面的某些部分。
在这里插入图片描述

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

18.2 DOM查找元素

document获取节点的基本方法
document.getElementById('id'); //通过id来获取元素,返回指定的唯一元素。
document.getElementsByName("name");//通过name来获取元素，返回name='name'的集合。
.document.getElementsByClassName("classname") //用classname来获取元素，返回的是一个class="classname"的集合(不兼容IE8及以下)。
document.getElementsByTagName('div'); //用元素的标签获取元素，返回所有标签=“div”的集合。

18.2.1 查找

直接查找
var obj = document.getElementById('id');
间接查找
文件内容操作
innerText 仅文本
innerHTML 全内容
value
input value 获取当前的值
select 获取选中的value的值 document.getElementById('s1').selectedIndex=1
Textarea 获取value的值
在这里插入图片描述

在这里插入图片描述
案例使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="div1" class='c1 c2'>
			<p>这是一个登陆界面<a >登陆</a></p>
		</div>
		<input id="myinput" type="text" name='username'>
	</body>
</html>

输出结果：
在这里插入图片描述
实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="div1" class='c1 c2'>
			<p>这是一个登陆界面<a >登陆</a></p>
		</div>
		<input id="myinput" type="text" name='username'>
		<select id='myselect'>
			<option value="php">php</option>
			<option value="python">python</option>
			<option value="java">java</option>
		</select>
	</body>
</html>

这里我们在控制台进行查找操作：
在这里插入图片描述

18.2.2 操作

样式操作
className 列出样式字符串
classList 列出样式返回数组
classList.add 增加样式
classList.remove 删除样式
<div class='c1 c2' styple='font-size:16px'></div>
obj.style.fontSize='16px';
使用过程：
在这里插入图片描述
这里我们看这些操作命令的作用：
实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style>
		.c1{
			width: 200px;
			height: 200px;
			background: red;
		}
		
		.c2{
			width: 200px;
			height: 200px;
			background: blue;
		}
	</style>
	</head>
	
	
	<body>
		<div id='div1' class="c1">
			
		</div>
		<input id='i1' type="text" name="username" / >
	</body>
</html>

输出结果：
在这里插入图片描述
这里我们可以看下进行操作之后的对比：

属性操作
获取属性
getAttribute()
增加设置一个属性
添加属性
setAttribute('xxx','alexe')
删除属性
removeAttribute(value)
案例使用：
实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="div1" style="font-size: 20px;">
			<p>这是一个登陆界面</p>
		</div>
		<input id="i1" type="text" name='username'>
	</body>
</html>

输出结果：
在这里插入图片描述
这里我们进行获取操作：

创建标签 并添加到html中
第一种方式 字符串方式
insertAdjacentHTML()

	<input type="button" value="+" onclick="add();"/>
	<div id="div1">
		<p><input type="text"/></p>
	</div>
	<script>
		function add(){
			var tag="<p><input type='text'></p>"
			document.getElementById('div1').insertAdjacentHTML('beforeEnd',tag);
		}
			
	</script>
</body>

有四种值可用：

beforeBegin: 插入到标签开始前
afterBegin: 插入到标签开始标记之后
beforeEnd: 插入到标签结束标记前
afterEnd: 插入到标签结束标记后

第二种方式 对象的方式

document.createElement
<input type="button" value="+" onclick="add2();"/>
		<div id="div1">
			<p><input type="text"/></p>
		</div>
		<script>
			function add(){
				var tag="<p><input type='text'></p>"
				document.getElementById('div1').insertAdjacentHTML('beforeEnd',tag);
			}
			
			
			function add2(){
				var tag =document.createElement('input');
				tag.setAttribute('type','text');
				tag.style.color='red';
				var p =document.createElement('p');
				p.appendChild(tag)
				document.getElementById('div1').appendChild(p);
			}
			
		</script>

appendChild 在节点后面增加一个子节点
案例使用：
实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="+" onclick="add2();"/>
		<div id="div1">
			<p><input type="text"/></p>
		</div>
		<script>
			function add(){
				var tag="<p><input type='text'></p>"
				document.getElementById('div1').insertAdjacentHTML('beforeEnd',tag);
			}
			
			
			function add2(){
				var tag =document.createElement('input');
				tag.setAttribute('type','text');
				tag.style.color='red';
				var p =document.createElement('p');
				p.appendChild(tag)
				document.getElementById('div1').appendChild(p);
			}
			
		</script>
	</body>
</html>

输出结果：
在这里插入图片描述
提交表单
任何标签都可以通过dom提交

getElementById('id').submit()
				<form id='f1' action="https://www.moonsec.com/">
			<input type="submit" value="提交" />
			<input type="button" value="botton" onclick="Sub();" />
			<a onclick="Sub();">提交</a>
		</form>
		<script>
			function Sub(){
				document.getElementById('f1').submit();
			}
			
		</script>

案例使用：
实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form id='f1' action="https://www.moonsec.com/">
			<input type="submit" value="提交" />
			<input type="button" value="botton" onclick="Sub();" />
			<a onclick="Sub();">提交</a>
		</form>
		<script>
			function Sub(){
				document.getElementById('f1').submit();
			}
			
		</script>
	</body>
</html>

输出结果：
在这里插入图片描述
其他
console.log 终端输出
alert 弹出框
confirm 确认框 标题 true false

url和刷新
location.href 获取url
location.href ='url' 重定向
location.reload() 重新加载

定时器
setInterval()
clearInterval()

<input id="i1" type="text" />
		<input type="button" value="停止" onclick="stop();">
		
		<script>

		
		function setTime(){
			var tag = new Date();
			document.getElementById('i1').value=tag;
		}
		
		var obj=setInterval('setTime()','500');
		
		function stop(){
			clearInterval(obj);
		}

只执行一次
setTimeout()
clearTimeout()

<div id="status"></div>
		<input type="button" value="删除" onclick="Delele();">
	<script>
	function Delele(){
		document.getElementById('status').innerText="已删除";
		setTimeout(function(){
			document.getElementById('status').innerText="";
		},5000)
	}
	</script>

在这里插入图片描述
案例使用：
实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ZY技术分享</title>
	</head>
	<body>
	<div id="status"></div>
	<input type="button" value="删除" onclick="Delele();">
	<script>
	function Delele(){
		document.getElementById('status').innerText="已删除";
		setTimeout(function(){
			document.getElementById('status').innerText="";
		},5000)
	}
	</script>
	</body>
</html>

输出结果：
在这里插入图片描述
事件
绑定事件两种方式
a.直接标签绑定直接标签绑定 onclick=''
先获取dom对象，然后进行绑定
document.getElementById('xxx').onclick()
案例使用：
实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input id='i1' type="button"  value="提交" />
		<script>
			document.getElementById('i1').onclick(alert('xss'));
		</script>
	</body>
</html>