<style type="text/css">

#d3{ color:red}

</style>

</head>

<body>

<div id="d1" cs="ceshi"><span>document对象</span></div>

<div class="d">111</div>

<span class="d">222</span>

<input type="text" name="aa" id="b1" value="biaodan" />

<input type="text" name="aa" />

<div id="d3" style="width:100px; height:100px; background-color:#636">111</div>

<input type="button" value="获取" onclick="showa()" />

<input type="button" value="设置" onclick="set()" />

</body>

<script type="text/javascript">

//找元素
//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";
}*/

<div onclick=""></div> 鼠标单击
<div ondblclick=""></div> 鼠标双击
<div onkeydown=""></div> 键敲下
<div onkeypress=""></div> 键敲击
<div onkeyup=""></div> 键敲击后抬起
<div onmousedown=""></div> 鼠标点击下
<div onmousemove=""></div> 鼠标移动
<div onmouseout=""></div> 鼠标离开
<div onmouseover=""></div> 鼠标悬浮上边
<div onmouseup=""></div> 鼠标点击抬起

例一；

<body>

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

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

</body>

<script type="text/javascript">

function xiugai()

{

    //找到复选框

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

    //找到按钮

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

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

    if(ck.checked)

    {

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

        btn.removeAttribute("disabled");

    }

    else

    {

        //设置不可用属性

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

    }

}

</script>

例2；

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

</head>

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

</body>

<script type="text/javascript">

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

}

/*function huifu(a)

{

    a.style.backgroundColor = "white";

    a.style.color = "black";

}*/

</script>

例3：

<body>

<div>

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

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

</div>

</body>

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

HTML DOM部分---document对象；的更多相关文章

  1. javascript之DOM(二Document对象)

    javascript通过Document类型来表示文档.在浏览器中document是HTMLDocument对象(继承自Document)的一个实例,表示整个html页面.而且在浏览器中documen ...

  2. 【JavaScript】DOM之Document对象

    JS(JavaScript) 一.Document对象 1.Document对象是什么 Document对象 是DOM的基本规范也是重要的对象之一,以访问,更新页面内容的属性和方法通过conslie. ...

  3. DOM中document对象的常用属性方法

    每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返 ...

  4. js基础之DOM中document对象的常用属性方法

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.an ...

  5. HTML DOM 实例-Document 对象

    使用 document.write() 向输出流写文本 <html><body><script type="text/javascript">d ...

  6. 报表软件JS开发引用HTML DOM的location和document对象

    上一次提到,在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows.location.document三种.这次就继续介绍后两种,locati ...

  7. HTML DOM Document 对象

    HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档. 所有的HTML ...

  8. 【使用 DOM】使用 Document 对象

    Document 对象时通往DOM功能的入口,它向你提供了当前文档的信息,以及一组可供探索.导航.搜索或操作结构与内容的功能. 我们通过全局变量document访问Document对象,它是浏览器为我 ...

  9. javascript 对象（DOM）document window history

    Javascript对象 目录: window对象 document对象 history对象 navigator对象 window对象 所有浏览器都支持window对象,它表示浏览器窗口. 所有jav ...

随机推荐

  1. zoj 3228 覆盖及非覆盖串的多次匹配

    题目题意: 给定多个小串,在一个长串中寻找这些串的匹配次数,有些统计的是可覆盖的,有些统计的是非覆盖的 先可以简单理解一下,建立ac自动机后,当前节点包含的字符串必然被把它作为fail指针的节点包含, ...

  2. VMware-workstation-full-10.0.3-1895310 CN

    Name: VMware-workstation-full-10.0.3-1895310.exe发行日期: 2014-07-01内部版本号: 1895310文件大小: 491 MB文件类型: exe ...

  3. ASP.NET 分页控件

    using System; using System.ComponentModel; using System.Web; using System.Web.UI; using System.Web.U ...

  4. 如何通过web查看job的运行情况

    当我们将作业提交到hadoop 的集群上之后,我们会发现一个问题就是无法通过web查看job运行情况,比如启动了多少个map任务,启动多少个reduce任务啊,分配多少个conbiner等等.这些信息 ...

  5. 知道创宇研发技能表v3.0

    知道创宇研发技能表v3.0 2015/8/21 发布 by @知道创宇(www.knownsec.com) @余弦 & 404团队 后续动态请关注微信公众号:Lazy-Thought 说明 关 ...

  6. MATLAB里的正则表达式 [转]

    正则表达式在处理字符串及文本时显得十分方便,在perl, python等脚本语言,以及java, .net等平台上都支援正则表达式.事实上,在MATLAB中也提供了正则表达式的支持.主要包含三个常用的 ...

  7. [IE兼容性] Table 之边框 （IE6 IE7 IE8(Q) 中 cellspacing 属性在重合的边框模型的表格中仍然有效）

    在 IE6 IE7 IE8(Q) 中,在通过 border-collapse:collapse 使用表格的重合边框模型后,其 cellspacing 属性仍然有效: 在 其他浏览器 中,此时的 cel ...

  8. UIkit框架之UIScrollView

    1.继承链:UIview:UIresponder:NSObject 引言 UIScrollView的是几个UIKit类包括的UITableView和UITextView中的超类. 一个UIScroll ...

  9. 《深入理解Android：Telephon原理剖析与最佳实践》学习笔记（系统框架）

        Android智能手机的系统结构: 智能手机的硬件基本结构大多采用双处理器架构:主处理器和从处理器,主处理器主要运行开放式操作系统以及操作系统之上的应用,负责整个系统的控制,称之为AP,从处理 ...

  10. 20135214万子惠 （2）——-Java面向对象程序设计

    实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初步掌握UML建模 4. 熟悉S.O.L.I.D原则 5. 了解设计模式 (一)单元测试 (1) 三种 ...