dom的概念
概念：document object model 将文档中的标签封装成对象，通过js的方式去操作对象的属性和方法，从而实现动态修改页面元素的效果。
获取元素
document.getElementById('d1');//一个对象
document.getElementsByTagName('标签名');//类数组
document.getElementsByName('name属性');//类数组
document.querySelector('css选择器');//符合条件的第一个对象
document.querySelectorAll('css选择器');//类数组
id;
获取事件源
//通过id获取
function aa(id) {
var input=document.getElementById(id);
alert(input.value);
}
//通过this关键字
function bb(ii) {
alert(ii.value);
}
//通过事件event获取
function cc(){
var input=event.target;//事件源
alert(input.value);
}
样式
var div=document.getElementById('dd');
//方式一
div.style="background:blue;color:red;font-size:50px";
//方式二
div.style.color="red";
div.style.background="blue";
div.style.fontSize="50px";//属性必须是驼峰命名法
var div=document.getElementsByTagName('div')[0];
if(div.className=='d1'){
div.className='d2';
}else{
div.className='d1';
}
属性
1.png
innerHTML
div.innerHTML="abc";//修改标签体内容为abc
div.innerHTML="<div style='color:red'></div>";//通过修改标签体内容，向标签中添加一个div子标签
与之对应的还有innerText，只能给标签赋值普通的文本，不能赋值新的标签
另外还有outerHTML获取整个标签的内容，包括标签本身
outerText获取标签体内容，不包括标签本身
表单校验
<!-- onsubmit：return false则表单不提交，return true则表单提交 -->
<form action="register.jsp" onsubmit="return check()"></form>
function checkPwd(){
var pwd=document.getElementById('password').value;
//正确规则的表达式
var reg=/^[0-9]{3,16}$/;
var span=document.getElementById('pwdMsg');
if(!reg.test(pwd)){
span.innerHTML="密码必须是6-16位数字";
return false;//通过返回false，来阻止表单的提交
}else{
span.innerHTML="";
return true;
}
}
常用属性
2.png
3.png
常用方法
4.png
父节点.appendChild(子节点);
父节点.removeChild(子节点);
常用事件
5.png
var div=document.getElementById("d1");
div.onmouseover=changeStyle1;//注意是函数名
属性
上面介绍了对象中的很多属性，例如:style、class、id，还有事件也属于属性，如果你记不住这些属性的用法，可以使用setAttribute("属性名","属性值")这种通用的做法
var div=document.getElementById("d1");
div.setAttribute("class","d1");
div.setAttribute("onclick","add()");
