JavaScript DOM 概述 &&获取 Element对象概述

DOM（Document Object Model）文档对象模型，
      .是W3C（万维网联盟）的标准
      .DOM定义了访问HTML和XML文档的标准
      .W3C DOM 标准被分为三个不同的部分
         1.将标记语言的各个组成部分封装为对象
            .Document:  整个文档对象
            .Element:   元素对象
            .Attribute: 属性对象
            .Text:      文本对象
            .Comment:   注释对象
         2.XML DOM:针对XML文档的标准模型
         3.HTML DOM:针对HTML文档的标准模型
            .image:<img>
            .button:<input type = 'button'>

   JavaScript通过DOM，就能对HTML操作了
     .改变HTML元素的内容
     .改变HTML的元素的样式
     .对HTML DOM时间做出反应
     .添加和删除HTML元素

Element:元素对象（使用document对象的方法来获取） 

Element:元素对象（使用document对象的方法来获取）
   1.document.getElementById();           根据id属性值获取，返回一个Element对象  （id不可重复，所以返回一个对象）
   2.document.getElementsByTagName();     根据标签名称获取，返回一个Element对象数组
   3.document.getElementsByName();        根据name属性获取，返回一个Element对象数组
   4.document.getElementsByClassName();   根据class属性值获取，返回一个Element对象数组

//1.document.getElementById();           根据id属性值获取，返回一个Element对象  （id不可重复，所以返回一个对象）
    var light = document.getElementById("light");
    window.alert(light);
//2.document.getElementsByTagName();     根据标签名称获取，返回一个Element对象数组
    var div = document.getElementsByTagName("div");
    window.alert(div);  //[object HTMLCollection]
    window.alert(div.length);
//3.document.getElementsByName();        根据name属性获取，返回一个Element对象数组
    var name = document.getElementsByName("hobby");
    window.alert(name); //[object NodeList]
    window.alert(name.length);
//4.document.getElementsByClassName();   根据class属性值获取，返回一个Element对象数组
    var cls = document.getElementsByClassName("cls");
    window.alert(cls);    //[object HTMLCollection]
    window.alert(cls.length); //返回值2


//给以上的标签重复赋值
    //1.document.getElementById(); (换图片)
      var light = document.getElementById("light");
      light.src="image/ev.jpg";
    //2.document.getElementsByTagName();（）
      var div = document.getElementsByTagName("div");
                /*
                  两个通用的属性
                  style:     设置元素css样式
                  innerHTML: 设置元素内容
          */
     for (let i = 0 ; i < div.length; i ++){
         div[i].style.color ='red';
         div[i].innerHTML="牛马程序员";
     }
    //3.document.getElementsByName();(复选框全部选中，以及如何获取复选框的返回值)
      var hobby = document.getElementsByName("hobby");
       for (let i = 0 ; i < hobby.length; i ++){
           hobby[i].checked = true;
       }

    //4.document.getElementsByClassName();   根据class属性值获取，返回一个Element对象数组
      var cls = document.getElementsByClassName("cls");