DOM: document object model
文档对象模型提供了一套可以访问和修改HTML文档内容的方法
访问:获取
修改:设置
1 JS要去操作HTML元素,必须要先用JS找到他,转换为JS的DOM对象
操作:
a 标签属性
b css属性
c 元素内容
2 找对象的方法
a 通过标签名来找对象
var DOM_OBJ=document.getElementsByTagName("标签名");
返回的是集合(数组),即使只有一个标签,返回的也是一个集合
b 通过id名来找对象:id名是唯一的
var DOM_OBJ=document.getElementById("id名");
c 可以组合使用标签名和id名的方式来获取对象
d 通过name属性名来找对象,返回的是一个集合
var DOM_OBJ=document.getElementsByName("nameValue");
e 通过css类名找对象,返回的是一个集合
var DOM_OBJ=document.getElementsByClassName("类名");

3 操作标签的属性
获取:var attVa=DOM_OBJ.属性名;//attruibute
设置:DOM_OBJ.属性名=attVa;
4 操作CSS属性
获取:var cssVa=DOM_OBJ.style.css属性名;//只能获取内联式(嵌入式)的css属性值
设置:DOM_OBJ.style.css属性名=cssVa;//设置的是内联式(嵌入式)的css属性值
background-color===>backgroundColor
list-style===>listStyle
5 操作内容
获取
非表单元素:var txt=DOM_OBJ.innerHTML;
表单元素:var txt=DOM_OBJ.value;
设置
非表单元素:DOM_OBJ.innerHTML=txt;//会将原有的内容替换掉
表单元素:DOM_OBJ.value=txt;
区分document.write()和innerHTML
前者是方法后者是属性
前者只能用document这个对象,后者可以是任意的非表单元素DOM对象
前者不会覆盖原有的东西,后者会覆盖原来的内容
***************计时器***************
是属于BOM里面的方法
BOM:brower object model---提供了可以操作浏览器的方法和属性
能够直接访问和修改的方法和属性是跟window相关

计时器:
window.setInterval();
语法:
setInterval(函数名,毫秒数);每隔多少毫秒去调用这个函数
setInterval("函数名()",毫秒数);每隔多少毫秒去调用这个函数
setInterval(function(){
代码块;
},毫秒数);每隔多少毫秒去调用这个函数
setInterval("console.log(1111)",毫秒数);每隔多少毫秒去执行js代码
清除计时器:
var timer=setInterval();//定义了一个计时器
clearInterval(timer);// 清除的是哪个计时器

延时器:
window.setTimeout();
语法:
setTimeout(函数名,毫秒数);过了多少毫秒后去执行一次这个函数
setTimeout("函数名()",毫秒数);过了多少毫秒后去执行一次这个函数
setTimeout(function(){
代码块;
},毫秒数);过了多少毫秒后去执行一次这个函数
setTimeout("console.log(1111)",毫秒数);延迟多少毫秒去执行一次js代码
清除延时器:
var timer=setTimeout();//定义了一个延时器
clearTimeout(timer);// 清除的是哪个延时器

***************事件***************
事件:是用来实现JS与HTML之间的交互的。
1 可以作用于任何对象
2 通过函数来进行事件处理的。相关的函数是在事件发生时才执行
3 事件分类:鼠标事件 键盘事件 表单事件 window事件
---事件分类
1 鼠标事件
click 单击
dbclick 双击
mouseover 悬停
mouseout 离开
mousedown 按下
mouseup 抬起
mousemove 移动

转载于:https://www.cnblogs.com/jiandandeboke/p/7389393.html

