基本的window.document操作及实例

找元素

1.根据id找

var d1 = document.getElementById("d1");

alert(d1);

2.根据class找

var d2 = document.getElementsByClassName("d");

alert(d2[1]);

3.根据标签名找

var d3 = document.getElementsByTagName("div");

alert(d3[0]);

4.根据name找

var d4 = document.getElementsByName("aa");

alert(d4[0]);

操作元素

操作内容

非表单元素

var d1 = document.getElementById("d1");

1.获取文本

alert(d1.innerText);

2.设置文本

d1.innerText = "hello";

3.获取html代码

alert(d1.innerHTML);

4.设置html代码

d1.innerHTML = "<b>加粗文字</b>";

表单元素

var b1 = document.getElementById("b1");

1.赋值

b1.value = "ceshi";

2.获取值

alert(b1.value);

操作属性

1.添加属性

var d1 = document.getElementById("d1");

d1.setAttribute("bs","1");

2.获取属性

alert(d1.getAttribute("cs"));

3.移除属性

d1.removeAttribute("cs");

操作样式

function showa()

{

1.获取样式,只能获取内联样式

var d3 = document.getElementById("d3");

alert(d3.style.color);

}

function set()

{

var d3 = document.getElementById("d3");

2.设置样式

d3.style.backgroundColor = "red";

}

注册按钮选中可使用:

<input type="checkbox" id="ck" onclick="xiugai()" />同意

<input type="button" value="注册" id="btn" disabled="disabled" />

JS程序:

function xiugai()

{

//找到复选框

var ck = document.getElementById("ck");

//找到按钮

var btn = document.getElementById("btn");

//判断复选框的选中状态

if(ck.checked)

{

//移除按钮的不可用属性

btn.removeAttribute("disabled");

}

else

{

//设置不可用属性

btn.setAttribute("disabled","disabled");

}

}

鼠标选中背景文字颜色改变:

Css样式:<style type="text/css">

#caidan{

width:500px; height:35px; border:1px solid #60F;

}

.xiang{

width:100px;

height:35px;

text-align:center;

line-height:35px;

vertical-align:middle;

float:left;

}

</style>

Body程序:

<div id="caidan">

<div class="xiang" onmouseover="huan(this)" >首页</div>

<div class="xiang" onmouseover="huan(this)" >产品中心</div>

<div class="xiang" onmouseover="huan(this)" >服务中心</div>

<div class="xiang" onmouseover="huan(this)" >联系我们</div>

</div>

JS程序:

function huan(a)

{

//将所有的项恢复原样式

var d = document.getElementsByClassName("xiang");

for(var i=0;i<d.length;i++)

{

d[i].style.backgroundColor="white";

d[i].style.color = "black";

}

//换该元素的样式

a.style.backgroundColor = "red";

a.style.color = "white";

}

倒计时结束按钮可点击:

<span id="daojishi">10</span>

<input disabled="disabled" type="button" value="注册" id="anniu" />

</div>

JS程序:

<script type="text/javascript">

window.setTimeout("daojishi()",1000);

//功能:倒计时减1

function daojishi()

{

//找到span

var s = document.getElementById("daojishi");

//判断

if(parseInt(s.innerHTML)<=0)

{

document.getElementById("anniu").removeAttribute("disabled");

}

else

{

//获取内容,减1之后再交给span

s.innerHTML = parseInt(s.innerHTML)-1;

//每隔一秒调一次该方法

window.setTimeout("daojishi()",1000);

}

}

</script>

基本的window.document操作及实例的更多相关文章

  1. JavaScript的DOM操作。Window.document对象

    间隔执行一段代码:window.setlnteval("需要执行的代码",间隔毫秒数) 例 :      window.setlnteval("alert("你 ...

  2. DOM操作(Window.document对象)

    间隔与延迟: 间隔一段代码: window.setInterval("代码",间隔执行秒数) 延迟一段时间后执行一段代码: window.setTimeout("执行代码 ...

  3. Selenium2学习-040-JavaScript弹出框(alert、confirm、prompt)操作演示实例

    弹出框是网页自动化测试常见得操作页面元素之一,常见的JavaScript弹出框有如下三种: 1.alert(message):方法用于显示带有一条指定消息和一个 OK 按钮的警告框.DemoAlert ...

  4. Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunme ...

  5. window.onload和window.document.readystate的探究

    在编写前端页面的时候,我们时常需要对页面加载的状态进行判断,以便进行相应的操作. 比如在移动端,时常需要在页面完全加载完成之前,先显示一个loading的图标,等待页面完成加载完成后,才显示出真正要展 ...

  6. DOM、Window对象操作

    一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 一.基本语法: 数据类型(字符串,小数,整数,布尔,时间) var, v ...

  7. Window.document对象 轮播练习

    Window.document对象 一.找到元素:     docunment.getElementById("id"):根据id找,最多找一个:     var a =docun ...

  8. HTML Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunmen ...

  9. Selenium2学习-014-WebUI自动化实战实例-012-Selenium 操作下拉列表实例-div+{js|jquery}

    之前已经讲过了 Selenium 操作 Select 实现的下拉列表:Selenium2学习-010-WebUI自动化实战实例-008-Selenium 操作下拉列表实例-Select,但是在实际的日 ...

随机推荐

  1. Winform中创建超链接,点击跳转网页

    代码如下: System.Diagnostics.Process ie = new System.Diagnostics.Process();ie.StartInfo.FileName = " ...

  2. keyFile 巩固练习

    系统 : Windows xp 程序 : noodles-crackme2 程序下载地址 :http://pan.baidu.com/s/1mhJ4Ems 要求 : 编写KeyFile 使用工具 : ...

  3. Android 媒体存储服务(一)

    Android 媒体存储服务 本文介绍如何在 Android 中,开发者的 APP 如何使用媒体存储服务(包含MediaScanner.MediaProvider以及媒体信息解析等部分),包括如何把 ...

  4. C# List.ForEach 方法

    C#中List.ForEach 方法是对 List 的每个元素执行指定操作. 示例: using System; using System.Collections.Generic; using Sys ...

  5. java 泛型 -- 泛型类,泛型接口,泛型方法

    泛型T泛型的许多最佳例子都来自集合框架,因为泛型让您在保存在集合中的元素上指定类型约束.在定义泛型类或声明泛型类的变量时,使用尖括号来指定形式类型参数.形式类型参数与实际类型参数之间的关系类似于形式方 ...

  6. Oracle 字符串分割排序冒泡算法

    例子: 一个字符串"11,15,13,17,12",以逗号分割,现在要排序成"11,12,13,15,17". 写了一个实现方法,记录下来以备后用: ----- ...

  7. HTML中的IE条件注释

    IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解.比如普通的HTML注释是: <!--This is a comment--> 而只有IE可读的IE条件注释是 ...

  8. Linux C 知识 char型数字转换为int型 int型 转换为Char

    前言 在九度oj做acm的时候,经常会遇到了char类型和int类型相互转化的问题,这里进行一下总结.今后,可能会多次更新博客,因为半年做了很多总结,但是都是保存在word文档上了,现在开始慢慢向CS ...

  9. Json 数组拼接

    var str1 = {"name": "apple", "sex": "21"};                 / ...

  10. 夺命雷公狗---在js里阻止a标签的跳转和form表单的跳转

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...