Dom使用方法的介绍

 

Dom使用方法的介绍

1．替换节点   replaceNode 

替换节点必须是用父节点的元素去调用这个方法

举例：

<div id="bdy">

               <select name="edu" id="edus">

                    <option value="博士" id="bs">博士</option>

                    <option value="硕士">硕士</option>

                    <option value="本科">本科</option>

                    <option value="本科" id="dz">大专</option>

                </select>

            </div>

           <div>

              <input type="text" id="uname" value="确定">

       </div>

替换节点，把博士替换为大专：

        //博士节点

        var bsNode = document.getElementById("bs");

      

       //父节点

       var edusNode = bsNode.parentNode;

      

       //替换的节点

       var dzNode = document.getElementById("dz");

      

    edusNode.replaceNode(dzNode,bsNode);

注：值得注意的是在替换的时候要保证两个都存在，一般情况下用id来来获取，所以应该有id

2.属性节点的使用（以上面的html的代码为例）

(1).getAttribute

getAttribute  通过元素节点来获取该节点的属性名

举例：

var edus = document.getElementById("edus");

var value = edus.getAttribute("name");

输出的结果为：edu

(2).getAttributeNode

getAttributeNode   通过元素节点来获取指定的属性名节点对象

举例：

var nameNode = edus.getAttributeNode("name");

    alert(nameNode.nodeName+"-----"+nameNode.nodeValue+"===="+nameNode.nodeType);

(3).setAttribute

setAttribute(newNode,oldNode) 设置的属性值是有2个参数，意思是为哪个属性修改值，修改的值是多少

举例1：

   edus.setAttribute("name","laowang");

   执行的效果为：当执行之后，在页面中没有任何变化，但是当在修改之后输出的哈=话，就有变化。

 

举例2：改变input中的type，看看效果

        var uname = document.getElementById("uname");

       //设置type的属性值为button

       uname.setAttribute("type","button");

       //设置type的属性值为checkbox

       uname.setAttribute("type","checkbox");

       //得到改变后的type值

       var value =  uname.getAttribute("type");

        //输出类型

   alert(value);

执行的效果：在firefox中执行的效果可以明显的看出随着type的改变而改变，而在IE中没有显示，因为在IE中设置的属性的语句是无效的。

 

 

3．当选中复选框的时候触发的事件，并弹出选中的value值

    var edus = document.getElementById("edus");

       edus.onchange = function(){

           //获取edus里面的所有的options节点

           var options = this.getElementsByTagName("option");

           //遍历

           for( var i = 0;i<options.length;i++){

              //判断是否选中

              if(options[i].selected){

                  //打印出结果

                  alert("你改变了选择："+options[i].value);

              }

           }

    }

    弹出选中的value值还可以这么写，简化：

       edus.onchange = function(v){

           alert(v.explicitOriginalTarget.label);

}

 

4．getElementsByName

       //获取的是name=fav的所有节点对象

       var favs = document.getElementsByName("fav");

      

       //遍历出节点的value值

       for( var i = 0;i<favs.length;i++){

           //得到一个具体的节点

           var fav = favs[i];

           //注册事件

           fav.onclice = function(){

              alert("真的喜欢"+ this.value+"?");

           }

       }

 

5．getElementsByTagName

使用的html为：

       <div id="spr">

           你喜欢的小品和歌曲是谁？<br/>

           <hr color="red"/>

           <input type="checkbox" name="fav" value="荆轲刺秦">荆轲刺秦

           <input type="checkbox" name="fav" value="面试">面试

           <input type="checkbox" name="fav" value="穿越">穿越

           <input type="checkbox" name="fav" value="因为爱情">因为爱情

    </div>

 

getElementsByTagName  获取edus下面的指定的元素名称的value值

举例1 ：

    var edus = document. getElementById("edus");

       var options = edus.getElementsByTagName("option");

           var msg = "";

           //遍历所有的option的value值

           for( var i = 0;i<options.length;i++){

              msg+=" value="+options[i].value+"----";

           }

        alert(msg);

    执行的效果为：

        value=博士---- value=硕士---- value=本科---- value=大专 ----

举例2:

使用的getElementById举例（以以上的代码为例）：

    //根据标签名称获取该标签名称的input的节点

       var inputNodes = document. getElementsByTagName("input"); 

      

       //获取指定节点中的所有input对象

       var sprNode = document.getElementById("spr");

      

       //getElementsByTagName可以归某个节点所有    sprNode必须是元素节点才可调研

       var sprInputsNodes = sprNode.getElementsByTagName("input");

      

       //打印出spr节点中所有的input节点对象，并且要求type=“checkbox”

      

       //遍历所有的spr里边的节点

       for( var i = 0;i<sprInputsNodes.length;i++){

           //获取指定的节点

           var inputNode = sprInputsNodes[i];

           if(inputNode.type=="checkbox"){

              alert(inputNode.value);

           }

    }

注： 从以上的代码中可以看出getElementsByTagName的调用对象不止是document，也可以是元素节点

 

 

6.创建元素节点  createElement

以下面这段html为例：

    <div id="bdy">

              

     </div>

 举例代码为：

        //创建元素

       var inputNode = document.createElement("input");//返回的是元素节点

       //为元素赋值

       inputNode.setAttribute("type","text");

       inputNode.setAttribute("name","uname");

      

       //获取指定的节点

       var bdyNode = document.getElementById("bdy");

       //给指定的节点添加子节点

       bdyNode.appendChild(inputNode);//添加到末尾