当前位置：
文档之家› JavaScript_document对象详解
JavaScript_document对象详解
javaScript document对象详解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 //https://www.doczj.com/doc/d43578133.html,属性
c)引用图片的src属性
document.images.oImage.src //https://www.doczj.com/doc/d43578133.html,属性.src
d)创建一个图象
var oImage
oImage = new Image()
document.images.oImage.src=”1.jpg”
同时在页面上建立一个img /标签与之对应就可以显示
———————————————————————-
forms集合(页面中的表单)
a)通过集合引用
document.forms //对应页面上的form标签
document.forms.length //对应页面上/formform标签的个数document.forms[0] //第1个/formform标签
document.forms[i] //第i-1个/formform标签
document.forms[i].length //第i-1个/formform中的控件数document.forms[i].elements[j] //第i-1个/formform中第j-1个控件
b)通过标签name属性直接引用
/form form name=”Myform”>input name=”myctrl”/>/form document.Myform.myctrl //document.表单名.控件名
c)访问表单的属性
document.forms[i].name //对应form name>属性
document.forms[i].action //对应/formform action>属性document.forms[i].encoding //对应/formform enctype>属性document.forms[i].target //对应/formform target>属性
document.forms[i].appendChild(oTag) //动态插入一个控件document.all.oDiv //引用图层oDiv
document.all.oDiv.style.display=” //图层设置为可视
document.all.oDiv.style.display=”none” //图层设置为隐藏document.getElementId(”oDiv”) //通过getElementId引用对象docu ment.getElementId(”oDiv”).style=”
document.getElementId(”oDiv”).display=”none”
/*document.all 表示document中所有对象的集合
只有ie支持此属性，因此也用来判断浏览器的种类*/
图层对象的4个属性
document.getElementById(”ID”).innerText //动态输出文本document.getElementById(”ID”).innerHTML //动态输出HTML documen t.getElementById(”ID”).outerText //同innerText document.getElementById(”ID”).outerHTML //同innerHTML
2008-09-07
Javascript的document对象
文章分类:Web前端
Javascript的document对象
对象属性:
document.title //设置文档标题等价于HTML的
标签document.bgColor //设置页面背景色</p><p>document.fgColor //设置前景色(文本颜色)</p><p>document.linkColor //未点击过的链接颜色</p><p>document.alinkColor //激活链接(焦点在此链接上)的颜色document.vlinkColor //已点击过的链接颜色</p><p>document.URL //设置URL属性从而在同一窗口打开另一网页</p><p>document.fileCreatedDate //文件建立日期，只读属性</p><p>document.fileModifiedDate //文件修改日期，只读属性</p><p>document.fileSize //文件大小，只读属性</p><p>document.cookie //设置和读出cookie</p><p>document.charset //设置字符集简体中文:gb2312</p><p>----------------------------</p><p>常用对象方法:</p><p>document.write() //动态向页面写入内容document.createElement(Tag) //创建一个html标签对象document.getElementById(ID) //获得指定ID值的对象document.getElementsByName(Name) //获得指定Name值的对象document.body.appendChild(oTag)</p><p>===================================================================== ===</p><p>body-主体子对象</p><!--/p4--><!--p5--><p>document.body //指定文档主体的开始和结束等价于</p><p><body></body></p><p>document.body.bgColor //设置或获取对象后面的背景颜色document.body.link //未点击过的链接颜色</p><p>document.body.alink //激活链接(焦点在此链接上)的颜色document.body.vlink //已点击过的链接颜色</p><p>document.body.text //文本色</p><p>document.body.innerText //设置<body>...</body>之间的文本document.body.innerHTML //设置<body>...</body>之间的HTML代码document.body.topMargin //页面上边距</p><p>document.body.leftMargin //页面左边距</p><p>document.body.rightMargin //页面右边距</p><p>document.body.bottomMargin //页面下边距</p><p>document.body.background //背景图片</p><p>document.body.appendChild(oTag) //动态生成一个HTML对象</p><p>----------------------------</p><p>常用对象事件:</p><p>document.body.onclick="func()" //鼠标指针单击对象是触发document.body.onmouseover="func()" //鼠标指针移到对象时触发document.body.onmouseout="func()" //鼠标指针移出对象时触发===================================================================== ===</p><p>location-位置子对象:</p><p>document.location.hash // #号后的部分</p><p>document.location.host // 域名+端口号</p><p>document.location.hostname // 域名</p><p>document.location.href // 完整URL</p><p>document.location.pathname // 目录部分</p><p>document.location.port // 端口号</p><p>document.location.protocol // 网络协议(http:)</p><p>document.location.search // ?号后的部分</p><p>----------------------------</p><p>常用对象事件:</p><p>documeny.location.reload() //刷新网页</p><p>document.location.reload(URL) //打开新的网页</p><p>document.location.assign(URL) //打开新的网页</p><p>document.location.replace(URL) //打开新的网页</p><p>===================================================================== ===</p><p>selection-选区子对象</p><!--/p5--><!--p6--><p>document.selection</p><p>===================================================================== ===</p><p>images集合(页面中的图象):</p><p>----------------------------</p><p>a)通过集合引用</p><p>document.images //对应页面上的<img>标签</p><p>document.images.length //对应页面上<img>标签的个数document.images[0] //第1个<img>标签</p><p>document.images[i] //第i-1个<img>标签</p><p>----------------------------</p><p>b)通过name属性直接引用</p><p><img name="oImage"></p><p>document.images.oImage //https://www.doczj.com/doc/d43578133.html,属性</p><p>----------------------------</p><p>c)引用图片的src属性</p><p>document.images.oImage.src //https://www.doczj.com/doc/d43578133.html,属性.src</p><p>----------------------------</p><p>d)创建一个图象</p><p>var oImage</p><p>oImage = new Image()</p><p>document.images.oImage.src="1.jpg"</p><p>同时在页面上建立一个<img>标签与之对应就可以显示</p><p>----------------------------</p><p>示例代码(动态创建图象)：</p><p><html></p><p><img name=oImage></p><p><script language="javascript"></p><p>var oImage</p><p>oImage = new Image()</p><p>document.images.oImage.src="1.jpg"</p><p></script></p><p></html></p><p><html></p><p><script language="javascript"></p><p>oImage=document.caeateElement("IMG")</p><p>oImage.src="1.jpg"</p><p>document.body.appendChild(oImage)</p><p></script></p><p></html></p><p>===================================================================== ===</p><p>forms集合(页面中的表单):</p><!--/p6--><!--p7--><p>----------------------------</p><p>a)通过集合引用</p><p>document.forms //对应页面上的<form>标签document.forms.length //对应页面上<form>标签的个数document.forms[0] //第1个<form>标签</p><p>document.forms[i] //第i-1个<form>标签document.forms[i].length //第i-1个<form>中的控件数document.forms[i].elements[j] //第i-1个<form>中第j-1个控件----------------------------</p><p>b)通过标签name属性直接引用</p><p><form name="Myform"><input name="myctrl"></form></p><p>document.Myform.myctrl //document.表单名.控件名</p><p>----------------------------</p><p>c)访问表单的属性</p><p>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) //动态插入一个控件</p><p>----------------------------</p><p>示例代码(form)：</p><p><html></p><p><!--Text控件相关Script--></p><p><form name="Myform"></p><p><input type="text" name="oText"></p><p><input type="password" name="oPswd"></p><p><form></p><p><script language="javascript"></p><p>//获取文本密码框的值</p><p>document.write(document.Myform.oText.value)</p><p>document.write(document.Myform.oPswd.value)</p><p></script></p><p></html></p><p>----------------------------</p><p>示例代码(checkbox)：</p><p><html></p><p><!--checkbox,radio控件相关script--></p><p><form name="Myform"></p><p><input type="checkbox" name="chk" value="1">1</p><p><input type="checkbox" name="chk" value="2">2</p><p></form></p><p><script language="javascript"></p><p>function fun(){</p><p>//遍历checkbox控件的值并判断是否选中</p><!--/p7--><!--p8--><p>var length</p><p>length=document.forms[0].chk.length</p><p>for(i=0;i<length;i++){</p><p>v=document.forms[0].chk[i].value</p><p>b=document.forms[0].chk[i].checked</p><p>if(b)</p><p>alert(v=v+"被选中")</p><p>else</p><p>alert(v=v+"未选中")</p><p>}</p><p>}</p><p></script></p><p><a href=# onclick="fun()">ddd</a></p><p></html></p><p>----------------------------</p><p>示例代码(Select)：</p><p><html></p><p><!--Select控件相关Script--></p><p><form name="Myform"></p><p><select name="oSelect"></p><p><option value="1">1</option></p><p><option value="2">2</option></p><p><option value="3">3</option></p><p></select></p><p></form></p><p><script language="javascript"></p><p>//遍历select控件的option项</p><p>var length</p><p>length=document.Myform.oSelect.length</p><p>for(i=0;i<length;i++)</p><p>document.write(document.Myform.oSelect[i].value) </script></p><p><script language="javascript"></p><p>//遍历option项并且判断某个option是否被选中</p><p>for(i=0;i<document.Myform.oSelect.length;i++){</p><p>if(document.Myform.oSelect[i].selected!=true)</p><p>document.write(document.Myform.oSelect[i].value) else</p><p>document.write("<font</p><p>color=red>"+document.Myform.oSelect[i].value+"</font>") }</p><p></script></p><!--/p8--><!--p9--><p><script language="javascript"></p><p>//根据SelectedIndex打印出选中的option</p><p>//(0到document.Myform.oSelect.length-1)</p><p>i=document.Myform.oSelect.selectedIndex</p><p>document.write(document.Myform.oSelect[i].value)</p><p></script></p><p><script language="javascript"></p><p>//动态增加select控件的option项</p><p>var oOption = document.createElement("OPTION");</p><p>oOption.text="4";</p><p>oOption.value="4";</p><p>document.Myform.oSelect.add(oOption);</p><p></script></p><p><html></p><p>===================================================================== ===</p><p>Div集合(页面中的层):</p><p><Div id="oDiv">Text</Div></p><p>document.all.oDiv //引用图层</p><p>oDiv</p><p>document.all.oDiv.style.display="" //图层设置为可视document.all.oDiv.style.display="none" //图层设置为隐藏document.getElementId("oDiv") //通过getElementId引用对象</p><p>document.getElementId("oDiv").</p><p>document.getElementId("oDiv").display="none"</p><p>/*document.all表示document中所有对象的集合</p><p>只有ie支持此属性，因此也用来判断浏览器的种类*/</p><p>----------------------------</p><p>图层对象的4个属性</p><p>document.getElementById("ID").innerText //动态输出文本document.getElementById("ID").innerHTML //动态输出HTML document.getElementById("ID").outerText //同innerText document.getElementById("ID").outerHTML //同innerHTML</p><p>----------------------------</p><p>示例代码：</p><p><html></p><p><script language="javascript"></p><p>function change(){</p><p>document.all.oDiv.style.display="none"</p><p>}</p><p></script></p><!--/p9--><!--p10--><p><Div id="oDiv" onclick="change()">Text</Div></p><p></html></p><p><html></p><p><script language="javascript"></p><p>function changeText(){</p><p>document.getElementById("oDiv").innerText="NewText" }</p><p></script></p><p><Div id="oDiv" onmouseover="changeText()">Text</Div> </html></p><!--/p10--><!--rset--><h2>教案中如何写三维目标的设计</h2><p>教案中如何写三维目标的设计 上传: 汪锦坤更新时间：2013-1-8 18:31:05 教案中如何写三维目标的设计 一、对三维目标内涵的理解 关于三维目标，新课改方案中已提出多年，但在具体实施的过程中，有些教师总感觉很难把握，甚至在理解上出现了偏差，如不少教师把“过程与方法”理解为教师的教学过程和教学方法。 （一）知识与技能（一维） 所谓知识目标，这里主要指学生要学习的学科知识（教材中的间接知识）、意会知识（生活经验和社会经验等）、信息知识（通过多种信息渠道而获得的知识）。 知识目标的表达举例（要注意行为主体，行为动词，行为条件和表现程度）： ·通过学习，知道动物也是有情感的； ·通过学习，理解分数的基本性质。 所谓技能目标是指通过练习而形成的对完成某种任务所必须的活动方式。技能目标可为分“四种”：一是基本技能。如读、写、算的技能。目标表达举例：通过学习，能正确地有感情地朗读课文。 二是智力技能。如感知、记忆、想象和思维、推理等技能。目标表达举例：通过学习,学会用实验与推理的科学方法来研究物体和认识物体。 三是动作技能。如绘画、做操、打球等。目标表达举例：通过学习，初步掌握前滚翻和后滚翻的基本要领。 四是自我认知技能。即认知活动的自我调节和监控技能。如自己会做计划，会核对自己的成绩，会检查自己解题方法是否合理、有效，会评价自己的作业水平等。目标表达举例：通过学习，学会制定自主阅读的计划。 （二）过程与方法（二维） 过去教学重结论轻过程，现在要求学生不仅知道简单的结论，更要知道一些过程。过去重教法，现在要重学法。 所谓过程，其本质是以学生认知为基础的知、情、意、行的培养和发展过程，是以智育为基础的德、智、体全面培养和发展的过程，是学生的兴趣、能力、性格、气质等个性品质全面培养和发展的过程。 过程目标的表达举例： ·通过学习，认识分数的发生和发展过程。 ·通过学习，学会xx结构的归纳和演绎过程。 ·通过学习，理解xx问题解题思路的探寻、分析和综合过程。 ·通过学习，掌握xx解题方法的选择与比较过程等。 所谓方法，是指学生在学习过程中采用并学会的方法。方法目标的表达举例：通过学习，采用并学会自主学习的方法（或问题探究的方法，或问题的观察方法，或思维发散的方法，或合作交流的方法，或解决xx问题的方法等）。 （三）情感·态度·价值观（三维） 所谓情感，是指人的社会性需要是否得到满足时所产生的态度体验。人的情感表现状态有以下几种：一是表现为情绪。情绪是一种较低级的简单的情感，如愉快、激动、紧张等。情绪目标的表达举例：通过学习，能产生愉快的感觉。 二是表现为热情。一个人有政治热情，他就对祖国、民族、人民产生深厚的爱，并转化为力量和行为。一个人有学习热情，他就能潜心钻研，做出成绩。 目标表达举例： ·通过学习，激发起爱国主义的情感； ·通过学习，激发起学习的热情。</p><h2>Js中的Parent对象</h2><p>Js中的Parent对象 文章分类:Web前端 该变更永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令，就可以用top变量。 parent： 该变量指的是包含当前分割窗口的父窗口。如果在一个窗口内有分割窗口，而在其中一个分割窗口中又包含着分割窗口，则第2层的分割窗口可以用parent变量引用包含它的父分割窗口。 opener： 指用WINDOW.OPEN等方式创建的新窗口对应的原窗口。 附：Window对象、Parent对象、Frame对象、Document对象和Form对象的阶层关系：Windows对象→Parent对象→Frame对象→Document对象→Form对象， 如下：parent.frame1.document.forms[0].elements[0].value; 问题：在一个页面嵌入框架<iframe>，然后在框架中使用javascript脚本：parent.xx.value='xxxxx'; 在IE中可以正常看到赋值，但是在firefox中则不能完成赋值。请问在firefox中调用父框架的对象应该是哪个，是否和IE兼容？ 解答：window.parent.document.form名.xx.value='xxxxx'; window可省略。 parent.document.form 名.xx.value='xxxxx'; parent.document.getElementById("xx").value='xx xxx'; window.parent与window.opener的区别 javascript调用主窗口方法 1： window.parent 是iframe页面调用父页面对象 举例: a.html <html> <head><title>父页面
