1、Window.document对象

一、找到元素:

docunment.getElementById("id");根据id找,最多找一个;
    var a
=docunment.getElementById("id");将找到的元素放在变量中;
    docunment.getElementsByName("name");根据name找,找出来的是数组;
    docunment.getElementsByTagName("name");根据标签名找,找出来的是数组;
    docunment.getElementsByClassName("name")
根据classname找,找出来的是数组;

二、操作内容:

1. 非表单元素:

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.outerHTML);包括标签本身的内容(简单了解)

1)设置内容:

a.innerHTML =
"<font color=red >hello world </font>";

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

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

2. 表单元素:

1)获取内容,有两种获取方式:

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>;

2)设置内容:
t.value="内容改变";

3. 一个小知识点:

<a href="http://www.baidu.com" onclick ="return
false">转向百度</a> ;加了return
flase则不会跳转,默认是return true会跳转。按钮也一样,如果按钮中设置return flase 则不会进行提交,利用这个可以对提交跳转进行控制。

三、操作属性

首先利用元素的ID找到该元素,存于一个变量中:

var a = document.getElementById("id");

然后可以对该元素的属性进行操作:

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

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>

JS中的代码:

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,来改变按钮的状态,当disabled=”disabled”时按钮不可用。

body中的代码:

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

JS中的代码:

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);

Window.document对象(1)的更多相关文章

  1. Window.document对象

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

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

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

  3. Window.document对象 轮播练习

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

  4. HTML Window.document对象

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

  5. JS中window.document对象

    小知识点注:外面双引号,里面的双引号改为单引号:                  在div里面行高设置和整个外面高度一样,才能用竖直居中,居中是行居中                  文本框取出来 ...

  6. 1、Window.document对象

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

  7. 3.26课·········window.document对象

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

  8. 2016/2/22 1、Window.document对象

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

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

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

随机推荐

  1. mr的logs的查看

    在map或者reduce函数中使用System.out.println打印的信息沾满查看呢? 步骤1:启动history server /usr/local/hadoop-2.6.0/sbin/mr- ...

  2. js JSON对象属性

    json对象是是一种用于原生json分析的对象,无法对其进行构造函数调用,用java术语 来说,它相当于能够直接使用类方法的工具类JSON对象的属性parse(text[,reviver]);对参数t ...

  3. Ubuntu12.04卡死的解决方案

    刚开始安装的时候用着还行,不过后来发现用了一会总是会出现卡死的状况 后来看了下ubuntu12.04的内核是3.2,后来把内核升级到3.5发现这种情况不会出现了. 查看内核以及升级内核 uname - ...

  4. Linux之uboot分析与移植20160601

    说一下uboot分析与移植: 1.下载.建立source insight工程.编译.烧写.如果无运行分析原因 tar xjf u-boot-2012.04.01.tar.bz2 cd u-boot-2 ...

  5. Python学习基础教程(learning Python)--2.2.1 Python下的变量解析

    前文提及过变量代表内存里的某个数据,这个说法有根据么? 这里我们介绍一个python内建(built-in)函数id.我们先看看id函数的帮助文档吧.在python查某个函数的帮助文档很简单,只用he ...

  6. laravel 笔记

    1.excel composer require maatwebsite/excel ~2.0.0 Maatwebsite\Excel\ExcelServiceProvider::class, 'Ex ...

  7. 使用eclipse开发

    Eclipse下载地址:http://www.eclipse.org/ 下载后进行解压缩,点击eclipse.exe即可使用eclipse workspace:工作区      Project:项目 ...

  8. opengl基础学习专题 (三) 多边形绘制的几种样式

    题外话 聪明人之所以不会成功,是由于他们缺乏坚韧的毅力. ——艾萨克·牛顿(1643年1月4日—1727年3月31日)英国 也许可以理解为 想更深一步的时候,坚持,努力和聪明缺一不可. 挺直腰杆在此向 ...

  9. NOJ1066-堆排序

    堆排序 时间限制(普通/Java) : 1000 MS/ 3000 MS          运行内存限制 : 65536 KByte总提交 : 414            测试通过 : 220  比 ...

  10. Oracle 11g Windows 迁移至 Linux

    OS: windows server 2008 R2 enterprise DB: 11.2.0.1.0 数据库配置: ORACLE_BASE=D:\app\Administrator ORACLE_ ...