java学Web——day04【JavaScript高级篇——DOM】

【前言】

    强调一下，javaScript 、css、html不是java同学们的核心课程，大部分知识只是做一个了解，能看懂前端代码，能自己制作小页面展示后台数据，这样子就够了。我主要写的是学习心得，汇总知识点什么的，其他博客一搜一堆。这里不再重复啦。

【正文】

    今天主要学习了DOM(Document Object Model)文档对象模型。DOM能把HTML文件转换成一个树状结构。整个树状结构由结点Node构成，HTML的标签就是树的一个结点，称之为元素。标签的属性、事件等是结点的值。组成树状结构能够方便快速索引到指定的元素。在做增、删、改、查元素方面具有强大的功能。

    今天的核心内容是JS事件和DOM元素操作。
   
    通过今天学习的案例来说明DOM知识点的使用。
    
    这里通过模仿上课视频中的项目需求分析来对所做的案例进行总结。


    一、案例1、案例3:表单的本地校验版本2:
    
    
    1.需求分析:


    在一张用户注册表中，校验用户输入的信息是否符合规定。由如下信息输入:用户名、密码、确认密码、Email、户籍信息。请校验用户输入的信息是否正确，并给与方便的提示。校验规则如下:
    
    用户名:不能为空
    密码:不能少于6位
    确认密码:确认密码与密码需要相同
    Email:一个合法的Email字段
    户籍信息:当在省份选择框中，选择省份完省份后，在市区选择框中会自动生成该省的所有市区项。
    
    在核对以上信息正确后，点击“注册”按钮提交表单


    2.技术分析:


     1)实现形式:当用户输入完一个信息后，在输入项后面会显示用户输入的信息所得到的校验结果，字体红色表示不通过，绿色表示通过;
     2)实现方法:
     (1)通过JS事件机制中的获取焦点事件onfocus和失去焦点事件onblur这两个方法调用JS函数运行。
     (2)在JS函数中使用DOM获取元素方法document.getElementById("id")，获取用户输入的信息。与校验规则进行判断。
     (3)在HTML中的每项输入框后面添加一个块状标签，其id值设为输入框的id+Span。该标签用来接受校验的结果
     (4)在注册提交按钮添加属性onSubmit ="return  校验方法" 所有信息都校验通过时返回ture.表单方可提交。
     
    3.实现细节:


      1).输出结果到 span标签:使用innerHTML方法:这个方法是js两个输出方法之一，可以往所指定的标签中输出内容。输出的内容可以是文字，也可以是标签。小代码如下:
      document.getElementById(id + "Span").innerHTML = "" + content + "";
      2).在检验两次密码是否相等，居然不能用password.equals(repassword)。。。而是用passowrd == repassword。
      3).校验Email字段的时候，使用到了正则表达式。虽然已经不能自己写出来，但是看得懂还是可以的。代码如下:
      reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
email = document.getElementById(id).value;
if(reg.test(email))
{
content = "邮箱正确";
color = "green";
}
else
{
content = "请输入正确的邮箱格式";
color = "red";
}
     
    4.核心代码:户籍输入框的省市联动制作:
      1).利用onChange = "函数方法"，当选择框的选项做改动的时候，会触发该事件，进而启动JS代码
      2).给标签中的字标签标签添加属性value，每一项设置为0，1，2，3...
      3).开始写函数:
       (1)获取城市标签:city = document.getElementById("city");
       (2)获取的所有标签,有两个做法:
         [1.]options = city.getElementsByTagName("option");遍历options[i]
         [2.]因为city是选择框，里面自带属性options。所以可以遍历city.options[i]
       (3)遍历过程中删除options[i]结点，有多种做法，推荐两种:
         [1.]利用父标签city删除:city.removeChild(options[i]);
         [2.]把结点清空:while(option.length>=0) options[options.length] =null;利用了options被删除元素后，长度可变的情况。
       (4)清空完前面的元素后，接下来是自己创造新的元素了。
         [1.]建立城市表:var arrs = Array(4);arrs[0] ={"城市1","城市2","城市3","城市4"}...建立在函数方面作为全局变量。
         [2.]遍历
for(i = 0;i{
  for(j = 0;j  {
     //这里是创造新元素的代码区
  }
}


     (5)创造新标签的步骤: 
     //[1.]新元素创造: 
     var newOption = document.createElement("option");
     //[2.]创建一个文本结点接收城市名字:
     var textNode = document.createTextNode(arr[i][j]);
     //[3.]文本结点textNode装入newOption中
      newOption.appendChild(textNode);
     //[4.]option选项装入父类中
      city.appendChild(newOption);

以下是用户验证案例的参考代码:

register.html:

	
		
		
		
		
	

	
		

			

			
			

				
				

					

						

							首页
						
						

							电脑办公
						
						

							手机数码
						
						

							宠物食品
						
						

							水水水水
						
					
				
			
			
			

				
				

					
					

						

							

								会员注册 USER REGESTER
							
							

								
用户名
								

密码

确认密码

Email

性别

男   女

籍贯

省份 浙江省 江苏省 湖北省 河北省 吉林省 -请选择-