本文共 2594 字，大约阅读时间需要 8 分钟。

HTML DOM

HTML DOM概述

DOM是Document Object Model 文档对象(网页中的标签)模型的缩写, DOM对象指的是一类对象的总称, 通过Html DOM, 可用JavaScript操作html文档的所有标签; 熟悉软件开发的人员可以将HTML DOM理解为网页的API, 在js对网页进行操作时, 认为网页中的每一个标签就是一个对象, 然后使用面向对象的思想来操作.

HTML DOM的使用

HTML DOM查找元素

通常, 通过JavaScript, 为了做到操作HTML标签这件事情, 我们必须首先找到该标签;

js中提供了一个document对象, 表示整个html文档对象, 网页加载后会自动生成表示此文档的document对象,

通过document对象中提供的方法精确获得网页中要操作的标签.

总结一句: 要操作先得到

引入案例:将文本框1的内容赋给文本框2,清空文本框1

1 通过id找到HTML标签

document.getElementById("id");

代码示例

2 通过标签名找到HTML标签

会返回一个集合,因此不能直接去使用对象名称调用方法需要加上索引

document.getElementByTagName("标签名");

3 通过类名找到HTML标签

会返回一个HTML集合

document.getELementByClassName("类名");

4 通过name找到HTML标签

会返回一个HTML集合

document.getElementByName("name");

代码示例

			
   								java		sql		html		css					

HTML DOM改变HTML

1 改变HTML标签属性

语法:document.getElementById("标签id").属性 = "属性值";注意:通过document.body;获得body标签

2 修改HTML标签的内容

首先介绍两种获得标签内容的方法

innerHTML: 获得选中标签内的标签和内容,比如
   
    标签中有文本内容和
    ,那这个方法就会获得和文本内容;innerText: 只会获得选中标签里面的文本内容
   

语法document.getElementById("标签id").innerHTML = new HTML;

代码示例

			
   														
   
		
   
			
    div1里的内容		
   
				
   
					
   
			

HTML DOM改变CSS

JavaScript对标签的样式进行操作

获得标签对象obj语法obj.style.属性 = "style属性值";

代码示例

			
   								
   
    			div内容		
   
					

HTML DOM对事件的操作

HTML DOM使JavaScript有能力对html事件作出反应

语法1.获得标签对象obj2.为标签事件绑定函数obj.事件名称 = function(){//匿名函数	函数体}3.注意:必须先让网页中的标签加载,然后获得标签,绑定处理函数解决办法:(1)将

代码示例

表单验证

为什么要进行表单验证?

首先我们要明确不是所有的数据都要发送到后端服务器的,对于不正确的信息我们是不用发送到后端服务器的,而如果只把验证信息是否正确的任务叫给后端服务器这对后端的压力过于巨大,因此我们需要在前端对一些简单的信息错误进行验证.

JavaScript可用来在数据被送往服务器前对HTML单中的这些输入的数据进行验证.

常见的被验证的典型数据表单有

用户是否填写表单中的必填项目,内容长度等;用户输入的格式是否正确?例如邮箱,手机号,邮编格式等等.

表单验证的示例

首先介绍一个事件

onsubmit事件:当点击submit按钮时触发 调用处理函数,函数返回true就提交表单,false就不提交

下面有一个案例:判断用户输入的账号和密码,如果账号不为空,且0<密码<17位就提交成功.关于表单的只是大家可以看这一篇的链接

			
   								
   		
   
    			用户名:
    			
    
			密码:
    			
    
			
    		
   
	

正则表达式

概述

1.正则表达式(regular expression 简称RegExp);

2.RegExp对象表示正则表达式, 它是对字符串执行模式匹配的强大工具,是一个描述字符模式的对象, 是一种对文字内容进行模糊匹配的语言.

语法var reg = new RegExp("表达式");或var reg = /表达式/;

简单示例

正则表达式符号

^				匹配以指定字符开头的字符串$				匹配以指定字符结尾的字符串*				匹配前面的字符式零次或多次+				匹配前面的字符式一次或多次{n}				匹配确定的 n 次{n,}			至少匹配n 次{n,m}			匹配n-m次，包含n和m[0-9]			表示0-9之间的任意字符\d 				匹配一个数字字符。等价于 [0-9]\D 				匹配一个非数字字符。等价于 [^0-9][a-z]			匹配 'a' 到 'z' 范围内的任意小写字母字符[A-Z]			匹配 ‘A’ 到 ‘Z’ 范围内的任意大写字母字符[^a-z]			匹配任何不在 'a' 到 'z' 范围内的任意字符x|y				匹配 x 或 y\w				等价于'[A-Z,a-z,0-9,_]‘\W 				等价于 '[^A-Z,a-z,0-9,_]‘[\u4e00-\u9fa5] 只能输入汉字

转载地址：http://ecfd.baihongyu.com/