Dom入门（三）--------关于实际应用

关于多选按钮：

•    //当窗口加载完毕之后触发匿名函数

•         window.onload=function(){

•            //获取 的是name名称等于fav的所有节点对象

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

•            alert(favs.length);

•            //遍历出所有节点的value值

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

•                //得到一个具体的节点

•                var fav=favs[i];

•                //注册事件

•                fav.onclick=function(){

•                   alert("你难道真的喜欢"+this.value+"这个节目吗");

•                }

•            }         

•         }

 

关于下拉菜单：

//获取edus节点的name属性的值

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

           //getAttribute()    获取该节点的属性名称等于name的值

           var value=edus.getAttribute("name");//得到这个属性名称的字符串，以字符串形式传递

          

           //获取该节点的指定名称的属性节点

           var nameNode=edus.getAttributeNode("name");//得到属性名称为name的属性节点名称

          

           alert(nameNode.nodeName+"----"+nameNode.nodeType+"-----"+value);

          

           //节点,为节点添加属性  ,第一个参数是属性的名称，第二个参数是属性的值          如果这个属性已经存在，则修改属性，如果不存在，则先创建再赋值，也是以字符串形式传递的

           //修改之后在网页上查看源文件时也不会显示，用getAttribute查看时会发现变化

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

          

           //属性名      属性值    ""

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

           alert(value);

修改属性例子：

//获取uname节点

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

           //获取uname节点的属性为type的节点

           var aaa=arr.getAttribute("type");

           alert(aaa);

          

           //把type的类型该为button

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

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

           alert(value);

          

           //把type的类型该为checkbox

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

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

           alert(value);

创建元素：

//创建元素

           var inputNode=document.createElement("input");

           //为元素赋值

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

           inputNode.setAttribute("name","uname");//现在只是游离状态，在页面上不显示

          

           //获取指定的节点

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

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

           bdyNode.appendChild(inputNode);//为节点bdy添加子节点

添加数据小实例：

//获取按钮

           var addNode=getId("add");

      

           var usersNode=getId("users");

           //注册按钮事件

           addNode.onclick=function(){

              var tr=document.createElement("tr");

              var td1=document.createElement("td");

          

              var td1Text=document.createTextNode(getId("uname").value);

              td1.appendChild(td1Text);

              var td2=document.createElement("td");

              var td2Text=document.createTextNode(getId("usex").value);

               td2.appendChild(td2Text);

              var td3=document.createElement("td");

              var td3Text=document.createTextNode(getId("uage").value);

              td3.appendChild(td3Text);

              var td4=document.createElement("td");

          

              //添加按钮，首先创建按钮

              var delNode=document.createElement("button");

              delNode.setAttribute("value","删除");

              //删除事件

              delNode.onclick=function(){

                  usersNode.removeChild(this.parentNode.parentNode);//this.parentNode.parentNode为tr

             

              }

              td4.appendChild(delNode);

              td4.appendChild(upNode);

          

              //把td添加到tr中

              tr.appendChild(td1);

              tr.appendChild(td2);

              tr.appendChild(td3);

              tr.appendChild(td4);

             

              //  把tr添加到tbody中

              usersNode.appendChild(tr);

           }

           function getId(id){

              return document.getElementById(id);

           }