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对象的引用

 

你可能感兴趣的:(JavaScript学习笔记——DOM_document对象)