开发者社区> usher.yue> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

javascript中document对象详解

简介: 注:页面上元 素name属性和JavaScript引用的名称必须一致包括大小写 否则会提示你一个错误信息 “引用的元素为空或者不是对象\\\\\” ——————————————————————— 对象属性 document.
+关注继续查看
注:页面上元 素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 /标签与之对应就可以显示

———————————————————————-

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属性直接引用
/formform 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引用对象
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

Javascript的document对象
对象属性:

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)通过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>

< 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) //动态插入一个控件
----------------------------
示例代码(form):
<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>
----------------------------
示例代码(checkbox):
<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>
----------------------------
示例代码(Select):
<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集合(页面中的层):
<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").
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 创建对象的七种方式
JavaScript 创建对象的七种方式
27 0
JavaScript创建对象的方式!
  JavaScript创建对象的方式!JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产。接下来介绍七种非常经典的创建对象的方式,他们也各有优缺点。
647 0
JavaScript 创建对象的方式
对象直接量 对象直接量是由若干 名/值 对的映射表,名值对中间用冒号分隔,名值对之间用逗号分隔,整个映射表用花括号括起来。属性名可以是JavaScript标识符也可以是字符串直接量(也可以是空字符串),属性的值可以是任意类型的JavaScript表达式,表达式的值即是改属性的值,该值可以是原始值,也可以是对象值。
672 0
[转载]javascript创建对象的几种方式
原文链接:http://qingfeng825.iteye.com/blog/1935648 1. 工厂方法:能创建并返回特定类型对象的工厂函数(factory function). function createCar(sColor) {    // 或者 var car = new Object;    var car = new Object();    // 对象属性    car.
750 0
JavaScript OOP 创建对象的7种方式
原文:JavaScript OOP 创建对象的7种方式 我写JS代码,可以说一直都是面向过程的写法,除了一些用来封装数据的对象或者jQuery插件,可以说对原生对象了解的是少之又少。所以我拿着《JavaScript高级程序设计 第3版》恶补了一下,这里坐下总结笔记,属于菜鸟级别,大神请直接无视。
661 0
JavaScript OOP 创建对象的7种方式
我写JS代码,可以说一直都是面向过程的写法,除了一些用来封装数据的对象或者jQuery插件,可以说对原生对象了解的是少之又少。所以我拿着《JavaScript高级程序设计 第3版》恶补了一下,这里坐下总结笔记,属于菜鸟级别,大神请直接无视。
773 0
javascript中创建对象的几种方式
原文:javascript中创建对象的几种方式 javascript中提供了通过Object构造函数或对象字面量方式来创建单个的对象,当我们想要创建很多对象的时候,简单的通过这两种方法就会产生大量的重复。
1020 0
javascript中创建对象的几种方式
前言:          随着web 2.0 的兴起(最具代表性的是Ajax技术了),javascript不再是程序员眼中的“玩具语言”。 编程在不断的简化,可是“用户体验、性能、兼容性、可扩展......”要求却在不断提高,随之涌现出Prototype、jQuery、ExtJs、Dojo等优秀的框架(类库),大大简化了web开发。
791 0
+关注
usher.yue
算法相关技术专家
431
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载