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样式。

时间: 2024-11-11 13:16:56

JS的DOM操作的相关文章

js常用dom操作

利用dom获得页面元素节点 a) document.getElementById()    //id获得元素节点对象 b) document.getElementsByTagName()   //html标签获得元素节点对象(数组) c) document.getElementsByName(); //常用于表单(数组) 属性判断当前节点类型nodeType a)        1  元素节点 b)        2  属性节点 c)        3  文本节点 d)        9  文档

JS的DOM操作及动画

JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model 找到元素:var a=document.getElementById("id") :就找到的元素放在变量中:                id选择器:document.getElementById("id"): 根据id找,最多找一个:                class选择器:document.getElementClassName(

【2017-3-29】js语法 DOM操作

(一)Js简单介绍 1. 进行数据运算   控制浏览器的一些功能   控制元素(属性,样式,内容) 2. Js的引用位置: 内联Js  -  可以仿放在html文件的任意位置,推荐放在html的外面,页面的最底部 外部Js  -  将Js代码写到一个以Js结尾的文件中去,在将这个文件引用到html文件中去 内嵌Js (二)Js内容 1.基本数据类型: 字符串     var a = 'aaaa';  --  单引号,双引号都可以   小数       var a = 1.2; 整数      

5月16日上课笔记-js中DOM操作

一.DOM操作 DOM节点的操作 增加 删除 修改 节点的信息: nodeName 获取节点的标签名 parentNode 获取父节点 childNodes IE忽略回车换行,chrome回车换行是文本节点 nodeType 节点类型: 1:元素节点 3:文本节点 9:document节点 2:属性节点 firstChild(支持IE浏览器) || firstElementChild(支持谷歌浏览器) //获取第一个子节点 var fc = ulDom.firstElementChild ||

关于JS的DOM操作——重要实例的操作

1.复选框与按钮的配合使用的DOM操作 <body>                <input type="checkbox" id="ckb1" /><br><br>        <input type="button" value="下一步" id="btn1" disabled="disabled" /> </b

理解js的DOM操作

1.DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动.document.documentElement     返回文档的根节点<html> document.body     <body> document.activeElement 返回当前文档中被击活的标签节点(ie) event.fromElement        返回鼠标移出的源节点(ie) event.toElement       返回鼠标移入的源节点(ie) event.srcElement 

JS中Dom操作的常用案例实现

本文介绍几个Dom操作的几个常用的案例.虽然现在各种web框架层出不穷,也很方便.但是了解最基本的实现方法对我们开发还是有很大的帮助的: 1.图片滚动案例 1.1  效果如下: 1.2  代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .

js之DOM操作总结

1.什么是DOM,简单的说,DOM是一套对文档的内容进行抽象和概念化的方法.------------------<JavaScript DOM编程艺术> D:document,即文档 O:object,即对象 M:model,即模型 DOM把一份文档表示为一棵树,或者更具体来说就是一颗家谱树,这棵树由各种类型的节点构成. DOM节点可以分成三种:元素节点,文本节点,属性节点. 所以DOM操作主要是对这三种节点进行操作,操作的类型无非就是对节点进行增删改查. 查: 首先是获取节点: getEle

JS中DOM操作

DOM创建 DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口). DOM描绘了一个层次化的节点树,允许开发人员添加,移动,删除和修改页面的某一部分. DOM脱胎于Netscape及微软公司创始的DHTML(动态HTML),但现在它已经成为表现和操作页面标记的真正的跨平台,语言中立的方式. 注意: IE中所有DOM对象都是以COM对象的形式实现的,这意味着IE中的DOM对象与原声JavaScript对象的行为或活动特点不一致 节点操作: 插入节点: appendChi

js实例--dom操作

DOM Level 0:  document直接访问:可以通过数组形式,id或name(不鼓励) image; forms links; cookie; 常用获取节点的方法: getElementById; getElementByName; getElementByClassName;    //element对象也可用 getElementByTagName;    //element对象也可用 querySelector;                 //可用css样式选择器字符串访问