JavaScript

最新推荐文章于 2024-04-29 20:33:39 发布

孰与徐公比美 NO,NO

最新推荐文章于 2024-04-29 20:33:39 发布

阅读量160

点赞数

分类专栏： java框架

本文链接：https://blog.csdn.net/weixin_42610967/article/details/101723085

版权

java框架专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一，功能：

表单验证，减轻服务器压力
页面动态效果

二，基本结构

javascript 代码必须写在<script></script>中


<script type="text/javascript">
<!--javascript语句-->
</script>

三，js的调用

1，js既可以写在head中，也可以写在body中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js入门程序 js可以定义在任意位置</title>
		<script type="text/javascript">
			
			/*js必需写在里面*/
			document.write("hello Script");
			
			alert("看我有没有没弹  弹窗");
			
			/*这是在打印输出控制台   必需按 F12  然后在console 中找*/
			console.log("猜猜我在哪里，你能找找到吗，能找到就是合格程序员!");
		</script>
	</head>
	<body>
	
	<script type="text/javascript">
			
			/*js必需写在里面*/
			document.write("<br>hello Script2");
			
		</script>
	</body>
</html>

2，javascript外部引用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>引用外部js</title>
		<!--相对路径，实际开过过程中不使用 使用会有很多错，图片 css  js -->
		<!--<script src="../../js/my.js"></script>-->
		
		<script src="/1181/js/my.js"></script>
		
		<script>
		
			/*java方法
			 public void addUser(){
				
			}
			 * */
			
			/*js中的方法     函数  */
			function check(){
				alert("我也弹");
			}
			
		</script>	
	</head>
	<body>
		<!--第一个用的是javascript中的alter函数，第二个调用的是
		自定义的check函数-->
		<input type="button" onclick="javascript:alert('我弹')"  value="点我就动"/>	
		<input type="button" onclick="check()" value="我也弹" />
	</body>
</html>

四，JS核心语法

1，变量

定义变量三种方式
1.1 先声明，再赋值
var width；
width=9;
1.2 同时声明和赋值变量
var catName=“皮皮”;
var x,y,z=10;
1.3不声明变量直接赋值(不推荐使用)
width=10;

2，数据类型

1,undefined=null
2,number 所有数值类型
3,boolean true和false
4,string:所有用单引号或者双引号括起来的；单引号可以括起来上双引号，
双引号也可以括起来单引号，但同类引号不能相互括；
typeof用来检测变量的返回值

            var aa ;
			console.log(typeof aa);//undefined 类型
			
			var bb = null;
			console.log(typeof bb);// Object
			
			var num =1;
			console.log(typeof num);//number
			var num2 = 22.33;
			console.log(typeof num2);//number
			
			
			var str ="1111";//string
			var str1='2222';//string
			
			//alert(typeof str);
			console.log(typeof str);
			console.log(typeof str1);
			
			var flag = true;
			
			console.log(typeof flag);//boolean

String对象属性
字符串.length

var str="this is JavaScript";
var strLength=str.length;//长度是18

3，方法

（1）charAt(index)：返回在指定位置的字符（从0开始）
（2）indexOf(str,index) ：查找某个指定的字符串在字符串首次出现的位置
（3）substring(index1,index2) 返回位于索引index1与index2之间的字符串，并且包含index1对应的字符，不包含index2对应的字符。
（4）split(str)将字符串分割为字符串数组

   <script>
			var str = "hello Word Hello Script!";
			
			console.log(str.length);//返回字符串的长度
			
			console.log(str.charAt(2));//查找 下标为2的字符
			
			var aa = str.charAt(4);
			console.log(aa)
			
			console.log(str.substring(2,4));//输出llo
			
			console.log(str.substring(2,6)); //输出llo 
			
			var str="1001,1002,1003,1004";
			
			var strs = str.split(",");//以，分割
			
			console.log(strs[0]);//输出1001
			console.log(strs[1]);//输出1002
			console.log(strs[2]);//输出1003
			console.log(strs[3]);//输出1004
			console.log(strs[4]);//输出undefined
			
			/*for(int i=0;i<strs.length;i++){
				strs[i];
			}*/
			
			for(var i=0;i<strs.length;i++){
				console.log(strs[i]);
			}
			
			//这样也可以
			for( i=0;i<strs.length;i++){
				console.log(strs[i]);
			}
			
	</script>