web前端java script BOM学习笔记2017.8.1相关推荐

  1. 正则至少一个数字_好程序员web前端培训分享JavaScript学习笔记之正则

    好程序员web前端培训分享JavaScript学习笔记之正则,正则表达式,又名 "规则表达式" 由我们自己来书写 "规则",专门用来检测 字符串 是否符合 &q ...

  2. react组件卸载调用的方法_好程序员web前端培训分享React学习笔记(三)

    好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...

  3. web前端攻城狮 学习笔记——HTML基础

    开始学习web前端开发基础了,我是跟着清华大学在学堂在线的<Web前端攻城狮>学习的,把一些笔记记在这里,方便后期查阅. 1 HTML基础 HTML是超文本语言. 一段HTML代码: &l ...

  4. web前端java script学习2017.7.11

    绝对值:Math.abs(n) ---->|-8| 平方根:Math.sqrt(n)---->n只能取正数 m的n次方:Math.pow(m,n) 向上截断取整:Math.ceil(n)取 ...

  5. Web前端开发之CSS学习笔记11—文本格式和动画设计

    目录 1.文本对齐text -align 2.保留空白字符white-space 3.设置文本方向direction 4.设置文本缩进text-indent 4.设置字符间距letter-spacin ...

  6. Web前端开发之CSS学习笔记3—颜色和背景

    目录 1.CSS的颜色表达 1.1前景色color 1.2背景色background-color 2.背景 2.1 background-image:url()设置背景图; 2.2 backgroun ...

  7. web前端开发html5+css3学习笔记day1

    软件分类: 系统软件:windows.linux.macOS等 应用软件:office.QQ等 游戏软件:王者荣耀.QQ飞车等 客户端与服务器 ·通常情况下,软件由两部分组成: ----客户端:用户通 ...

  8. Web前端开发之CSS学习笔记8—居中和自适应

    目录 1.居中 1.1水平居中 1.2垂直居中 2.单列布局自适应 3.双列布局自适应 3.1双列自适应 3.2半边固定半边自适应 3.三列布局自适应 3.1浮动法 3.2绝对定位法 3.3margi ...

  9. Web前端开发之CSS学习笔记10—栅格布局(网格布局)

    目录 [网格布局grid] 1.网格布局的构成 2.父容器grid container 3.生成网格容器 display:grid/inline-grid 4.构建网格 grid-template-c ...

最新文章

  1. 小米4公布会视频地址
  2. 震惊!原来这才是Kafka的“真面目”!
  3. Activity的启动过程(源码API27)
  4. 【转】C#调用ADOX创建Access数据文件后关闭连接
  5. git push提交时卡住
  6. python一个函数调用另一个函数_python下如何在目录下让Python文件去调用另一个文件内的函数或类...
  7. windows nginx 停止和启动_nginx在window与linux中启动、停止、与关闭
  8. ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(四) 添加表情、群聊功能...
  9. 异步社区免费电子书下载爬虫实验攻略
  10. 安卓课设:翻译君APP(附开源地址)
  11. Java微信授权登陆
  12. 微信HOOK 1.获取二维码
  13. Python —— 第一部分 序列
  14. Apipost 上手指南
  15. vue-cli的各个配置文件的详细介绍
  16. 运维-系统监控方案:基于Grafana的TDengine零依赖监控解决方案
  17. KIngcms 5.1版本增加站内链接功能自动给指定关键词加上链接
  18. 基于微信教室预约小程序系统设计与实现 开题报告
  19. rf2o_laser_odometry运行警告Waiting for laser_scans....
  20. postgresql 动态添加过滤条件_PostgreSQL WHERE 子句

热门文章

  1. Jenkins连接TFS出现错误:“jenkins com.microsoft.tfs.core.exceptions.TECoreException”的问题收集...
  2. ubuntu下安装配置nfs
  3. 转载 - 整数划分问题
  4. centos7自带数据库MariaDB重启和修改密码
  5. count慢的问题解决
  6. ES6模块与commonJS模块的差异
  7. 云原生全球最大峰会之一KubeCon首登中国 Kubernetes将如何再演进?
  8. HIVE 一行转多行输出办法
  9. Kundera 2.1 发布,NoSQL 的 ORM 框架
  10. myeclipse8.5安装反编译工具