一:window.history对象

历史记录,通过历史记录可以操作页面前进或者后退

window.history.back();后退

window.history.forward();前进

window.history.go(n); n是正数代表前进n个页面,n是负数代表后退n个页面。

二:window.location对象

location地址栏

var s = window.location.href;获取当前页面的地址

window.location.href="http://www.baidu.com";修改页面地址,会跳转页面

window.location.hostname: 主机名,域名,网站名,可用变量接收

window.location.pathname: 路径名,可用变量接收

三:window.status对象

status状态栏,可以给状态栏添加要显示的文字

window.status="要在状态栏显示的内容";设置状态栏文字

例子:在状态栏显示:“向前走 就这么走”,并且让这写文字由左向右移动:

function s()
{
window.status = "向前走 就这么走";
window.setTimeout("run()",100);
}
function run()
{
if(window.status.length>=60)
{
window.status = "向前走 就这么走";
}
else
{
window.status = " "+window.status;
}
window.setTimeout("run()",100); }

效果如下图:

四:window.document对象

1. 找到元素

docunment.getElementById("id");根据id找,最多找一个
var a =docunment.getElementById("id");
docunment.getElementByName("name");根据name找,找出来的是数组
docunment.getElementByTagName("name");根据标签名找,找出来的是数组
docunment.getElementByClassName("name") 根据classname找,找出来的是数组

2.操作内容

(1)非表单元素:

获取内容:alert(a.innerHTML);标签里的html代码和文字都获取了

如:body中有这么一个div:

<div id="me"><b>试试吧</b></div>

在script中用innerHTML获取div中的内容:

var a= document.getElementById("me");
alert(a.innerHTML);

结果如下图:

alert(a.innerText);只取里面的文字
alert(a.outHTML);包括标签本身的内容(简单了解)

设置内容:a.innerHTML = "<font color=red >hello world </font>";

如果用设置内容代码结果如下,div中的内容被替换了:


a.innerText会将赋的东西原样呈现

清空内容:赋值个空字符串

(2)表单元素:

两种方式获取:

var t = document.f1.t1; form表单ID为f1里面的ID为t1的input
var t = document.getElementById("id"); 直接用ID获取

alert(t.value); 获取input中的value值
alert(t.innerHTML); 获取<textarea> 这里的值 </textarea>

t.value="内容改变";

*****一个小知识点:

<a href="www.baidu.com" onclick ="return flase">转向百度</a> 加了return flase则不会跳转,return true则会跳转

按钮也一样,如果按钮中return flase 则不会进行提交。

*****

例子:输入姓名为空或者是空格的话return一个flase,点提交的时候不提交内容,输入的内容不为空才提交:

前一段是压缩空格:

function   Trim(m){
while((m.length>0)&&(m.charAt(0)==' '))
m = m.substring(1, m.length);
while((m.length>0)&&(m.charAt(m.length-1)==' '))
m = m.substring(0, m.length-1);
return m;
}
function checkName()
{
var a = document.getElementById("t1");
a.value = Trim(a.value);
if(a.value.length == 0)
{
alert("姓名不能为空");
return false;
}
else
{
return true;
}
}

 

测试结果如下,没有输入内容或者输入空格时:

输入姓名的时候提交,看地址栏里面已经提交上了名字:

3.操作属性

找到按钮的ID,var a = document.getElementById("id");

a.setAttribute("属性名","属性值"); 设置一个属性,添加或更改都可以:disabled

a.getAttribute("属性名");获取属性的值

a.removeAttribute("属性名");移除一个属性

(1)例子:做一个问题,如果输入的答案正确则弹出正确,错误弹出错误;

这里在text里面写了一个daan属性,里面存了答案的值,点击检查答案的时候cheak输入的内容和答案是否一样:

body中的代码:

<form>中华民国成立于哪一年?
<input type="text" daan="1912年" value="" id="t1" name="t1" />
<input type="button" onclick="check()" id="t2" name="t2" value="检查答案" />
</form>

