DOM对象

通过W3C提出的文档对象模型DOM,让我们可以通过JavaScript,以编程的方式控制网页上的所有元素及属性.JavaScript中的大部分处理DOM的过程都利用document对象.下面简单介绍一下相关的内容.

节点类型:

childNodes:子节点

parentNode:父节点

firstChild:第一个子节点

lastChild:最后一个子节点

nextSibing:相邻的节点

previousSibing:上一个节点

除了父节点意外,以上的其他节点均存在兼容性问题,要特别注意.

获取节点以及节点的操作:

创建节点:

var div1=document.createElement("div")

创建文本节点:

var b=document.createTextNode("跳转")

添加节点到最后:

wrap.appendChild(div)

设置节点属性:

wrap.setAttribute("href","路径")

插入节点:

insertBefore(要插入的对象,插入...之前).

删除节点:

wrap.removeChild(div),div=null

替换:

wrap.replaceChild(span,a)(用span替换a

代码示例:

   var input=document.createElement("input");
        input.setAttribute("type","button");
        input.setAttribute("value","关闭");
        input.setAttribute("style","float:right");
        div.appendChild(input);
        wrap.appendChild(div);

表单的引用:

获取表单的方法:

1.document.froms[0]

2.document.froms["name值"]

3.document.forms.name值

4.document.name值

表单内元素的引用:

获取方式:

1.document.name值.elements[0];

2.document.name值.elements["name值"]

3.document.name值.elements.name值

4..document.name值.name值

表单的启用设置:

document.form1.name值.disabled=true(不可改,不启用)

输出对象存在的表单:

document.form1.name值.form

示例:

  //获取焦点的方法
    document.form1.xingming.onfocus=function(){
        document.form1.xingming.value="";
    };

    //失去焦点的方法
    document.form1.xingming.onblur=function(){
        //值存在的情况
        if(document.form1.xingming.value){
            return 0;
        }else{
             document.form1.xingming.value="请输入";
        }
    };

//    提交的函数
    function chek(){
//        if(document.form1.xingming.value.trim()==""){
//            document.form1.xingming.style.border="1px solid red";
//            return false;
//        }
////        性别的判断
        var sta=false;
        for (var i=0;i<document.form1.sex.length;i++){
            if(document.form1.sex[i].checked){
                sta=true;
            }
        }
        if(!sta){
            return false;
    }
//        复选框
        var tre=false;
        for (var i=0;i<document.form1.yundong.length;i++){
            if(document.form1.yundong[i].checked){
                tre=true;
            }
        }
        if(!tre){
            return false;
        }

    }