4，数组

4.1，定义数组的几种方式：

1，var num = new Array(5);

2，var num = new Array(10,20,30,40,50);

3，var num = [10,20,30,40,50];
var str = [‘10’,‘20’,‘30’,‘40’,‘50’];

4.2，JS中数组使用于JAVA的不同：
1，Java中定义后的数组长度不能变，会报错数组下标越界，但js中不会报错，系统自动扩充数组

<script>
			//创建了一个数组 长度为5
			var num = new Array(5);
			console.log(num.length);//长度  5 
			num[0]=10;
			num[1]=20;
			num[2]=30;
			num[3]=40;
			num[4]=50;
			num[5]=60;//为数组不存在的下标赋值
//Java中定义后的数组长度不能变，会报错数组下标越界，但js中不会报错，系统自动扩充数组
			console.log(num.length);//长度6 
			//获取下标为2的值
			console.log(num[2]);
			
			console.log(num);//输出全部值
		</script>

2，数组输出时for循环的使用：

<script>
			
			var str = ['10','20','30','40','50'];
			//普通for循环
			for(var i = 0;i<str.length;i++){
				console.log(str[i]);
			}
			
			//for in循环
			for( var b in str){//in指向循环的数组，变量b默认从零开始
				console.log(str[b]);
			}
		</script>

4.3，数组常用的属性和方法
1,length 数组中元素的数目
2,join() 把数组中所有元素放入一个字符串，，通过一个分隔符进行分割
3,sort() 对数组排序
4,push() 向数组末尾添加一个或更多个元素，并返回新的长度。

join()方法的使用：

var num = new Array(50,10,40,20,30,);
console.log(typeof num);//Object类型
//把数组拼接成字符串
var str=num.join(",")//通过一个,作为拼接符。输出结果为50,10,40,20,30
//var str = num.join("0");//如果通过一个0作为拼接符。输出结果为50010040020030
console.log(typeof str);//string类型
console.log(str);//输出结果50,10,40,20,30

sort()的使用

var num = new Array(50,10,40,20,30,);
console.log(num);//不排序直接输出
console.log(num.sort());//从小到大排序并输出

输出结果：
[ 10, 20, 30, 40, 50, 88 ]

push()的使用

var num = new Array(50,10,40,20,30,);
console.log(num.length);//输出结果为5
num.push(88);//追加一个
console.log(num.length);//输出结果为6

5，运算符

于java一样

6，逻辑控制语句

break:跳出所有循环
continue：只跳出一次循环

7，注释：

1，单行注释：//
2，多行注释：/* */

8，常用的输入输出：

1，alert() 弹出个提示框（确定）
2，confirm() 弹出个确认框（确定，取消）
3，prompt() 弹出个输入框让你输入东西

var num =prompt("请输入数字");
console.log(num);

运行效果：
在这里插入图片描述
界面会跳出一个弹窗，弹窗显示的为prompt（“请输入一个数字”）括弧里面的内容。
当在对话框内手动输入值后，系统会将值传给num。

var str =prompt("请输入值","默认的值");	
console.log(str);

效果展示：
在这里插入图片描述

9，函数：

1，常见的函数
（1）parseInt(“字符串”)
将字符串转换为整型数字
如parseInt(“86。86”)就是将字符串86转换为number类型86（Js中没有Int类型，但parseInt函数将字符串转换为整型，即去掉小数）
（2）parseFloat(“字符串”)
将字符串转换成浮点型数字
如parseInt(“86。86”)就是将字符串86.86转换为浮点型86.86
(3)isNaN()
用于检查其参数是否是非数字

var aaa =11;
console.log(isNaN(aaa));//输出结果为false

var aaa ="11";//无论是否带双引号，判断出结果都是数字
console.log(isNaN(aaa));//输出结果为false

var aaa ="aaa";
console.log(isNaN(aaa));//输出结果为true

2，自定义函数
（1），定义一个无参函数，通过两种方式调用

