DOM学习笔记

# DOM
 - JS的理解:
 
 - 要想操作HTML元素，那么就要将元素转换为js对象
   - 元素转换为对象的三个方式：

              1.通过标记名(标签名)：可以是多个标签
              2.通过id属性：只可以是一个标签
              3.通过name属性:可以是多个标签
   
   - 通过document中的三个方法:
             
              1.document.getElementsByTagName("div");
              2.document.getElementById("id");
              3.document.getElementsByName("name");
 
 - 元素转换为对象后，可以做什么？
   
      - 操做属性
        - 获取属性 obj.name
        - 设置属性 obj.name="";
      - 操作内容
        - 获取内容:obj.innerHTML或者obj.innerText；（表单元素）obj.value
        - 设置内容:obj.innerHTML="";  （表单元素）obj.value="";
      - 操作样式
        - 单独操作: obj.style.backgroundColor="red";
        -          obj.style.fontSize="10px";
        - 批量操作：
                 
                   <style>
                       .text{
                            width:100px;
                            height:100px;
                       }
                       .other{
                           font-size:10px;
                           background-color:red;
                       }
                   </style>  
                   //单个class样式
                   obj.className="text"; 
                   //多个class样式，中间用空格间隔
                   obj.className="text other"; 
                   //清空样式
                   obj.className="";
 
      - 补充:元素都有 id,class,style,name属性      


 - 全选，全不选，反选的代码:

          
        <script>
          //全选功能
          function sall(){
          //首先将元素转换为js对象
          var cnames = document.getElementsByName("ids[]");
          //alert(cnames.length);
          for(var i=0;i<cnames.length;i++){
             //将复选框设置为选中状态 
             cnames[i].checked=true;
           }
          }
        //取消全选功能
        function nall(){
         var cnames = document.getElementsByName("ids[]");
         for(var i=0;i<cnames.length;i++){
            //将复选框设置为 未选中状态
            cnames[i].checked=false;
         }
       }
       //反选
       function fall(){
          var cnames = document.getElementsByName("ids[]");
          for(var i=0;i<cnames.length;i++){
          //如果它之前为选中状态，cnames[i].checked就为true
            if(cnames[i].checked)
             //此时设为 未选中状态
             cnames[i].checked=false;
             else
             //此时设为 选中状态
             cnames[i].checked=true;
         }
       }
        
        全选的另一种方式: 这里的obj跟java中的this用法类似
        function checkAll(obj){
        //alert(obj.checked);
        var cnames = document.getElementsByName("ids[]");
        for(var i=0;i<cnames.length;i++){
            //obj.checked=true:说明执行全选操作
            //obj.checked=false:说明执行取消全选操作
            cnames[i].checked=obj.checked;
        }
      }
    </script>

    <input type="text" name="name" value="aaaaa" onclick="GetValue()"/>
    <script>
      function GetValue(){
        //通过getElementsByName(...)获取的是数组,即使只获取了一个
        var value = document.getElementsByName("name")[0];
        alert(value.value);
      }
    </script>