文章目录
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: 获得选中标签内的标签和内容,比如<div>标签中有文本内容和<b>,那这个方法就会获得<b>和文本内容;
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);//<b>div1里的内容</b>
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)将<script>标签放在要绑定事件的标签下面
(2)使用onload事件让先执行body标签
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Html_DOM_6</title>
<script type="text/javascript">
function loadBody(){
document.getElementById("btn").onclick = function(){//匿名函数
console.log("函数已执行")
}
}
</script>
</head>
<body onload="loadBody()">
<!-- 在标签中添加事件,为事件绑定处理函数 -->
<input type="button" id="btn" value="操作" onclick="" />
</body>
</html>
表单验证
为什么要进行表单验证?
首先我们要明确不是所有的数据都要发送到后端服务器的,对于不正确的信息我们是不用发送到后端服务器的,而如果只把验证信息是否正确的任务叫给后端服务器这对后端的压力过于巨大,因此我们需要在前端对一些简单的信息错误进行验证.
JavaScript可用来在数据被送往服务器前对HTML单中的这些输入的数据进行验证.
常见的被验证的典型数据表单有
用户是否填写表单中的必填项目,内容长度等;
用户输入的格式是否正确?例如邮箱,手机号,邮编格式等等.
表单验证的示例
首先介绍一个事件
onsubmit事件:当点击submit按钮时触发 调用处理函数,函数返回true就提交表单,false就不提交
下面有一个案例:判断用户输入的账号和密码,如果账号不为空,且0<密码<17位就提交成功.关于表单的只是大家可以看这一篇的链接 HTML的表和内联框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<script type="text/javascript">
function checkForm(){
var account = document.getElementById("accountId").value;
var pw = document.getElementById("pwId").value;
if(account.length==0){
alert("请输入用户名");
return false;
}else if(pw.length == 0 || pw.length>16){
alert("密码越界");
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<!--
表单form
提交表单时,对表单内容进行验证,不符合要求阻止表单提交
onsubmit事件:当点击submit按钮时触发 调用处理函数,函数返回true就提交表单,false就不提交
-->
<form action="server.html" method="get" onsubmit="return checkForm()" >
用户名:<input type="text" id="accountId" value=""/>
<br />
密码:<input type="text" id="pwId" value="" />
<br />
<input type="submit" value="提交" />
</form>
</body>
</html>
正则表达式
概述
1.正则表达式(regular expression 简称RegExp);
2.RegExp对象表示正则表达式, 它是对字符串执行模式匹配的强大工具,是一个描述字符模式的对象, 是一种对文字内容进行模糊匹配的语言.
语法
var reg = new RegExp("表达式");
或
var reg = /表达式/;
简单示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式</title>
<script type="text/javascript">
function check(){
document.getElementById("btn").onclick = function(){
var obj = document.getElementById("text");
//正则表达式语法
var reg = new RegExp("a");//匹配文本内容只能为a 也可使用 var reg = /a/;
var res = reg.test(obj.value);
if(res == true){
alert("符合正则表达式!!!");
}else{
alert("不符合正则表达式!!!");
}
}
}
</script>
</head>
<body onload="check()">
<!-- this表示事件所在的标签对象 -->
<input type="text" id="text" value="" />
<input type="button" id="btn" value="验证" onclick="" />
</body>
</html>
正则表达式符号
^ 匹配以指定字符开头的字符串
$ 匹配以指定字符结尾的字符串
* 匹配前面的字符式零次或多次
+ 匹配前面的字符式一次或多次
{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] 只能输入汉字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式</title>
<script type="text/javascript">
function check(){
document.getElementById("btn").onclick = function(){
var obj = document.getElementById("text");
//正则表达式语法
//匹配文本内容只能为a 也可使用 var reg = /a/;
//var reg = new RegExp("a");
var reg = /^\d+(x|y)$/;
//var reg = /^\d+$/;
//var reg = /^[A-z]+$/;
//var reg = /^\w+$/;
//var reg = /^(com|com\.cn)$/;
var reg = /^[\u4e00-\u9fa5]{2,10}$/;
var res = reg.test(obj.value);
if(res == true){
alert("符合正则表达式!!!");
}else{
alert("不符合正则表达式!!!");
}
}
}
</script>
</head>
<body onload="check()">
<!-- this表示事件所在的标签对象 -->
<input type="text" id="text" value="" />
<input type="button" id="btn" value="验证" onclick="" />
</body>
</html>
扫一扫
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