<html>
	<head>
		<meta charset="utf-8">
		<title>自定义函数</title>
		<script>
			
			//函数
			function  add(){
				alert("这就定义了一个函数");
			}
			//调用函数 第一种方式，通常不使用
			//add();
		</script>
	</head>
	<body>
		<!--调用函数 第二种方式，通过onclick 点击事件调用我们的函数-->
		<input type="button" value="调用函数" onclick="add();" />
	</body>
</html>

（2），定义一个有参函数

<html>
	<head>
		<meta charset="utf-8">
		<title>有参的函数</title>
		<!--代码6遍-->
		<script>
			
			function  add(a){
				alert("接收到的值为"+a);
			}
			
			function  add2(a,b){
				alert("接收到的值为"+a+"b"+b);
			}
		</script>
	</head>
	<body>
		<!--<input type="button" value="调用函数" onclick="add(1)" />-->
		<input type="button" value="调用函数" onclick="add('1')" />
		
		<input type="button" value="调用函数" onclick="add2('1',2)" />
	</body>
</html>

10，全局变量与局部变量

<script>
			//定义全局变量
			var num = 10;
			
			function add(){
				//定义局部变量
				var str="aaa";
				
				console.log(num);
				console.log(str);
				
				num=20;
			}
			add();//调用函数方法 
			
			
			function add1(){
				console.log(num);
				console.log(str);
			}
			add1();//结果num=20,因为num是全局变量
		</script>

11，事件

常用的事件：
在这里插入图片描述
示例:
1.onclick事件，onload事件

<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
		<script>  
			
			function kkkkk(){
				alert("点击事件");
			}
			
			function read(){
				alert("页面全部加载完了");
			}
			
			//第二种方式当页面全部加载完之后所执行的函数
			onload = function (){
				alert("页加加载完了，我要执行了");
			}
		</script>
	</head>
	
	<!--<body onload="read();">  当页面全部加载完之后所执行的函数
		这是第一种 方式
	-->
	<body>
		<!--点击事件-->
		<input type="button" value="点击事件" onclick="kkkkk();"/>
		
		
		
	</body>
</html>

2，onmouseover,onchange事件

<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标移入移出事件</title>
		<script>
			
			function move(){
				alert("移入进来了");
			}
			
			function out(){
				alert("移出");
			}
			
			
			function cccc(){
				alert("执行了没有");
			}
			
			function ccc1(obj){
				
				console.log(obj);
				//alert(obj);
			}
			
			function  ccc2(obj){
				console.log(obj);
				//输出<input id="iddd" name="cccc" value="cccc" οnchange="ccc2(this);" />
				console.log(obj.value);
				
				console.log(obj.id);
			}
			
			function ccc3(val){
				console.log(val);
			}
		</script>
	</head>
	<body>
		<!--onmousemove="move();" 移入事件
			onmouseout="out()"移出事件
		-->
		<div style="width: 100px; height: 100px; background-color: #0000FF;"
			onmousemove="move();" onmouseout="out()"
			>
			div块
		</div>
		<!--onchange 当值改变后立即触发的事件-->
		<input value="dddd" onchange="cccc();" />
		<input value="bbb" onchange="ccc1(this);" />
		//this指当前input所有标签。
		
		<input id="iddd" name="cccc" value="cccc" onchange="ccc2(this);" />
			//this指当前input所有标签。
		<input  value="qqq" onchange="ccc3(this.value);" />
	</body>
</html>

12，JavaScript操作BOM对象

BOM浏览器对象模型(browser object model)
1，功能：
1，弹出新的浏览器窗口
2，移动，关闭浏览器窗口以及调整窗口的大小
3，页面的前进，后退
2，常用属性：
1，history:有关客户访问过的URL信息
2，location:有关当前的URL信息
window对象常用的方法;
window.属性名=“属性值”
示例：window.location=“http.baidu.com”

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//跳转到baidu.com浏览器

			function tiao(){
				window.location.href="https://www.baidu.com/";
			}
		</script>
	</head>
	<body>
		<a href="https://www.baidu.com/">我要跳了</a>
		
		<a href="#" onclick="tiao();">我要跳了1</a>
	</body>
</html>

