zoukankan      html  css  js  c++  java
  • 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对象的引用

  • 相关阅读:
    【JS】修改字体
    【git】.gitignore文件常用设置
    【CSS】让textarea在div里水平垂直都居中的三种办法
    【JS】随着进度条进展,逐个显示li节点
    【MySQL】The server time zone value 'xxxxxx' is unrecognized or represents more than one time zone 解决方案
    浅谈Web前端开发中的Touch事件
    [转]PostgreSQL与MySQL比较
    RDLC:An error occurred during local report processing
    [转]让你的PHP更安全
    [转]Win7或Windows server 2008中IIS7支持ASP+Access解决方法
  • 原文地址:https://www.cnblogs.com/tonglin0325/p/4714993.html
Copyright © 2011-2022 走看看