JS的DOM操作及动画
JS的DOM操作
DOM:Document Object Model
BOM:Bowers(浏览器) Object Model
找到元素:var a=document.getElementById("id") ;就找到的元素放在变量中;
id选择器:document.getElementById("id"); 根据id找,最多找一个;
class选择器:document.getElementClassName("name") ;根据classname找,找出的是数组;
标签选择器:document.getElementTagName("name");根据标签名找,找出的是数组;
name选择器:document.getElementByName("name");根据name找,找出的是数组;
操作内容:innerHTML 标签里的代码和文字都获取;
innerText 只能取文字;
操作属性:var a=document.getElementById("id");
a.setAttribute("属性名","属性值") ;设置一个属性,可以添加或者更改;
a.getAttribute(“属性名”);获取属性的值;
a.removeAttribute(“属性名”);移除一个属性;
操作样式: a.style.样式=“”;
动画
CSS 过渡(渐变效果)
JS setInterval
clearInterval
createElement:
var op = createElement("标签名")
op.属性
appendChild:appendChild(对象名) :即op
removeChild
onchange : 改变事件
JS的DOM操作及动画的更多相关文章
- JS的DOM操作语法
整理了一下JS的DOM操作语法,这里做下记录. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- js的dom操作(整理)(转)
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
- js的DOM操作整理(整理)
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
- JS的DOM操作 - 你真的了解吗?
摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...
- 原生js封装dom操作库
var utils = (function(window) { var flag = "getComputedStyle" in window; function win(attr ...
- 5月16日上课笔记-js中DOM操作
一.DOM操作 DOM节点的操作 增加 删除 修改 节点的信息: nodeName 获取节点的标签名 parentNode 获取父节点 childNodes IE忽略回车换行,chrome回车换行是文 ...
- js函数 DOM操作
回学校了两天请了两天假,数组和方法的内容周末一定补上! 今天介绍一下JavaScript函数 Function 一.基础内容 1.定义 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. f ...
- 总结js常用的dom操作(js的dom操作API)
转载:https://www.haorooms.com/post/js_dom_api 前言 很多同学用惯了jquery操作dom,让他们用js操作的时候,常常力不从心,本文总结了常用的js的dom操 ...
- js常用DOM操作
在博客园看到了苏夏写的常用DOM整理文章,地址:http://www.cnblogs.com/cabbagen/p/4579412.html,然后抽时间都试了一下这些常用的DOM操作.在这里记录一下. ...
随机推荐
- 分布式架构--Dubbo项目实战学习文档
安装Dubbo注册中心(Zookeeper-3.4.6) 安装Dubbo管理控制台 Tomcat中部署web应用 ---- Dubbo服务消费者Web应用war包的部署 Dubbo监控中心的介绍与简易 ...
- XmlHepler(拿去就能用)
[系列目录](./XmlCatalog.html) 前言 本篇是这个系列的最后一篇.也是本人第一次写系列文章,虽然系列中大部分内容都是参考网络,但是自己都有敲代码验证.自己再编写过程中也学习到了很多知 ...
- matlab和C语言的break及continue测试
break和continue语句 有两个附加语句可以控制while和for循环:break和continue语句.break语句可以中止循环的执行和跳到end后面的第一句执行,而continue只中止 ...
- 深入理解javaScript的深复制和浅复制
javascript有五种基本数据类型(也就是简单数据类型),它们分别是:Undefined,Null,Boolean,Number和String.还含有一种复杂数据类型,就是对象 注意Undefin ...
- 如何居中div?如何居中一个浮动元素?
如何居中div? 给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 如何居中一个浮动元素? <!DOCTYPE ...
- 继BAT之后 第四大巨头是谁
中国互联网三大巨头的位置,毫无疑问是属于百度腾讯阿里的,但在它们之后,哪家公司能进巨头之列?京东布局不错,走亚马逊路线:360同时占据传统和移动互联网两大领域入口:小米软硬整合,生态系统完整. 很多人 ...
- iOS arc下控制某一文件为非arc
选中文件加上编译参数 -fno-objc-arc即可.
- GitHub客户端Desktop的安装和使用总结
前言 这段时间想把我写的东西上传到GitHub上,所以开始收集资料学习,走了很多弯路( msysgit和极慢的FQ网速让我欲仙欲死),最后找到了比较好用的工具GitHub Desktop.在此做出自己 ...
- WPF Prism框架下基于MVVM模式的命令、绑定、事件
Prism框架下的自定义路由事件和命令绑定 BaseCode XAML代码: <Button x:Class="IM.UI.CommandEx.PrismCommandEx" ...
- UVALive 7045 Last Defence
ProblemK. Last Defence Description Given two integersA and B. Sequence S is defined as follow: • S0 ...