20150422 DOM操作

DOM操作
window
history
location
document
status
每一个对象都有属性和方法
一、Dom结构
window对象
alert(msg)
confirm(msg) 返回bool型的值
open(url,target,features) 打开新窗口,返回被打开的那个窗口对象。
close()
setInterval(code,delay);
setTimeout(code,delay);
history对象
go(整数)
location对象
href属性:获得或指定一个url网址。
document对象
找到对象
操作属性
操作样式
操作内容
操作相关元素

二、document对象
(一)找到对象
var a = document.getElementById("id"); 返回的是个对象
var a = document.getElementsByName("name"); 返回的是个数组
var a = document.getElementsByTagName("tagname"); 返回的是个数组
(二)操作属性
1.获取属性值
var s = obj.getAttribute("属性名");
2.设置或修改属性值
obj.setAttribute("属性名","属性值");
3.移除属性值
obj.removeAttribute("属性名")

(三)操作样式
1.操作内联样式
obj.style.backgroundColor=
obj.style.xxxx

2.操作样式表的class
obj.className="class名"
obj.setAttribute("class","class名")

(四)操作内容
1.表单元素。
赋值:obj.value="";
取值:var s = obj.value;

2.非表单元素。
赋值:obj.innerHTML = "";
取值:var s = obj.innerHTML;

(五)操作相关元素

..

QQ页面设置

<style type="text/css">
#qqPane
{
width:250px;
border:1px solid navy;
}
.divTitle
{
background-color:navy;
color:white;
text-align:center;
font-weight:bold;
padding-top:5px;
padding-bottom:5px;
margin-top:1px;
}
.divContent
{
height:300px;
background-color:#FF9;
display:none;
}
</style>
<script language="javascript">
function doShow(sid)
{
//找要显示的div
var dd = document.getElementById(sid);
//把所有divContent都给隐藏
var divs = document.getElementsByTagName("div"); //获取所有的div
for(var i=0;i<divs.length;i++)//遍历所有的div
{
if(divs[i].className=="divContent") //筛选出divContent
{
divs[i].style.display="none"; //把divContent统统隐藏
}
}
//切换显示状态
if(dd.style.display != "block")
{
dd.style.display="block";
}
else
{
dd.style.display = "none";
}
}

</script>
</head>

<body>
<div id="qqPane">
<div class="divTitle" onclick="doShow(‘haoyou‘)">我的好友</div>
<div id="haoyou" class="divContent"></div>
<div class="divTitle" onclick="doShow(‘heimingdan‘)">黑名单</div>
<div id="heimingdan" class="divContent"></div>
<div class="divTitle" onclick="doShow(‘moshengren‘)">陌生人</div>
<div id="moshengren" class="divContent"></div>
</div>
</body>
</html>

按钮几秒后能点击

<body>
<form id="form1" name="form1" method="post" action="">
<p>asdfasdf</p>
<p>asd</p>
<p>f</p>
<p>asdf</p>
<p>asdgasdgasdg</p>
<p>
<input disabled="disabled" type="submit" name="btn" id="btn" value="同意(10)" />
</p>
</form>
</body>
</html>
<script language="javascript">
var num =10;
function showNumber()
{
num--;
var btn = document.getElementById("btn");                      
btn.value = "同意("+num+")";

if(num == 0)
{
btn.value="同意";
btn.removeAttribute("disabled");
}
else
{
window.setTimeout("showNumber()",1000);
}
}
showNumber();
</script>

时间: 2024-11-05 16:37:32

20150422 DOM操作的相关文章

jquery中的DOM操作

DOM操作分为:DOM核心.HTML-DOM.CSS-DOM 1.节点操作 查找 查找元素节点:jquery选择器 查找属性节点:attr("")方法,参数为要查询的属性的名字 创建 创建元素节点:$("html")方法,参数为HTML标记字符串,如:<p></p> 注意:(1)动态创建的新元素节点不会被自动添加到文档中,需要用其他方法插入文档中(2)创建元素时注意标签闭合,可以用$("<p></p>&quo

认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

(一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQuery的优势 1)可以像CSS一样访问和操作DOM 2)修改CSS控制页面外观 3)简化JS代码操作 4)事件代理更加容易 5)动画效果使用方便 6) Ajax技术更加完美 7)大量的基于Jquery的插件 8)可以自定义扩展功能插件 (三)JQuery的语法 格式:$(selector).actio

DOM操作表格

前面的话 表格table元素是HTML中最复杂的结构之一.要想创建表格,一般都必须涉及表示表格行.单元格.表头等方面的标签.由于涉及的标签多,因而使用核心DOM方法创建和修改表格往往都免不了要编写大量的代码.本文将详细介绍DOM操作表格的属性和方法 需求 要通过DOM实现下列格式的表格结构 <table border = "1" width = "100%">     <tbody>         <tr>           

zBase --轻量级DOM操作库

项目地址:ZengTianShengZ-github zBase-1.2.0 --v3 修复部分bug,添加AMD规范测试 zBase-1.1.0 --v2 对 v1 版本做了升级,优化DOM查找,简化API,提高代码可读性,支持模块化 支持 AMD & CommonJS zBase-1.0.0 --v1 没有任何依赖 轻量级的Dom操作库,封装一些常用的css选择器和事件操作等 Quick start $ npm install $ gulp scripts 使用npm安装 zBase: $

JQuery基本知识、选择器、事件、DOM操作、动画

1:基本选择器 <title></title> <script src="js/jquery-1.7.2.min.js"></script> </head> <body> <form id="form1" runat="server"> <div id="div1"> <a>aaaaa</a> <%--

jQuery学习之路(2)-DOM操作

▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看看DOM操作都有哪些 逐一来看 先写一份HTML代码,后面的代码将操作这份HTML代码 <p title="选择你最喜欢的水果">你最喜欢的水果?</p> <ul> <li title="苹果">苹果</li>

JavaScript常用原生DOM操作

最近,自己在投简历,找工作,在忙碌的复习当中,希望把有用的知识分享出去,是自己的成长,也可以给别人帮助. 今天给大家分享一些常用的原生的JavaScript DOM 操作. OK,那开始吧,那就开始吧O(∩_∩)O~~ 一.查看浏览器视口尺?   window.innerWidth/window.innerHeight(IE8以及IE8以下不能用  (′д` )-彡  )        document.documentElement.clientHeight/document.document

为什么说DOM操作很慢

原文转自:http://kb.cnblogs.com/page/534571/ 一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来. 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint).下面主要先介绍下这些浏览器行为,阐述一个页面是怎么最终被呈现出来的,另外还会从代码的角度,来说明一些不好的实践以及一些优化方案

DOM操作优化

缓存DOM对象 JavaScript的DOM操作可以说是JavaScript最重要的功能,我们经常要根据用户的操作来动态的增加和删除元素,或是通过AJAX返回的数据动态生成元素.比如我们获得了一个很多元素的数组data[],需要将其每个值生成一个li元素插入到一个id为container的ul元素中,最简单(最慢)的方式是: var liNode, i, m; for (i = 0, m = data.length; i < m; i++) { liNode = document.createE