3，常用方法
1,prompt():显示可提示用户输入的对话框
2,alert()：显示带有一个提示信息和确认按钮的警示框
3,confirm()：显示一个带有提示信息，确定和取消按钮的对话框
4,close()：关闭浏览器窗口
5,open()：打开一个新的浏览器窗口，加载给定的URL指定文档。
6,setTimeout()：在指定的毫秒数后调用函数或计算表达式
7,setInterval()：在制定的周期（以毫秒计算）来调用函数或者表达式

confirm示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			
			function deleteAA(id){
				
				/*var flag = confirm("确认是否删除?");
				//alert(flag);
				if(flag){
					//这里需要调用方法  跳转到url路径
					alert("删除成功");
				}*/
				
				//confirm返回值是true或者false
				if(confirm("确认是否删除?")){				
					alert("删除成功");
				}}
		</script>
	</head>
	<body>
		
		<a href="#" onclick="deleteAA(1);">删除</a>
	</body>
</html>

open示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		
			function open01(){
				
				window.open("https://www.baidu.com/");
			}
			
			function open02(){
				
				window.open("https://www.baidu.com/","打开一个新的窗口","width=500px,height=500px");
			}
			function open03(){
				
			}
		</script>
	</head>
	<body>
		
		
		<input type="button"  value="打开一个新窗口1" onclick="open01()" />
		<input type="button" value="打开一个新窗口2" onclick="open02()" />
		
	</body>
</html>

setTimeout()和setInterval()经常被用来处理延时和定时任务。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。

从定义上我们可以看到两个函数十分类似，只不过前者执行一次，而后者可以执行多次，两个函数的参数也相同，第一个参数是要执行的code或句柄，第二个是延迟的毫秒数。
setTimeout，setInterval示例：
示例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function open03(){	
				//让他等两秒钟打开  只会打开一次
				setTimeout("aa()",2000);
			}
			
			function aa(){
				window.location.href="https://www.baidu.com/";
			}
			
			function open04(){
				
				//让他等1秒钟打开  每两秒执行一次
				setInterval("bb()",1000);
			}
			
			function bb(){
				alert("aa");
			}
		</script>
	</head>
	<body>

		<input type="button" value="打开一个新窗口3" onclick="open03()" />
		
		<input type="button" value="打开一个新窗口3" onclick="open04()" />
	</body>
</html>

示例2：实现在多少秒后跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			
			var i=5;
			
			setInterval("aaa();",1000);
			
			function aaa(){
				var  aa =document.getElementById("aaa");
				aa.innerHTML=i;
				
				if(i==1){
					//window.open("https://www.baidu.com/");
					window.location.href="https://www.baidu.com/";
				}
				i--;
			}
			
		</script>
	</head>
	<body>
		
		
		在<font id="aaa"></font>秒后跳转
	</body>
</html>

history对象：

back():加载history对象列表中的前一个URL
forward():加载history对象列表中下一个URL
go():加载history对象列表中某个具体的URL
history.back()=history.go(-1);浏览器中的前进
history.forward()=history.go(1);浏览器中的后退

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<a href="Test11.html"> 跳转到11thml</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<a href="javascript:history.go(-1);">返回到前一页</a>
		
		
		<a href="javascript:history.back();">返回到前一页2</a>
	</body>
</html>

两个页面可实现互相访问
location
location常用属性：
host:设置或返回主机名和当前URL的端口号
hostname：设置或返回当前URL的主机名
href：设置或返回完整的URL
location常用方法：
reload()：重新加载当前文档
replace()：用新的文档替换当前文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--作业5遍-->
		<script>
			
			console.log(location.host);//获取本机ip
			
			console.log(location.name);//获取本机名
			
			console.log(location.URL);
		</script>
	</head>
	<body>
	<a href="javascript:location.reload()">刷新本页</a>
	</body>
</html>

节点:
在这里插入图片描述
document.getElement获取节点元素：

<input type="button" id="but"  value="点击" onclick="checka();"/>
var but =document.getElementById("but");//获取元素
console.log(but);
//输出<input type="button" id="but"  value="点击" οnclick="checka();"/>
console.log(but.value);//输出元素中的值
console.log(but.id);//想输出id就.id

