JavaScript学习笔记——DOM_document对象

javascript-document对象详解

DOM document(html xml) object modle
document对象(DOM核心对象)

作用：
　　1.内容 innerHTML
　　2.属性
　　3.样式

document对象

一、属性
　　title 返回或设置当前文档的标题

   alert(document.title)
   document.title="后盾网";

　　URL 返回当前文档的url

   alert(document.URL)
   alert(location.href)

　　bgColor 设置文档的背景色

   document.bgColor="red";

　　fgColor 设置文档的前景色(设置文字颜色)

   document.fgColor="blue";

 

二、方法

　　getElementById(idname) 返回拥有指定id的（第一个）对象的引用  

　　　　innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML

    var div1=document.getElementById("one");
    alert(div1.innerHTML)

<div name="div1" id="one">
 后盾网1
</div>

　　getElementsByTagName(tagname) 返回带有指定标签名的对象的集合

var divs=document.getElementsByTagName("div");
  var lengths=divs.length;
  //alert(lengths)
  //通过下标来访问
    //alert(divs[1].innerHTML)
    for (var i=0; i<lengths; i++) {
    alert(divs[i].innerHTML)
    }

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

  var inputs=document.getElementsByName("text1");
  var lengths=inputs.length;
  alert(lengths)

　　write()

　　**************************************************************
　　getElementsByName(name)在IE中是不兼容的，在IE的表单中是可以兼容的。
　　　　如果是IE：
　　　　　　如果该对象的标准属性包含有name,那么可以正确的使用。否则不可以使用。
　　　　如果是FF:
　　　　　　该方法可以适用于任何情况。
　　　　结论:
　　　　　　主要是适用于表单。
　　**************************************************************

 

　　getElementsByClassName() 返回带有指定classname指定名称的对象的集合

   //var aaas=document.getElementsByClassName("aaa");
   //alert(aaas.length)

<div name="div1" id="one" class="aaa">
 后盾网1
</div>
<div name="div1" id="one" class="aaa">
 后盾网2
</div>

 

　　**********************************************************************
　　不兼容，可以自己写一个兼容性函数

   function byclass (classname) {
      if(document.getElementsByClassName){
        return document.getElementsByClassName(classname)
      }else{
        var tag= document.getElementsByTagName("*");
         var lengths=tag.length;
         var divs=[];
         for (var i=0; i<lengths; i++) {
            if(tag[i].className==classname){
               divs.push(tag[i])
            }
         }
         return divs;
      }
      
   }

 alert(byclass("aaa").length)

　　**********************************************************************

 

三、dcoument对象的集合

　　A.all 所有元素的集合，不兼容

alert(document.all)

　　B.forms 返回对文档中所有form对象的引用

alert(document.forms.length)

　　　　通过集合来访问相应的对象

　　　　1.通过下标的形式，弹出表单的name

   //访问 1.下标
     //alert(document.forms[1].name)

　　　　2.通过name形式

    //2.name属性
      alert(document.forms["myform1"].text1.value)

 

　　C. anchors 返回对文档中所有anchors 对象的引用(即所有a链接)

 

　　D.images 返回对文档中所有image 对象的引用
　　F.links 返回对文档中所有area 对象和link对象的引用