DOM

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子标签

1. 与之对应的还有innerText，只能给标签赋值普通的文本，不能赋值新的标签

2. 另外还有outerHTML获取整个标签的内容，包括标签本身

3. 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()");