DOM

DOM:(document)

   1 document属性:title URL bgColor fgColor

            使用document 的title(标题) 属性
              alert(document.title);
              document.title="改变后的标题";

            使用document 的URL(必须大写) 属性
              alert(document.URL);

            使用document 的bgColor 属性
              document.bgColor="red";

            使用document 的fgColor 属性
              document.fgColor="blue";

    方法:getElementById()通过ID获取元素
    示例:
         var button = document.getElementById("button");
            alert(button.value);

   2 getElementsByTagName()通过标签名获取元素(返回指定标签名的对象集合)

     属性:length 可通过下标方式访问

     示例:
       var button = document.getElementById("button");
            alert(button.value);

            var input = document.getElementsByTagName("input");
            alert(input.length);通过length
            alert(input[3].value);通过下标方式访问

   3 getElementsByName()返回带有指定名称的对象集合

     属性:length 可通过下标方式访问
     问题:有兼容性问题 ,如果name存在于form表单中,可以正常使用,如果出现在div元素中,则不能正常返回值(IE 不能使用 FF CHROM 可以使用)

     示例:
          var input = document.getElementsByName("input");
          alert(input[0].value);
          alert(input.length);

   4 getElementsByClassName()返回指定的类名的对象集合

     属性:length 可通过下标方式访问
     问题:有兼容性问题 ,在 IE 不能使用 ,在 FF CHROM 可以使用

     解决兼容性问题:

           unction getClassName(ClassName){

                if(document.getElementsByClassName){
                    return document.getElementsByClassName(ClassName)
                }else{
                    var all = document.getElementsByTagName("*");
                    var arr=[];
                    for(var i=0;i<all.length;i++){
                        if(all[i].className == ClassName){
                            arr.push(all[i]);
                        }
                    }
                    return arr;
                }

            }
            alert(getClassName("class1")[0].value);

            <input class="class1" name="input" type="text" value="123"/>
            <input class="class1" name="input" type="text"/>
            <input class="class1" name="input" type="text"/>
            <input id="button" type="button" value="刷新"/>

    5 write()  document.write("")输出数据在网页上

document对象集合:

     1 all:所有对象集合使用该属性用于判断/解决兼容性问题

      示例:
         if(document.all){
               alert("IE") ;
            }else{
                alert("OTHER")
            }
    针对IE 则输出 "IE" 针对FF或者CHROME 则输出 "OTHER";注:document.all只针对IE;

    2 form :所有form表单集合
            访问:通过下标/通过name

     示例:

     alert(document.forms[0][2].value);
     alert(document.forms[0].name1[0].value);

     <form action="">
        <input name="name1" type="text" value="1"/>
        <input name="name1" type="text" value="2"/>
        <input type="text" value="3"/>
        <input type="text" value="4"/>
    </form>

操作元素内容:

    innerHTML:设置或获取 *标签中的内容比如"<h1>测试</h1>"

    示例:var a = document.getElementById("a");
            alert(a.innerHTML);

          <div id="a"><h1>测试</h1></div>获取的是"<h1>测试</h1>"
   有兼容问题:
    innerText:获取文字内容(针对IE)

    textContent:获取文字内容(FF CHROM)

   解决兼容性问题:

       var a = document.getElementById("a");
             function b(a){
                 if(document.all){
                     alert(a.innerText);
                 }else{
                     alert(a.textContent);
                 }
             }
            b(a);

      <div id="a">
       <h1>测试</h1>
     </div>

属性操作: 对象.属性=值
                 var a = document.getElementsByTagName("a")[0];
                 a.href="一个新的地址";
                 a.className="无设置CLASS标签时,可以取CLASS名";
                 a.getAttribute("href","newhref");

         getAttribute("属性") 获取属性  setAttribute("属性","值") 设置属性

样式操作:
        1 行内样式:*对象.style.属性

        var div = document.getElementsByTagName("div")[0];
        div.style.backgroundColor="red";值必须为字符串

           小技巧:div.className = "另一个设置了样式的类名";原class设置的样式全部变成新的样式

        2 CSS层叠样式 : 通过ID更改样式(批量更改尽量用CLASS值更改)
通过CLASS更改样式(批量更改)
更改或获取某个属性的值: