JavaScript中的DOM对象和表单验证(详解+全代码示例!)
文章目录
-
- HTML DOM
-
- HTML DOM概述
- HTML DOM的使用
-
- HTML DOM查找元素
- HTML DOM改变HTML
- HTML DOM改变CSS
- HTML DOM对事件的操作
- 表单验证
-
- 为什么要进行表单验证?
- 表单验证的示例
- 正则表达式
-
- 概述
- 正则表达式符号
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Html_DOM_3</title>
<script type="text/javascript">
function fun(){
var obj1 = document.getElementById("text1");//获得标签对象1
var obj2 = document.getElementById("text2");//获得标签对象2
obj2.value = obj1.value;//将标签1的值赋给标签2
obj1.value = "";//清空标签1的内容
}
</script>
</head>
<body>
<!--
点击操作按钮,将第一个文本框的内容赋值给另一个文本框
-->
<input type="text" value="" id="text1" />
<input type="text" value="" id="text2" />
<input type="button" value="操作" onclick="fun()" />
</body>
</html>
1 通过id找到HTML标签
document.getElementById("id");
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Html_DOM_1</title>
<script type="text/javascript">
function fun(){
//定义一个函数
var obj = document.getElementById("bt");//通过id获得标签对象
console.log(obj.value);//在控制台打印出标签的value值按钮
}
</script>
</head>
<body>
<!-- 按钮标签 id为bt value值为按钮 绑定一个点击事件函数调用函数fun() -->
<input type="button" value="按钮" id="bt" onclick="fun()" />
</body>
</html>
2 通过标签名找到HTML标签
会返回一个集合,因此不能直接去使用对象名称调用方法需要加上索引
document.getElementByTagName("标签名");
3 通过类名找到HTML标签
会返回一个HTML集合
document.getELementByClassName("类名");
4 通过name找到HTML标签
会返回一个HTML集合
document.getElementByName("name");
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Html_DOM_2</title>
<script type="text/javascript">
function fun(){
//通过标签名找到HTML标签
var obj1 = document.getElementsByTagName("input")
for(var i = 0 ; i <obj1.length;i++){
console.log(obj1[i].value)//java sql html css 操作
}
//通过类名找到html标签
var obj2 = document.getElementsByClassName("c1");
for(var i =0;i<obj2.length;i++){
console.log(obj2[i].value);//java sql
}
//通过name找到html标签
var obj3 = document.getElementsByName("socre")
for(var i =0;i<obj3.length;i++){
console.log(obj3[i].value);//html css
}
}
</script>
</head>
<body>
<input type="checkbox" value="java" class="c1" />java
<input type="checkbox" value="sql" class="c1" />sql
<input type="checkbox" value="html" name="socre" />html
<input type="checkbox" value="css" name="socre" />css
<input type="button" value="操作" onclick="fun()" />
</body>
</html>
HTML DOM改变HTML
1 改变HTML标签属性
语法:
document.getElementById("标签id").属性 = "属性值";
注意:
通过document.body;获得body标签
2 修改HTML标签的内容
首先介绍两种获得标签内容的方法
innerHTML: 获得选中标签内的标签和内容,比如标签中有文本内容和,那这个方法就会获得和文本内容;
innerText: 只会获得选中标签里面的文本内容
语法
document.getElementById("标签id").innerHTML = new HTML;
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Html_DOM_4</title>
<script type="text/javascript">
/*
1.js对标签属性的操作
document.body 获得body'标签
Objbody.bgcolor;改变标签属性
2.js对div内容的操作
innerHTML 获得标签内html的内容
innerText 获得标签内的文本内容
*/
//修改标签属性,改变标签颜色
function change(color){
var objBody = document.body;
objBody.bgColor =color;
}
//修改标签内容,将标签1的文本内容给到标签2
function fun(){
var obj1 = document.getElementById("div1");
var obj2 = document.getElementById("div2");
console.log(obj1.innerHTML);//div1里的内容
console.log(obj1.innerText);//div里的内容
obj2.innerText = obj1.innerText;
obj1.innerText = "";
}
</script>
</head>
<body>
<input type="button" value="红色" onclick="change('red')" />
<input type="button" value="蓝色" onclick="change('blue')" />
<input type="button" value="绿色" onclick="change('green')" />
<hr />
<div id="div1">
<b>div1里的内容</b>
</div>
<div id="div2">
</div>
<input type="button" value="操作" onclick="fun()" />
</body>
</html>
HTML DOM改变CSS
JavaScript对标签的样式进行操作
获得标签对象obj
语法
obj.style.属性 = "style属性值";
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Html_DOM_5</title>
<script type="text/javascript">
/*
3.js对标签的样式操作---改变CSS样式
先得到标签对象
使用style改变样式
*/
function oper(){
var divObj = document.getElementById("div1");
divObj.style.backgroundColor="red";
divObj.style.width = "200px";
divObj.style.height = "200px";
divObj.style.textAlign = "center";
}
</script>
</head>
<body>
<div id="div1">
div内容
</div>
<input type="button" value="操作" onclick="oper()" />
</body>
</html>
HTML DOM对事件的操作
HTML DOM使JavaScript有能力对html事件作出反应
语法
1.获得标签对象obj
2.为标签事件绑定函数
obj.事件名称 = function(){//匿名函数
函数体
}
3.注意:必须先让网页中的标签加载,然后获得标签,绑定处理函数
解决办法:
(1)将