目录
DOM对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
js是面向对象的语言
操作网页本质就是操作标签
js中,每个标签就是一个对象
DOM对象就是对这一类对象的统称
要操作标签,先得到这个对象
id名得到,标签名得到,类名得到,name得到(表单中name)
window.document
document.getElementById();通过id找到唯一的标签
getElementsByTagName();通过标签名获取
getElementsByClassName();通过class属性名获取
getElementsByName();通过标签name属性名获取
后三中获取到的都是一个集合对象(数组)
即使获取到的只有一个标签对象 也是一个集合
js操作标签
操作标签属性
操作标签内容
操作标签中的css
-->
<script type="text/javascript">
// document.getElementById("")
function test(){
//获得文本框一的值
var tob1=document.getElementById("tid1");//获得文本框标签对象
// console.log(obj1.value);
var tobj2=document.getElementById("tid2");
tobj2.value=tobj1.value;
tobj1.value="";
}
function changeBgcolor(color){
var bobj=document.getElementById("bgcolor");
bobj.bgColor=color;
}
</script>
</head>
<body id="bgcolor">
<input type="text" id="tid1" value="" />
<input type="text" id="tid2" value=""/>
<input type="button" value="测试按钮" onclick="test()" />
<input type="button" value="红色" onclick="changeBgcolor('red')"/>
<input type="button" value="绿色" onclick="changeBgcolor('green')"/>
<input type="button" value="蓝色" onclick="changeBgcolor('blue')"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test(){
var dobj1=document.getElementById("div1");
var dobj2=document.getElementById("div2");
dobj2.innerHTML=dobj1.innerHTML;
// 操作css
dobj1.style.width="200px";
dobj1.style.height="200px";
dobj1.style.background="green";
}
</script>
</head>
<body>
<!-- //修改标签体内容 -->
<div id="div1">第一个div</div>
<div id="div2"></div>
<input type="button" value="测试按钮" onclick="test()" />
</body>
</html>
表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function subform(){
/*
正则表达式
var reg=new RegExp("a");
reg.test(account);
var res=/^\d*$/ 0次或多次数字 加号是一次或多次
/^1[3578]\d{9}$/ 1开头 第二位3578 再来九位数字
\w [0到9 a到z A到Z _ 包括下划线]
*/
//验证条件
var accobj=document.getElementById("accountid");
var account=accobj.value;
if(account.length==0){
document.getElementById("msg").innerHTML="账号不能为空";
return;
}else{
document.getElementById("msg").innerHTML="√";
}
document.getElementById("formID").submit();//js中获得并提交表单
}
</script>
</head>
<body>
<!--
前端对表单进行验证 减少后端工作量
-->
<form action="server.html" method="get" id="formID">
账号<input type="text" id="accountid"/><br />
<span id="msg"></span><br />
密码<input type="password" id="passwordid"/><br />
<input type="button" value="保存" onclick="subform()"/>
</form>
</body>
</html>