`

Javascript - document对象详解

    博客分类:
  • js
阅读更多

document.forms[0]  是获取生成页面的第一个form表单。注意是生成页面,也就是浏览器查看源代码中的第一个form.

所以如果不确定,使用document.getElementById("id").的形式.

 

[web编程]document对象详解

 

 

document 文挡对象 - JavaScript脚本语言描述

---------------------------------------------------------------------

注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写

    否则会提示你一个错误信息 "引用的元素为空或者不是对象"

---------------------------------------------------------------------

对象属性

document.title              //设置文档标题等价于HTML的<title>标签

document.bgColor            //设置页面背景色

document.fgColor            //设置前景色(文本颜色)

document.linkColor          //未点击过的链接颜色

document.alinkColor         //激活链接(焦点在此链接上)的颜色

document.vlinkColor         //已点击过的链接颜色

document.URL                //设置URL属性从而在同一窗口打开另一网页

document.fileCreatedDate    //文件建立日期,只读属性

document.fileModifiedDate   //文件修改日期,只读属性

document.fileSize           //文件大小,只读属性

document.cookie             //设置和读出cookie

document.charset            //设置字符集 简体中文:gb2312

---------------------------------------------------------------------

常用对象方法

document.write()                   //动态向页面写入内容

document.createElement(Tag)        //创建一个html标签对象

document.getElementById(ID)        //获得指定ID值的对象

document.getElementsByName(Name)   //获得指定Name值的对象

document.body.appendChild(oTag)

---------------------------------------------------------------------

body-主体子对象

document.body                //指定文档主体的开始和结束等价于<body></body>

document.body.bgColor        //设置或获取对象后面的背景颜色

document.body.link           //未点击过的链接颜色

document.body.alink          //激活链接(焦点在此链接上)的颜色

document.body.vlink          //已点击过的链接颜色

document.body.text           //文本色

document.body.innerText      //设置<body>...</body>之间的文本

document.body.innerHTML      //设置<body>...</body>之间的HTML代码

document.body.topMargin      //页面上边距

document.body.leftMargin     //页面左边距

document.body.rightMargin    //页面右边距

document.body.bottomMargin   //页面下边距

document.body.background     //背景图片

document.body.appendChild(oTag) //动态生成一个HTML对象

常用对象事件

document.body.onclick="func()"           //鼠标指针单击对象是触发

document.body.onmouseover="func()"       //鼠标指针移到对象时触发

document.body.onmouseout="func()"        //鼠标指针移出对象时触发

---------------------------------------------------------------------

location-位置子对象

document.location.hash       // #号后的部分

document.location.host       // 域名+端口号

document.location.hostname   // 域名

document.location.href       // 完整URL

document.location.pathname   // 目录部分

document.location.port       // 端口号

document.location.protocol   // 网络协议(http:)

document.location.search     // ?号后的部分

documeny.location.reload()       //刷新网页

document.location.reload(URL)    //打开新的网页

document.location.assign(URL)    //打开新的网页

document.location.replace(URL)   //打开新的网页

---------------------------------------------------------------------

selection-选区子对象

document.selection

---------------------------------------------------------------------

images集合(页面中的图象)

a)通过集合引用

document.images              //对应页面上的<img>标签

document.images.length       //对应页面上<img>标签的个数

document.images[0]           //第1个<img>标签           

document.images[i]           //第i-1个<img>标签

b)通过nane属性直接引用

<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>

<html>

<script language="javascript">

    oImage=document.caeateElement("IMG")

    oImage.src="1.jpg"

    document.body.appendChild(oImage)

</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.表单名.控件名

c)访问表单的属性

document.forms[i].name          //对应<form name>属性

document.forms[i].action        //对应<form action>属性

document.forms[i].encoding      //对应<form enctype>属性

document.forms[i].target        //对应<form target>属性

document.forms[i].appendChild(oTag) //动态插入一个控件

-----------------------------------------------------------------------

<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>

<!--checkbox,radio控件相关script-->

<form name="Myform">

<input type="checkbox" name="chk" value="1">1     

<input type="checkbox" name="chk" value="2">2     

</form>     

<script language="javascript">     

function fun(){     

   //遍历checkbox控件的值并判断是否选中     

   var length     

   length=document.forms[0].chk.length     

   for(i=0;i<length;i++){     

   v=document.forms[0].chk[i].value     

   b=document.forms[0].chk[i].checked     

   if(b)     

     alert(v=v+"被选中")     

   else     

     alert(v=v+"未选中")    

   }     

   }     

</script>      

<a href=# onclick="fun()">ddd</a>                      

</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>

</select>

</form>

<script language="javascript">

    //遍历select控件的option项

    var length

    length=document.Myform.oSelect.length

    for(i=0;i<length;i++)

    document.write(document.Myform.oSelect[i].value)

</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)

    else

    document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>")   

    }

</script>

<script language="javascript">

    //根据SelectedIndex打印出选中的option

    //(0到document.Myform.oSelect.length-1)

    i=document.Myform.oSelect.selectedIndex

    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.display=""              //图层设置为可视

document.all.oDiv.style.display="none"          //图层设置为隐藏

document.getElementId("oDiv")                   //通过getElementId引用对象

document.getElementId("oDiv").style=""

document.getElementId("oDiv").display="none"

/*document.all表示document中所有对象的集合

只有ie支持此属性,因此也用来判断浏览器的种类*/

图层对象的4个属性

document.getElementById("ID").innerText   //动态输出文本

document.getElementById("ID").innerHTML   //动态输出HTML

document.getElementById("ID").outerText   //同innerText

document.getElementById("ID").outerHTML   //同innerHTML

<html>

<script language="javascript">

function change(){

document.all.oDiv.style.display="none"

}

</script>

<Div id="oDiv" onclick="change()">Text</Div>

</html>

<html>

<script language="javascript">

function changeText(){

document.getElementById("oDiv").innerText="NewText"

}

</script>

<Div id="oDiv" onmouseover="changeText()">Text</Div>

</html>

分享到:
评论

相关推荐

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

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

    javascript的document对象

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

    window对象--event对象详解

    Window对象在JavaScript中是浏览器全局对象,它代表了浏览器的一个窗口或者一个框架。在这个窗口中,我们可以执行脚本、操作DOM、以及处理用户与页面的交互。Event对象则是JavaScript事件处理中的核心,它包含了与...

    JavaScript的document和window对象详解

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

    js document对象详解

    JS 的 document 对象详解 作为 JavaScript 脚本语言中最重要的对象之一,document 对象提供了大量的属性和方法来操作和控制 HTML 文档。下面是对 document 对象的详细介绍。 document 对象属性 1. document.title...

    document 文挡对象详解

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

    javasxript_document对象详解.txt

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

    javascript document 对象的用法大全

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

    javascript document对象详细介绍

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

    JavaScript的浏览器对象详解

    ### JavaScript的浏览器对象详解 在深入探讨JavaScript的浏览器对象之前,我们先来了解这些对象为何对Web开发至关重要。JavaScript作为Web开发中不可或缺的一部分,通过其内置的浏览器对象模型(Browser Object ...

    JavaScript常用对象详解

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

    【JavaScript-Vue】-Vue知识体系详解

    它是一种轻量级、解释型或即时编译的语言,支持多种编程范式,包括面向对象、命令式、声明式和函数式。JavaScript 可以在浏览器环境中运行,但也可应用于服务器端(如Node.js)和其他非浏览器环境。 Vue.js 是尤雨...

    JavaScript的document对象和window对象详解

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

    JavaScript事件对象深入详解

    这篇深入详解将帮助我们理解如何在DOM(文档对象模型)以及不同浏览器环境下有效地使用事件对象。 在DOM中,事件对象通常作为参数传递给事件处理程序。例如,当用户点击一个按钮,`onclick`事件处理程序会接收到一...

    JavaScript中document对象使用详解

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

    JavaScript-JavaScript语法集锦

    ### JavaScript 语法集锦知识点详解 #### 一、概述 JavaScript 是一种广泛应用于网页开发的脚本语言,它能够使网页具有动态交互功能。本文档将详细介绍一系列常用的 JavaScript 语法和方法,帮助开发者更好地理解和...

    javascript - javascript tutorial

    ### JavaScript基础知识详解 #### JavaScript概述 JavaScript是一种高级编程语言,用于向HTML文档添加交互性。它最初是为了增强网页而设计的,但现在已经被扩展到了几乎所有的软件开发领域,包括移动应用开发和...

Global site tag (gtag.js) - Google Analytics