在上一篇讲了location对象与history对象操作 今天来对Document对象进行讲解
document对象既是window对象的一部分也是整HTML文档可用来访问所有的元素
1.常用属性referred与URl
此处URl的使用方法想必大家都是了解的,而重点要讲的是referred属性它能返回载入当前文档的url 如果当前文档不是通过超链接访问的 则会返回一个空值 这就有点类似与看你是否是从官方入口进入的意思差不多 如果不是指定的页面进入 系统将会提示不能浏览或者跳转到别的页面。
2.常用方法
此处相对来说比较重要关于document的方法以后也会经常用到其中有:
getElementById()方法一般用于访问div 图片 表单等元素 要求访问对象id是唯一的
getElementsByName()一般用于访问具有同以name属性的元素 如表单按钮、复选框等
getElementsByTagName()是按标签来访问页面元素 一般用于访问一组的相同元素
下面直接放实验代码:
<body>
<div id="node">永恒</div>
<input type="button" value="改变文本内容" name="l1" onclick="Str1()">
<input type="text" value="风" name="season">
<input type="text" value="火" name="season">
<input type="text" value="水" name="season">
<input type="text" value="雷" name="season">
<input type="button" value="显示带有input标签的内容" name="l1" onclick="Str2()">
<input type="button" value="显示带有season名字的内容" name="l1" onclick="Str3()">
<p id="s"></p>
<script type="text/javascript">
function Str1(){
document.getElementById("node").innerHTML="不灭";
}
function Str2(){
var ll=document.getElementsByTagName("input");
var sStr="";
for(var i=0;i<ll.length;i++){
sStr+=ll[i].value+"<br/>";
}
document.getElementById("s").innerHTML=sStr;
}
function Str3(){
var ll=document.getElementsByName("season");
var sStr="";
for(var i=0;i<ll.length;i++){
sStr+=ll[i].value+"<br/>";
}
document.getElementById("s").innerHTML=sStr;
}
</script>
</body>
第一个Str1用于替换掉原文本框内的内容 ;第二个则是讲所有input标签所包含的内容存在新容器里面然后进行输出 ;第三个则是将所有的name为season的内容进行输出
简介来理解就是getElementById()获取他的内容地址; getElementsByName()查找包含该名称的内容;getElementsByTagName()访问所有相同标签的内容
3.Data对象
Date对象用于操作日期时间 date对象的使用需要实例化调用
以下以实例进行讲解:
<body>
<!-- date对象的使用需要实例化调用 -->
<!-- 以下对date对象常用方法进行讲解 -->
<input type="button" value="点击获取时间" onclick="str()">
<div id="ll"></div>
<div id="lm"></div>
<script type="text/javascript">
function str(){
var today = new Date();//Date()获取当前时间
var nf= today.getFullYear();//获取年份 getFullYear()返回的是四位数的年份 getYear()返回的则是两位数的
var yf= today.getMonth();//获取月份
var tt= today.getDate();//获取今天多少号
var xp= today.getDay();//获取星期几
var hh=today.getHours(); //获取小时
var mm= today.getMinutes(); //获取分钟
var ss= today.getSeconds(); //获取秒
document.getElementById("ll").innerHTML="现在日期是:"+nf+"-"+yf+"-"+tt+"-星期"+xp+"<br/>";
document.getElementById("lm").innerHTML="现在时间是:"+hh+":"+mm+":"+ss;
}
</script>
</body>
Date对象用于对时间的各种操作比如显示年月日 当前时间等 在后面还可以对其进行定时设置循环调用达到动态时钟的效果。
4.Mate对象
它提供了许多与数学相关的内容 Math对象它属于一个工具类不用创建对象,它里面封装了数字运算相关的属性和方法
如:
ceil() 向上舍入 正大于等5以上舍入 负数相反
floor()向下舍入 与ceil相反
found() 四舍五入
random() 生成一个随机数 默认返回随机数包括0但不包括1 想生成一段数字内的随机数 代码如下 var iNum=Math.floor(Math.random()*100+1)这里不加Math.floor的话会生成小数
<body>
<div id="color"></div>
<input type="button" value="抽取你的随机颜色" onclick="strColor()">
<!-- Math对象它属于一个工具类不用创建对象,它里面封装了数字运算相关的属性和方法 -->
<script type="text/javascript">
function strColor() {
var color = new Array("红色","黄色","紫色","蓝色","绿色","橙色","青色","灰色","白色");
var num = Math.ceil(Math.random()*9)-1;//random()抽取随机数在限定范围内
document.getElementById("color").innerHTML=color[num];
}
</script>
</body>
5.定时函数
在之前的讲解中就有讲过setTimeout()与setInterval()函数 这里同时还会再加上清除时间定时器函数clearTimeout()与setInterval()一起来讲解。
以上面的时间案例为基础来实现动态的时钟案例:
<body>
<!-- 在前面的DOM对象的时候就有讲过时间函数现在加以运用 -->
<!-- 结合前面的Date对象进行使用制作走动的时间 -->
<div id="ll"></div>
<div id="lm"></div>
<input type="button" value="停止" onclick="ll()">
<script type="text/javascript">
function str(){
var today = new Date();//Date()获取当前时间
var nf= today.getFullYear();//获取年份 getFullYear()返回的是四位数的年份 getYear()返回的则是两位数的
var yf= today.getMonth();//获取月份
var tt= today.getDate();//获取今天多少号
var xp= today.getDay();//获取星期几
var hh=today.getHours(); //获取小时
var mm= today.getMinutes(); //获取分钟
var ss= today.getSeconds(); //获取秒
document.getElementById("ll").innerHTML="现在日期是:"+nf+"-"+yf+"-"+tt+"-星期"+xp+"<br/>";
document.getElementById("lm").innerHTML="现在时间是:"+hh+":"+mm+":"+ss;
}
str();
var tm=setInterval("str()",1000);//循环调用时间函数
function ll(){
clearInterval(tm);//此函数用于清除函数设置的定时器 类似于加载的过程中取消加载的意味
}
</script>
</body>
setTimeout()是设置再多少毫秒后对所要调用的函数或者方法进行调用
clearTimeout()与setInterval()用于清除他们所对应的定时器