JS的DOM操作

 

1DOM是文档对象模型,这种模型为树模型;文档是指标签文档,
对象是指文档中每个元素;模型是指抽象化的东西。

2间隔与延迟
间隔执行一段代码(函数):window.setInterval("要执行的代码",间隔的毫秒数) 
清除间隔执行:window.clearInterval(间隔的id); 循环一次之后用来清除隔执行的代码
延迟一段时间执行某一段代码(函数):window.setTimeout("要执行的代码",延迟的毫秒数) 
清除延迟:window.clearTimeout(延迟的id);清除setTimeout

3document对象
3.1找到元素:
var a =docunment.getElementById("id");将找到的元素放在变量中;
docunment.getElementsByName("name");根据name找,找出来的是数组;
docunment.getElementsByTagName("name");根据标签名找,找出来的是数组;
docunment.getElementsByClassName("name") 根据classname找,找出来的是数组;
3.2操作内容:
1) 非表单元素(不是input类型):
获取内容:
a.innerHTML标签里的html代码和文字都获取了,标签里面的所有内容。
a.innerText只取里面的文字
设置内容:
a.innerHTML = "<font color=‘red’ >hello world </font>";
外边是“”,里边就用‘’。
a.innerText会将赋的东西原样呈现
清空内容:赋值个空字符串
2)表单元素:
获取内容 var t = document.getElementById("id"); 直接用ID获取。
t.value 获取input中的value值;
alert(t.innerHTML); 获取<textarea> 这里的值 </textarea>;
设置内容: t.value="内容改变";
3.3操作属性
a.setAttribute("属性名","属性值"); 设置一个属性,添加或更改都可以;
a.getAttribute("属性名");获取属性的值;
a.removeAttribute("属性名");移除一个属性(恢复默认值)
3.4操作样式
a.style="" ; 操作此ID样式的属性。
操作样式的class:a.className="样式表中的className" 操作一批样式
onclick="this.className="b""当点击时将标签的样式改为css中的b样式。

js dom 操作的更多相关文章

  1. JS DOM操作(创建、遍历、获取、操作、删除节点)

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  2. JS—DOM操作

    节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById ...

  3. js——DOM操作(一)

    DOM:Document Object Model  文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义  为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树 ...

  4. JS DOM操作 函数 事件 阻止事件冒泡

    一 函数 1.字符串函数 s.tolowerCase( ):    -- 变小写 s.toupperCase( ):   -- 变大写 s.substr( 2 , 8 ):     -- 截取     ...

  5. JS DOM操作(五) Window.docunment对象——操作元素

    定位: var a = document.getElementByIt( "id" ) 同辈元素 var b = a.nextSibling;            -- 找 a ...

  6. JS DOM操作(二) Window.docunment对象——操作样式

    一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class  用在客户端 name  用在服务端 用 id 定位                  -- ...

  7. JS DOM操作(一) 对页面的操作

    DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...

  8. js dom 操作技巧

    1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...

  9. js DOM操作练习

    1.有如下html,如果用js获得被选中的option的text描述(非value)<select id="select_id">    <option vlue ...

随机推荐

  1. [ActionScript 3.0] AS3.0 水面波纹效果

    import flash.geom.Point; import flash.display.BitmapData; import flash.filters.DisplacementMapFilter ...

  2. [ActionScript] AS3 绘制虚线

    import flash.geom.Point; import flash.display.MovieClip; import flash.display.Graphics; function dra ...

  3. IE,Chrome滚动条样式CSS

    <style type="text/css"> *{ scrollbar-face-color:#F3F3F3; /*面子*/ scrollbar-arrow-colo ...

  4. 【转】SQL Server 查询表的记录数(3种方法,推荐第一种)

    --SQL Server 查询表的记录数 --one: 使用系统表. SELECT object_name (i.id) TableName, rows as RowCnt FROM sysindex ...

  5. 巧用Freemarker的自定义方法

    要想使用Freemarker支持的自定义方法,需要实现freemarker.template.TemplateMethodModel接口,然后将方法对象放入到Freemarker的数据模型中,这样在f ...

  6. 构建高性能可扩展asp.net网站--20130628

    构建高可扩展性最经常讨论到的问题: 如何才能让HTML 显示得更快? 缓存的最佳方式是什么? 如何使用IIS 让网站更快? 如何处理会话状态? 如何改进ASP.NET 代码? 我的数据库为什么这么慢? ...

  7. nyoj 56-阶乘因式分解(一)

    点击打开链接 阶乘因式分解(一) 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描述 给定两个数m,n,其中m是一个素数. 将n(0<=n<=10000)的阶乘分 ...

  8. [HDU 5090] Game with Pearls (贪心)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5090 题目大意:给你n个数,问你给若干个数增加c*k(c>=0)能否组成1,2,3,4,5,.. ...

  9. ListView中item的最外层使用margin属性失效

    参考文章:http://stackoverflow.com/questions/16278159/why-linearlayouts-margin-is-being-ignored-if-used-a ...

  10. PreparedStatement和Statment

    使用Statment安全性差,存在SQL注入隐患 public static void main(String[] args) { Connection conn=null; Statement st ...