节点属性：
parentNode:返回节点的父节点
childNodes：返回子节点集合，childNodes[i]
firstChild:返回节点的第一个子节点，最普通的用法是返回该元素的文本节点
lastChild：返回节点的最后一个子节点
nextSibling：下一个节点
previousSibling：上一个节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>dom-获取节点元素</title>
<script type="text/javascript">
	//onload就是页面加载完之后执行
	onload=function(){
		//tr,td不是节点
		/*
		 * 获取 input type="button" id="but"  value="点击" οnclick="checka(); 元素
		 * var but =document.getElementById("but");
		console.log(but);
		console.log(but.value);输出元素中的值
		console.log(but.id);//想输出id就.id
		*/
		
		//获取a标签的节点
		var  aa =document.getElementById("ID");
		console.log(aa);
		
		//获取父节点 
		var parent=aa.parentNode;//form
		console.log(parent);
		
		//获取 form中的所有子节点
		var childs=parent.childNodes;
		console.log(childs);
		
		//获取 form中的第一个子节点
		var first = parent.firstChild;
		console.log(first);
		//获取 form中的最后一个子节点
		var last = parent.lastChild;
		console.log(last);
		
		//获取下一个节点
		var next =aa.nextSibling.nextSibling.nextSibling.nextSibling;
		//第一个next是text即空格，第二个next是font，第三个next是font后的空格
		
		console.log(next);
		
		//获取上一节节点
		var previous=aa.previousSibling.previousSibling;
		console.log(previous);
		
	}
	
	//当页面完成加载时，执行的 
	/*function loadInfo(){
		var a1 = document.getElementById("ID");
		console.log(a1);
	}*/
</script>
	</head>
	<body>
		<form>
			<input value="是它吗"></input>
			<tr>
				<a id="ID"><strong></strong></a>
			</tr>
			<font></font>
			<input type="button" id="but"  value="点击" onclick="checka();"/>
		</form>-->
		
		<!--<form><input></input><tr><a id="ID"><strong></strong></a></tr><font></font></form>-->
	//获取到的第一个节点是input，最后一个节点是font，而上面代码获得第一个与最后一个节点都是text位版本，因为
	//空格就是文本
	</body>
</html>

element属性
firstElementChild：返回节点第一个子节点
lastElementChild：返回节点最后一个子节点
nextElementChild：下一个节点
previousElementChild：上一个节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>dom-获取节点元素</title>
<script type="text/javascript">
	//onload就是页面加载完之后执行
	onload=function(){
		
		
		//获取a标签的节点
		var  aa =document.getElementById("ID");
		console.log(aa);
		
		//获取父节点 
		var parent=aa.parentNode;//form
		console.log(parent);
		
		//获取第一个子元素
		var firstElement=parent.firstElementChild;
		console.log(firstElement);
		//获取最后一个子元素
		var lastElement=parent.lastElementChild;
		console.log(lastElement);
		
		//获取下一个元素
		var nextElement=aa.nextElementSibling;
		console.log(nextElement);
		
		//获取上一个元素
		var previousElement=aa.previousElementSibling;
		console.log(previousElement);
		
	}
	
	//当页面完成加载时，执行的 
	/*function loadInfo(){
		var a1 = document.getElementById("ID");
		console.log(a1);
	}*/
</script>
	</head>
	<body>
		<form>
			<input value="是它吗"></input>
			<tr>
				<a id="ID"><strong></strong></a>
			</tr>
			<font></font>
			<input type="button" id="but"  value="点击" onclick="checka();"/>
		</form>-->
		
		<!--<form><input></input><tr><a id="ID"><strong></strong></a></tr><font></font></form>-->
	</body>
</html>

