`
snoopy7713
  • 浏览: 1152244 次
  • 性别: Icon_minigender_2
  • 来自: 火星郊区
博客专栏
Group-logo
OSGi
浏览量：0
社区版块
存档分类
最新评论

Javascript中的Document对象详解

javascriptDOCUMENTJavascript中的Document对象详解 
阅读更多

 

  •   
  • ---------------------------------------------------------------------       
  •   
  • 注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写       
  •   
  •    否则会提示你一个错误信息  "引用的元素为空或者不是对象"        
  •   
  • ---------------------------------------------------------------------       
  •   
  • 对象属性       
  •   
  • document.title             //设置文档标题等价于HTML的<title>标签       
  •   
  • document.bgColor           //设置页面背景色       
  •   
  • document.fgColor           //设置前景色(文本颜色)       
  •   
  • Links                             //此文档中所有链接的集        
  •   
  • document.linkColor         //未点击过的链接颜色       
  •   
  • document.alinkColor        //激活链接(焦点在此链接上)的颜色       
  •   
  • document.vlinkColor        //已点击过的链接颜色       
  •   
  • document.URL               //设置URL属性从而在同一窗口打开另一网页       
  •   
  • Location                        //此页的URL        
  •   
  • Referrer                         //链接此页的网页的URL        
  •   
  • document.fileCreatedDate   //文件建立日期，只读属性       
  •   
  • document.fileModifiedDate  //文件修改日期，只读属性       
  •   
  • document.fileSize          //文件大小，只读属性       
  •   
  • document.cookie            //设置和读出cookie       
  •   
  • document.charset           //设置字符集 简体中文:gb2312       
  •   
  • ---------------------------------------------------------------------       
  •   
  • 属性描述        
  •   
  • ActiveElement    //当前具有焦点的元素        
  •   
  • All                      //此文档中所有元素的集        
  •   
  • Anchors            // 此文档中所有定位的集        
  •   
  • Applets             //此文档中所有applet的集        
  •   
  • Domain            // 获得此文件的Web服务器所在的域名        
  •   
  • Forms              // 此文档中所有窗体的集        
  •   
  • Frames            //此文档中所有框架的集        
  •   
  • Images            // 此文档中所有图象的集        
  •   
  • LastModified    // 此文件最后一次修改时的日期和时间        
  •   
  • ReadyState      //此页的下载状态，等于”uninitialized”（页调入前）、”loading”（页调入中）、”interactive”（操作链接时）或”complete”（完成调入）       
  •   
  • Scripts              //此文档中所有脚本的集        
  •   
  • StyleSheets      此文档中所有style sheet的集        
  •   
  • Title 此页的标题        
  •   
  • URL 此页的URL        
  •   
  • VlinkColor 点击过的链接的颜色        
  •   
  • -------------------------------对象方法--------------------------------------       
  •   
  • Close() 关闭HTML输出流        
  •   
  • Open() 打开HTML输出流        
  •   
  • Write(str) 往HTML输出流中写入str        
  •   
  • Writeln(str) 往HTML输出流中写入str和一个新行        
  •   
  • document.write()                  //动态向页面写入内容       
  •   
  • document.createElement(Tag)       //创建一个html标签对象       
  •   
  • document.getElementById(ID)       //获得指定ID值的对象       
  •   
  • document.getElementsByName(Name)  //获得指定Name值的对象       
  •   
  • ---------------------------------------------------------------------       
  •   
  •       
  •   
  • images集合(页面中的图象)       
  •   
  •       
  •   
  • a)通过集合引用       
  •   
  • document.images             //对应页面上的<img>标签       
  •   
  • document.images.length      //对应页面上<img>标签的个数       
  •   
  • document.images[0]          //第1个<img>标签                  
  •   
  • document.images[i]          //第i-1个<img>标签       
  •   
  •       
  •   
  • b)通过name属性直接引用       
  •   
  • <img name="oImage" >      
  •   
  • document.images.oImage      //document.images.name属性       
  •   
  •       
  •   
  • c)引用图片的src属性       
  •   
  • document.images.oImage.src  //document.images.name属性.src       
  •   
  •       
  •   
  • d)创建一个图象       
  •   
  • var  oImage       
  •   
  • oImage = new  Image()       
  •   
  • document.images.oImage.src="/1.jpg"       
  •   
  • 同时在页面上建立一个<img>标签与之对应就可以显示       
  •   
  •       
  •   
  • <html>      
  •   
  • <img name=oImage>      
  •   
  • <script language="javascript" >      
  •   
  •    var  oImage       
  •   
  •    oImage = new  Image()       
  •   
  •    document.images.oImage.src="/1.jpg"       
  •   
  • </script>      
  •   
  • </html>      
  •   
  •       
  •   
  • ----------------------------------------------------------------------       
  •   
  •       
  •   
  • forms集合(页面中的表单)       
  •   
  •       
  •   
  • a)通过集合引用       
  •   
  • document.forms                 //对应页面上的<form>标签       
  •   
  • document.forms.length          //对应页面上<form>标签的个数       
  •   
  • document.forms[0]              //第1个<form>标签       
  •   
  • document.forms[i]              //第i-1个<form>标签       
  •   
  • document.forms[i].length       //第i-1个<form>中的控件数       
  •   
  • document.forms[i].elements[j]  //第i-1个<form>中第j-1个控件       
  •   
  •       
  •   
  • b)通过标签name属性直接引用       
  •   
  • <form name="Myform" ><input name="myctrl" ></form>      
  •   
  • document.Myform.myctrl         //document.表单名.控件名       
  •   
  •       
  •   
  • -----------------------------------------------------------------------       
  •   
  • <html>      
  •   
  • <!--Text控件相关Script-->      
  •   
  • <form name="Myform" >      
  •   
  • <input type="text"  name="oText" >      
  •   
  • <input type="password"  name="oPswd" >      
  •   
  • <form>      
  •   
  • <script language="javascript" >      
  •   
  • //获取文本密码框的值       
  •   
  • document.write(document.Myform.oText.value)       
  •   
  • document.write(document.Myform.oPswd.value)       
  •   
  • </script>      
  •   
  • </html>      
  •   
  • -----------------------------------------------------------------------       
  •   
  • <html>      
  •   
  • <!--Select控件相关Script-->      
  •   
  • <form name="Myform" >      
  •   
  • <select name="oSelect" >      
  •   
  • <option value="1" >1</option>      
  •   
  • <option value="2" >2</option>      
  •   
  • <option value="3" >3</option>      
  •   
  • <option value="4" >4</option>      
  •   
  • <option value="7" >sdf</option>      
  •   
  • </select>      
  •   
  • </form>      
  •   
  •       
  •   
  • <script language="javascript" >      
  •   
  •    //遍历select控件的option项       
  •   
  •    var  length       
  •   
  •   document.write(document.Myform.oSelect.length+"<BR>" )       
  •   
  •    length=document.Myform.oSelect.length       
  •   
  •    for (i=0;i<length;i++)       
  •   
  •    document.write(document.Myform.oSelect[i].value+"<BR>" )       
  •   
  • </script>      
  •   
  •       
  •   
  • <script language="javascript" >      
  •   
  •    //遍历option项并且判断某个option是否被选中       
  •   
  •    for (i=0;i<document.Myform.oSelect.length;i++){       
  •   
  •    if (document.Myform.oSelect[i].selected!=true )       
  •   
  •    document.write(document.Myform.oSelect[i].value+"<BR>" )       
  •   
  •    else        
  •   
  •    document.write("<font color=red>" +document.Myform.oSelect[i].value+"</font>" +"<BR>" )          
  •   
  •    }       
  •   
  • </script>      
  •   
  •       
  •   
  • <script language="javascript" >      
  •   
  •    //根据SelectedIndex打印出选中的option       
  •   
  •    //(0到document.Myform.oSelect.length-1)       
  •   
  •    i=document.Myform.oSelect.selectedIndex       
  •   
  •    document.write(i+"<B>" +"<BR>" )       
  •   
  •    document.write(document.Myform.oSelect[i].value)       
  •   
  • </script>      
  •   
  •       
  •   
  • <script language="javascript" >      
  •   
  •    //动态增加select控件的option项       
  •   
  •    var  oOption = document.createElement("OPTION" );       
  •   
  •    oOption.text="4" ;       
  •   
  •    oOption.value="4" ;       
  •   
  •    document.Myform.oSelect.add(oOption);       
  •   
  • </script>      
  •   
  • <html>      
  •   
  • -----------------------------------------------------------------------       
  •   
  • <Div id="oDiv" >Text</Div>      
  •   
  • document.all.oDiv                       //引用图层oDiv       
  •   
  • document.all.oDiv.style                        
  •   
  • document.all.oDiv.style.display=""       //图层设置为可视       
  •   
  • document.all.oDiv.style.display="none"   //图层设置为隐藏       
  •   
  • /*document.all表示document中所有对象的集合      
  •  
  • 只有ie支持此属性，因此也用来判断浏览器的种类*/
    • 分享到：
    | 八款Js框架介绍及比较
    评论
    发表评论

    您还没有登录,请您登录后再发表评论

    相关推荐

      javascript-document对象详解(下).zip

      在这个“javascript-document对象详解(下)”的压缩包中，我们可以通过三个文件来深入理解这个核心概念。 首先，`29.document-fun.html`可能是一个包含实际代码示例的HTML文件，它展示了`document`对象在实践中的...

      javascript的document对象

      ### JavaScript的Document对象详解 在Web开发中，`Document`对象是浏览器提供的核心对象之一，它代表了当前加载的HTML文档，并提供了与该文档交互的方法和属性。掌握`Document`对象的基本用法对于进行前端开发至关...

      JavaScript的document和window对象详解

      ### JavaScript的document和window对象详解 #### Document对象 在JavaScript中，`document`对象是`window`和`frames`对象的一个属性，它表示显示在窗口或框架内的HTML文档。通过这个对象，开发者能够访问和操作...

      javasxript_document对象详解.txt

      ### JavaScript Document 对象详解 #### 一、Document 对象简介 在JavaScript中，`Document`对象是构成浏览器文档对象模型（DOM）的核心部分之一。它提供了对网页文档结构的访问和控制能力，允许开发者通过脚本...

      js document对象详解

      作为 JavaScript 脚本语言中最重要的对象之一，document 对象提供了大量的属性和方法来操作和控制 HTML 文档。下面是对 document 对象的详细介绍。 document 对象属性 1. document.title：设置文档标题，等价于 ...

      javascript document 对象的用法大全

      ### JavaScript Document 对象详解 #### 一、Document 对象简介 在Web开发中，`document`对象是浏览器提供的一种能够操作HTML文档的方式。它属于浏览器的`window`对象的一个属性，可以通过`window.document`或者...

      javascript document对象详细介绍

      ### JavaScript Document对象详解 #### 一、概述 在Web开发中，`document`对象是浏览器提供的核心对象之一，它代表了当前加载的HTML文档，并且提供了访问和操作文档中的元素和内容的方法。通过`document`对象，...

      JavaScript中document对象使用详解

      对象属性 代码如下: document.title //设置文档标题等价于HTML的&lt;title&gt;标签 document.bgColor //设置页面背景色 document.fgColor //设置前景色(文本颜色) document.linkColor //未点击过的链接颜色 ...

      JavaScript的document对象和window对象详解

      在JavaScript中，有两个极为重要的全局对象：document和window。document对象表示整个HTML文档，而window对象则表示浏览器窗口本身。接下来我们将详细介绍这两个对象的关键知识点。 首先，document对象是window对象...

      document 文挡对象详解

      在Web开发中，Document对象是JavaScript的核心组成部分，它代表了HTML或XML文档的结构和内容。这个对象允许我们与页面的DOM（文档对象模型）进行交互，包括创建、修改和检索文档元素。本文将深入探讨Document对象的...

      JavaScript的浏览器对象详解

      JavaScript作为Web开发中不可或缺的一部分，通过其内置的浏览器对象模型（Browser Object Model, BOM）和文档对象模型（Document Object Model, DOM），提供了与浏览器交互、操作网页元素的能力。本文将详细介绍几个...

      JavaScript常用对象详解

      ### JavaScript常用对象详解 在深入探讨JavaScript的常用对象之前，我们先来理解一下JavaScript作为一种脚本语言，在网页开发中的核心作用。JavaScript使网页具备了动态交互能力，它可以通过操作页面对象和执行各种...

      JavaScript事件对象深入详解

      JavaScript事件对象是JavaScript编程中处理用户交互和动态更新页面的核心机制。事件对象(event object)包含了与事件相关的所有信息，如触发事件的元素、事件类型以及特定事件的额外数据。这篇深入详解将帮助我们理解...

      ActiveObject 对象 Msxml2.DOMDocument 详解

      本文将深入探讨ActiveObject中的一个关键对象——Msxml2.DOMDocument，以及它在ASP.NET AJAX WebService中的应用。 Msxml2.DOMDocument是Microsoft XML库（MSXML）中的核心组件，它实现了W3C的Document Object ...

      JS中关于document.all的详解

      ### JS中关于`document.all`的详解 #### 一、`document.all`简介 `document.all` 是一个只读属性，它返回一个包含文档中所有元素的类数组对象。这个特性最初是为 Internet Explorer 设计的，并且在早期版本的 IE 中...

      JavaScript中this关键字使用方法详解

      在JavaScript中，`this`的动态性使得开发者能够灵活地在不同对象间切换上下文，但也带来了理解和调试的挑战。通过掌握上述知识点，你应该能够更好地应对实际开发中的`this`问题。不过，`this`的使用还需要结合实际...

      JavaScript动态网页开发详解——JavaScript特效

      在“JavaScript动态网页开发详解——JavaScript特效”这一主题中，我们将深入探讨JavaScript如何实现各种炫酷的网页效果。 一、JavaScript基础 在讨论特效之前，我们需要了解JavaScript的基础。JavaScript语法与...

    Magicbox
    Global site tag (gtag.js) - Google Analytics