一：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. 
						
  2. 第一百一十六节，JavaScript，DOM操作样式
		
    JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
    
		
    3. 
						
  3. Python之路day13 web 前端（JavaScript，DOM操作）
		
    参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...
    
		
    4. 
						
  4. 网站开发综合技术 三 JavaScript的DOM操作
		
    第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作  ...
    
		
    5. 
						
  5. 第一百一十五节，JavaScript，DOM操作表格
		
    JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...
    
		
    6. 
						
  6. JavaScript：DOM操作
		
    一.DOM基础DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某 ...
    
		
    7. 
						
  7. JavaScript之DOM操作，事件操作，节点操作
		
    1,DOM操作 1.1  概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...
    
		
    8. 
						
  8. Javascript的DOM操作 - 你真的了解吗?
		
    摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...
    
		
    9. 
						
  9. HTML   JavaScript的DOM操作
		
    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...
    
		
    10. 
						
  10. JavaScript的DOM操作（2）
		
    补充:   回车符\r和换行符\n的区别:\r 相当于enter,是段落与段落之间的区别, \n 相当于shift+enter,是行与行之间距离,比较小 几种window操作方法: 1.获取当前窗口大 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 【HDU 4372】 Count the Buildings (第一类斯特林数)
			
    Count the Buildings Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Othe ...
    
			
    2. 
						
  2. 【BZOJ 3122】 [Sdoi2013]随机数生成器 (BSGS)
			
    3122: [Sdoi2013]随机数生成器 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1442  Solved: 552 Description ...
    
			
    3. 
						
  3. 【HDOJ】3487 Play with Chain
			
    Splay入门题目,区间翻转,区间分割. /* */ #include <iostream> #include <string> #include <map> #i ...
    
			
    4. 
						
  4. Linux Kernel 'sctp_v6_xmit()'函数信息泄露漏洞(CVE-2013-4350)
			
    漏洞版本: Linux kernel 漏洞描述: BUGTRAQ ID: 62405 CVE(CAN) ID: CVE-2013-4350 Linux Kernel是Linux操作系统的内核. Lin ...
    
			
    5. 
						
  5. MySQL 备份表和数据
			
    方法1: Create table new_table_name (Select * from old_table_name); 方法2: 1.先备份表结构和数据#导出命令 -u用户名 -p密码 -h ...
    
			
    6. 
						
  6. PySpark关于HDFS文件（目录）输入、数据格式的探讨
			
    背景   平台HDFS数据存储规则是按照“数据集/天目录/小时目录/若干文件”进行的,其中数据集是依据产品线或业务划分的.   用户分析数据时,可能需要处理以下五个场景:   (一)分析指定数据集.指 ...
    
			
    7. 
						
  7. 论SOA架构的几种主要开发方式【转】
			
           面向服务架构soa以其独特的优势越来越受到企业的重视,它可以根据需求通过网络对松散耦合的粗粒度应用组件进行分布式部署.组合和使用.服务层是SOA的基础,可以直接被应用调用,从而有效控制系 ...
    
			
    8. 
						
  8. 浅谈pageobject模式
			
    先来看两段代码 代码1: package com.zlshuo.selenium.nonaming.pageobject; /** * @author leshuo * @version 2014年5 ...
    
			
    9. 
						
  9. 奇怪的JS正则之 /[A-z]/.test("\\"); // true
			
    本文是在一个国外介绍JS的网站上转载过来的,作者很逗,先是举例JS让人XX的例子,再动手实践发现JS隐藏的黑知识.为什么 /[A-z]/.test("\\"); 是 true ,你 ...
    
			
    10. 
						
  10. OpenCV学习（一）
			
    环境:OpenCV 2.4.4 VS2010 第一个Demo,显示一张图片 #include "opencv2/highgui/highgui.hpp" int main( int ...
    
			
    11.