控制台结果：
在这里插入图片描述
节点操作：
1，操作节点的属性，
getAttribute(“属性名”)
setAttribute(“属性名”，“属性值”)
2，创建和插入节点，
createElement(tagName):创建一个标签为tagName的新元素节点
A.appendChild(B):把B节点追加到A节点的末尾
insertBefore(A,B):把A节点插入到B节点之前
cloneNode(deep):复制某个指定的节点
删除和替换节点，
removeChild(node)
replaceChild(newNode,oldNode)
操作节点样式，
获取元素的样式，
示例：
1，getAttribute(“属性名”)，setAttribute(“属性名”，“属性值”)

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>选择你喜欢的书</title>
		<style>
			*{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;}
			        div{padding: 5px; text-align: center;
			        }
			        div span{display: block;}
		</style>
		
		<script>
			
			function book(){
				//第一步需要获取所有 input属性  name为book
				var books = document.getElementsByName("book");//数组
				//获取img标签
				var img = document.getElementById("image");
				if(books[0].checked==true){
					
					//通过 setAttribute给属性设置值
					img.setAttribute("src","images/dog1.jpg");
					img.setAttribute("alt","小狗");
					//得到属性 的值
					alert(img.getAttribute("id"));
				}
				
				if(books[1].checked==true){
					img.setAttribute("src","images/mai1.jpg");
					img.setAttribute("alt","灰霾");
					//得到属性 的值
					alert(img.getAttribute("src"));
				}
				
			}
		</script>
	</head>

	<body>
		<p>选择你喜欢的书：
			<!--images/dog.jpg-->
			<input type="radio" name="book" onclick="book()" value="1" checked="">我和狗狗一起活下来
			<input type="radio" name="book" onclick="book()" value="2">灰霾来了怎么办</p>
			
			<!--images/mai.jpg-->
		<div><img src="" alt="" id="image"  onclick="img()"><span></span></div>
		<script>
			
		</script>
	</body>

</html>

2，创建和插入节点，删除和替换节点，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM-动态创建节点</title>
		<script>
		
		
			/*function createNode(){
				
			}*/
			var createNode=function(){
				/*//创建一个div节点
				var div = document.createElement("div");
				div.innerHTML="这是div的值";//给标签中没有value的元素赋值
				//获取d1 的元素
				var d1  =document.getElementById("d1");
				d1.appendChild(div);*/
				
				var input = document.createElement("input");
				input.value="赋值为";//如果标签中有value的必需通过value赋值
				
				var d1  =document.getElementById("d1");
				d1.appendChild(input);
				
			}
			var insertNode=function(){
				//创建的新元素
				var input1 = document.createElement("input");
				input1.value="赋值为";//如果标签中有value的必需通过value赋值
				
				
				//获取子
				var h1 = document.getElementById("h1");
				
				//把 input1 添加到  h1前面
				parent.insertBefore(input1,h1);
			}
			var replNode=function(){
				//创建一个新的节点
				var newDiv = document.createElement("div");
				newDiv.innerHTML="<font color='red'>我要替换你</font>";
				
				//获取旧节点
				var oldNode = document.getElementById("h1");
				
				//把oldNode 替换为 newDiv
				parent.replaceChild(newDiv,oldNode);
			}
			var delNod=function(){
				
				//获取直接删除
				var  h1 = document.getElementById("h1");
				//h1.remove();
				
				//删除 
				//h1.parentElement.removeChild(h1);
				
				//获取父
				var parent=	document.getElementById("d1");
				//获取父节点的最后一个子节点
				var lasetEe = parent.lastElementChild;
				
				//删除
				parent.removeChild(lasetEe);
			}
			
		</script>
	</head>
	<body>
		<div id="d1"  >
			<h1 id="h1">已经存在的节点</h1>
			<div id="dddd">这是div的值22222</div>
		</div>
		<input type="button" value="创建div" onclick="createNode();"/>
		<input type="button" value="指定div" onclick="insertNode();"/>
		<input type="button" value="替换节点" onclick="replNode();"/>
		<input type="button" value="移除节点" onclick="delNod();"/>
	</body>
</html>

操作节点样式
1，style属性
2，className属性
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#d1{
				
				width: 200px;
				height: 300px;
				background-color: red;
			}
			
			
		</style>
		<script>
			var over = function(){
				
				//获取div的属性
				var div = document.getElementById("d1");
				
				//把背景色设置为blue
				div.style.backgroundColor="blue";
				
				div.style.width="100px";
				div.style.height="100px";
			}
			
			var out = function(){
				//获取div的属性
				var div11 = document.getElementById("d1");
				
				//把背景色设置为blue
				div11.style.backgroundColor="red";
				
				div11.style.width="100px";
				div11.style.height="100px";
			}
			
			
		</script>
	</head>
	<body>
	<div id="d1" onmouseover="over()" onmouseout="out()">这里面的值</div>
	</body>
</html>