Script中的代码:

function check()
{
var a=document.getElementById("t1");
var a1=a.value;
var a2=a.getAttribute("daan");
if(a1==a2)
{
alert("恭喜你答对了!");
}
else
{
alert("笨蛋!");
}
}

正确时的结果如下:

(2)例子:同意按钮,倒计时10秒,同意按钮变为可提交的。

这里用了操作属性:disable,来改变按钮的状态

body中的代码:

<form>
<input type="submit" id="b1" name="b1" value="同意(9)" disabled="disabled" />
</form>

Script中的代码:

var n=10;
var a= document.getElementById("b1");
function bian()
{
n--;
if(n==0)
{
a.removeAttribute("disabled");
a.value="同意";
return;
}
else
{
a.value= "同意("+n+")";
window.setTimeout("bian()",1000);
}
}
window.setTimeout("bian()",1000);

结果如下图:

4.操作样式

找到ID,var a = document.getElementById("id");

a.style.样式="" ; 操作此ID样式的属性

样式为CSS中的样式,所有的样式都可以用代码进行操作

document.body.stye.backgroundColor="颜色"; 整个窗口的背景色

5.操作样式的class:

a.className="样式表中的classname" 操作一批样式

(1)例子:换窗口的背图片,每隔三秒换一次,循环不止;点上一张、下一张可以切换,这时停止了自动转换。

body的代码:

<body style=" background-image:url(image/1.jpg);">
<iframe id="ff" src="preload.html" width="0" height="0" frameborder="0"></iframe>
<div class="pages" id="p1" onclick="dodo(-1)">前一张</div>
<div class="pages" id="p2" onclick="dodo(1)">后一张</div>
</body>

样式表:

<style type="text/css">
.pages
{
border:1px solid gray;
padding:15px 15px 15px 15px;
position:fixed;
top:200px;
text-align:center;
color:white;
background-color:#C3C;
font-weight:bold; }
#p1
{
left:10px;
}
#p2
{
right:10px;
}
</style>

script中的代码,用数组来存储图片的地址,每隔3秒调用一次huan()函数来换成下一张:

var jpg =new Array();
jpg[0]="url(image/1.jpg)";
jpg[1]="url(image/2.jpg)";
jpg[2]="url(image/3.jpg)";
jpg[3]="url(image/4.jpg)";
jpg[4]="url(image/5.jpg)";
jpg[5]="url(image/6.jpg)";
var xb=0;
var n=0;
function huan()
{
xb++;
if(xb == jpg.length)
{
xb=0;
} document.body.style.backgroundImage=jpg[xb];
if(n==0)
{
var id = window.setTimeout("huan()",3000);
} }
function dodo(m)
{
n=1;
xb = xb+m;
if(xb < 0)
{
xb = jpg.length-1;
}
else if(xb >= jpg.length)
{
xb = 0;
}
document.body.style.backgroundImage=jpg[xb];
}
window.setTimeout("huan()",3000);

效果图如下:

(2)例子:一系列菜单,点击菜单上的一项展开里面的内容,再次点击关闭:

这里是利用了div的display样式,原设置display为none隐藏,点击的时候将display设置为block显示出来,再次点击设置为none隐藏。

body中的代码:点击哪一个将哪一个下面div的ID传到dodo()函数里面进行操作。

<div id="main">
<div class="topic" onclick="dodo('l1')">工作计划管理</div>
<div class="list" id="l1"> </div>
<div class="topic" onclick="dodo('l2')">个人资料管理</div>
<div class="list" id="l2"></div>
<div class="topic" onclick="dodo('l3')">部门外联管理</div>
<div class="list" id="l3"></div>
<div class="topic" onclick="dodo('l4')">系统设置</div>
<div class="list" id="l4"></div>
</div>

CSS代码:

