DOMtree
获取元素
样式获得
document.getElementById(“id 名称”);
例子：
<body>
<p style="我一个p</p>
<script>
window.onload = function(){
var p1 = document.getElementById("p1");
p1.style.backgroundColor="yellow";
}
</script>
</body>
查找节点元素: 2大类
1：按 html属性查找
1.1: id
var node = document.getElementById("id值");
效率最快
获取元素里面的值
document.getElementById(“id 名称”).value;
1.2: 标签名称查找所有子元素
var nodes=node.getElementsByTagName("标签名");
window.onload=function(){
1 获得id为box的元素
var d = document.getElementById("box");
console.log(d);
2 获得class 为base的元素
var rows = document.getElementsByClassName("base");
console.log(rows);
3 获得ul下的所有的li
var ro = document.getElementsByTagName("li");
console.log(ro);
4 innerHTML 获取或者设置
var h1 = document.getElementById("h1");
console.log(h1.innerHTML);
h1.innerHTML="<span style='color:green'>hello world</span>";
5删除
var box = document.getElementById("box");
box.innerHTML="";
6 添加元素
h2.innerHTML = "<select><option>--请选择--</option></select>"
事件：
onsubmit 表单提交事件 onclick 点击事件 onfocus聚焦式的输入框 onblur当离开输入框时马上进行验证 onmouseover 鼠标移入事件 onmouseout 鼠标移出事件
具体事件的应用：
<script>
function checkForm(){
//验证函数是否绑定onsubmit
//1 alert();
//2 获取用户输入的数据
var username = document.getElementById("user").value;
if(username==""){
var un= document.getElementById("un");
un.innerHTML ="<span style ='color:pink;'>用户名不能为空</span>";
}else{
var un= document.getElementById("un");
un.style.display="none";
}
// 3 密码不能为空
var password = document.getElementById("password").value;
if(password==""){
var keyword= document.getElementById("keyword");
keyword.innerHTML ="<span style ='color:pink;'>密码不能为空</span>";
}else{
var keyword= document.getElementById("keyword");
keyword.style.display="none";
}
//4 确认密码
var repassword = document.getElementById("repassword").value;
if(repassword!=password){
var rekeyword= document.getElementById("rekeyword");
rekeyword.innerHTML ="<span style ='color:pink;'>密码不能为空</span>";
}else{
var rekeyword= document.getElementById("rekeyword");
rekeyword.style.display="none";
}
//5 邮箱验证、
var Email = document.getElementById("email").value;
if(!/^([a-zA-Z0-9])+@([a-zA-Z0-9_-]+(.[a-zA-Z0-9_-])+)/.test(Email)){
var ema= document.getElementById("ema");
ema.innerHTML ="<span style ='color:pink;'>邮箱格式不对</span>";
}else{
var ema= document.getElementById("ema");
ema.style.display="none";
}
return false;
}
</script>
<div class="regist_main center">
<div class="username">用 户 名: <input class="shurukuang" type="text" name="username" placeholder="请输入你的用户名" id="user"/><span id="un">用户名不能为空</span></div>
<div class="username">密 码: <input class="shurukuang" type="password" name="password" placeholder="请输入你的密码" id="password"/><span id ="keyword">请输入6位以上字符</span></div>
<div class="username" id="">确认密码: <input class="shurukuang" type="password" name="repassword" placeholder="请确认你的密码"/ id="repassword"><span id="rekeyword">两次密码要输入一致哦</span></div>
<div class="username">邮 箱: <input class="shurukuang" type="text" placeholder="请输入你的邮箱" id="email"/><span id="ema">正确的邮箱地址</span></div>
<div class="username">手 机 号: <input class="shurukuang" type="text" name="tel" placeholder="请填写正确的手机号"/><span>填写下手机号吧，方便我们联系您！</span></div>
<div class="username">
<div class="left fl">验 证 码: <input class="yanzhengma" type="text" name="username" placeholder="请输入验证码"/></div>
<div class="right fl"><img src="./image/yanzhengma.jpg"></div>
<div class="clear"></div>
</div>
</div>
<div class="regist_submit">
<input class="submit" type="submit" name="submit" value="立即注册" >
</div>