HTML DOM部分---document对象；
<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对象；的更多相关文章
- javascript之DOM(二Document对象)
javascript通过Document类型来表示文档.在浏览器中document是HTMLDocument对象(继承自Document)的一个实例,表示整个html页面.而且在浏览器中documen ...
- 【JavaScript】DOM之Document对象
JS(JavaScript) 一.Document对象 1.Document对象是什么 Document对象 是DOM的基本规范也是重要的对象之一,以访问,更新页面内容的属性和方法通过conslie. ...
- DOM中document对象的常用属性方法
每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.anchors 返 ...
- js基础之DOM中document对象的常用属性方法
-----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.an ...
- HTML DOM 实例-Document 对象
使用 document.write() 向输出流写文本 <html><body><script type="text/javascript">d ...
- 报表软件JS开发引用HTML DOM的location和document对象
上一次提到,在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows.location.document三种.这次就继续介绍后两种,locati ...
- HTML DOM Document 对象
HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档. 所有的HTML ...
- 【使用 DOM】使用 Document 对象
Document 对象时通往DOM功能的入口,它向你提供了当前文档的信息,以及一组可供探索.导航.搜索或操作结构与内容的功能. 我们通过全局变量document访问Document对象,它是浏览器为我 ...
- javascript 对象（DOM）document window history
Javascript对象 目录: window对象 document对象 history对象 navigator对象 window对象 所有浏览器都支持window对象,它表示浏览器窗口. 所有jav ...
随机推荐
- CodeIgniterCodeigniter+PHPExcel导出数据到Excel文件
解压压缩包里的Classes文件夹中的内容到application\libraries\目录下,目录结构如下:--application\libraries\PHPExcel.php--applica ...
- JDBC 1
Java 中的数据存储技术 在Java中,数据库存取技术可分为如下几类: JDBC直接访问数据库 JDO技术 第三方O/R工具,如Hibernate, ibatis 等 JDBC是java访问数据库的 ...
- 【STL】-deque的用法
初始化: #include <deque> deque<float> fdeque; 算法: fdeque.push_front(f); fdeque.push_back(f) ...
- HDU 5442 后缀自动机+kmp
题目大意: 给定一个字符串,可理解成环,然后选定一位置,逆时针或顺时针走一遍,希望得到字典序最大,如果同样大,希望找到起始位置最小的,如果还相同,就默认顺时针 比赛一直因为处理最小位置出错,一结束就想 ...
- X230 安装win7 sp1
早上起床发现win10歇菜了,死活启动不了只好重装系统 用稳定版本win7比较靠谱. 去msdn上下载 一个win7系统 win7旗舰版本64位 ed2k://|file|cn_windows_7_u ...
- 用K2 smartforms开发一个应用程序究竟比ASP.NET快多少？
这次试验的起因是一场内部辩论. “用K2 smartforms开发一个应用程序究竟比ASP.NET快多少?” 我们推测是快4倍. 但是经过测试发现,我们推测错了. 本文记录了试验的规划.过程以及令人惊 ...
- elementoryOS / ubuntu U盘启动问题的解决
具体现象: 进入U盘启动后,停顿在"start booting from usb device..."不动. 解决方法: 将syslinux文件夹下的syslinux.cfg中的 ...
- 类似github的框架
github是程序员经常上的网站,但如果是在一家苦逼不能访问外网的公司,那不能把自己的代码托管在github上绝对是一件非常痛苦的事情.如果想要在公司内网也可以用github托管自己的代码,那就要自己 ...
- 谁说固态硬盘没容量？4TB诞生、明年8TB！
固态硬盘已经逐渐取代机械硬盘成为很多用户的首选,但唯一欠缺的就是容量,或者说单位容量的价格,但是如今,机械硬盘的容量提升举步维艰,固态硬盘却在突飞猛进. 近日,SanDisk就宣布了全球第一款容量高达 ...
- iOS闪烁效果工具 GlitchLabel
GlitchLabel 用于给文字添加闪烁效果,效果图如下: 开发环境: iOS 7.0+ Swift 2.2 Xcode 7 示例代码:https://www.yuedecaifu.com 1 2 ...