<style type="text/css">
#main
{
width:200px;
background-color:#CCF;
}
.topic
{
font-weight:bold;
text-align:center;
background-color:#C39;
color:white;
font-size:14px;
padding:5px 0px 5px 0px;
margin-top:1px; }
.list
{
border:1px solid navy;
height:200px;
background-color:#CFF;
display:none;
}
</style>

Script中的代码:

function dodo(listid)
{ var dd = document.getElementById(listid);
if(dd.style.display != "block")
{
dd.style.display="block";
}
else
{
dd.style.display="none";
} }

效果如下:

如果要设置只能打开一个的话Script中的代码变为如下即可:

function dodo(listid)
{
var dd = document.getElementById(listid);
var ll = document.getElementsByClassName("list");
for(var i=0;i<ll.length;i++)
{
ll[i].style.display="none";
} dd.style.display="block"; }

JavaScript的DOM操作(二)的更多相关文章

  1. javascript的DOM操作(二)

    <html> <title>学习DOM</title> <a id="wen">文本</a> <input nam ...

  2. 第一百一十六节,JavaScript,DOM操作样式

    JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

  3. Python之路day13 web 前端(JavaScript,DOM操作)

    参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...

  4. 网站开发综合技术 三 JavaScript的DOM操作

    第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...

  5. 第一百一十五节,JavaScript,DOM操作表格

    JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...

  6. JavaScript:DOM操作

    一.DOM基础DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某 ...

  7. JavaScript之DOM操作,事件操作,节点操作

    1,DOM操作 1.1  概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...

  8. Javascript的DOM操作 - 你真的了解吗?

    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...

  9. HTML JavaScript的DOM操作

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...

  10. JavaScript的DOM操作(2)

    补充:   回车符\r和换行符\n的区别:\r 相当于enter,是段落与段落之间的区别, \n 相当于shift+enter,是行与行之间距离,比较小 几种window操作方法: 1.获取当前窗口大 ...

随机推荐

  1. http://www.ibm.com/developerworks/cn/opensource/os-cn-cas/

    http://www.ibm.com/developerworks/cn/opensource/os-cn-cas/

  2. 使用eclipse开发webService很简单

    原文转自:http://blog.csdn.net/guo_rui22/article/details/6253745 使用Eclipse生成一个WebService应用 1.创建一个Dynamic ...

  3. Programming in lua 环境

    Lua 用一个名为environment 普通的表来保存所有的全局变量.(更精确的说,Lua在一系列的environment 中保存他的“global”变量,但是我们有时候可以忽略这种多样性)这种结果 ...

  4. INFORMATION_SCHEMA.INNODB_TRX 详解

    从192.168.11.186 上登录 192.168.11.185 数据库: root 13246 547 0 13:39 pts/1 00:00:00 mysql -uroot -px xxxxx ...

  5. C# 判断某程序是否运行

    [DllImport("user32.dll")] private static extern bool SetForegroundWindow(IntPtr hWnd); [Dl ...

  6. sql server 清除日志

    SQL2008 的收缩日志  由于SQL2008对文件和日志管理进行了优化,所以以下语句在SQL2005中可以运行但在SQL2008中已经被取消: (SQL2005) Backup Log DNNam ...

  7. opengl学习

    #include"stdafx.h" #define GLUT_DISABLE_ATEXIT_HACK #include <GL/glut.h> //glut自动将gl ...

  8. HDU 5950 Recursive sequence 【递推+矩阵快速幂】 (2016ACM/ICPC亚洲区沈阳站)

    Recursive sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Other ...

  9. Jquery UI dialog 详解 (中文)

    转载▼ 1 属性 1.11 autoOpen ,这个属性为true的时候dialog被调用的时候自动打开dialog窗口.当属性为false的时候,一开始隐藏窗口,知道.dialog("op ...

  10. python 零散记录(二) 序列的相关操作 相加 相乘 改变 复制

    序列相加: [1,2] + [3,4] == [1,2,3,4] #字符串也是序列的一种 'hello' + 'world' == 'hello world' #但是序列相加只限于相同类型的序列间相加 ...