BOM与DOM操作

  • BOM 浏览器对象模型>>>:使用js操作浏览器
  • DOM 文档对象模型>>>:使用js操作前端页面

window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

*如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。

*没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。全局函数是 window 对象的方法。

接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。

一些常用的Window方法:

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度
  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口

window的子对象

navigator对象(了解即可)

浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息。

  1. navigator.appName  // Web浏览器全称
  2. navigator.appVersion  // Web浏览器厂商和版本的详细字符串
  3. navigator.userAgent  // 客户端绝大部分信息
  4. navigator.platform   // 浏览器运行所在的操作系统

screen对象(了解即可)

屏幕对象,不常用。

一些属性:

  • screen.availWidth - 可用的屏幕宽度
  • screen.availHeight - 可用的屏幕高度

history对象(了解即可)

window.history 对象包含浏览器的历史。

浏览历史对象,包含了用户对当前页面的浏览历史,但我们无法查看具体的地址,可以简单的用来前进或后退一个页面。

  1. history.forward() // 前进一页
  2. history.back() // 后退一页

location对象

window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

常用属性和方法:

  1. location.href 获取URL
  2. location.href="URL" // 跳转到指定页面
  3. location.reload() 重新加载页面

弹出框

可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后,用户需要点击确定按钮才能继续进行操作。

语法:

  1. alert("你看到了吗?");

确认框(了解即可)

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

语法:

  1. confirm("你确定吗?")

提示框(了解即可)

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

语法:

  1. prompt("请在下方输入","你的答案")

计时相关

通过使用 JavaScript,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

setTimeout()

语法:

  1. var t=setTimeout("JS语句",毫秒)

setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数(1000 毫秒等于一秒)。

clearTimeout()

语法:

  1. clearTimeout(setTimeout_variable)

举个例子

  1. // 在指定时间之后执行一次相应函数
  2. var timer = setTimeout(function(){alert(123);}, 3000)
  3. // 取消setTimeout设置
  4. clearTimeout(timer);

setInterval()

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法:

  1. setInterval("JS语句",时间间隔)

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

语法:

  1. clearInterval(setinterval返回的ID值)

举个例子:

  1. // 每隔一段时间就执行一次相应函数
  2. var timer = setInterval(function(){console.log(123);}, 3000)
  3. // 取消setInterval设置
  4. clearInterval(timer);

BOM操作总结

  1. window.open() - 打开新窗口
  2. window.close() - 关闭当前窗口
  3. history.forward() // 前进一页
  4. history.back() // 后退一页
  5. location.href 获取URL
  6. location.href="URL" // 跳转到指定页面
  7. location.reload() 重新加载页面
  8. setTimeout() //一定时间间隔之后来执行代码
  9. clearTimeout() //清除setTimeout
  10. setInterval() //周期(以毫秒计)来调用函数或计算表达式。
  11. clearInterval() //清除setInterval

DOM操作之查找标签

  1. 前缀关键字>>>:document
  2. # 基本查找(核心)
  3. document.getElementById 根据ID获取一个标签
  4. document.getElementsByClassName 根据class属性获取
  5. document.getElementsByTagName 根据标签名获取标签合集
  6. """
  7. 如果我们的js代码需要页面上某个标签加载完毕
  8. 那么该js代码应该写在body内部最下方或者引入外部js文件
  9. """
  10. # 间接查找(重要)
  11. parentElement 父节点标签元素
  12. children 所有子标签
  13. firstElementChild 第一个子标签元素
  14. lastElementChild 最后一个子标签元素
  15. nextElementSibling 下一个兄弟标签元素
  16. previousElementSibling 上一个兄弟标签元素

节点操作

  1. var aEle = document.createElement('a'); # 创建标签
  2. aEle.setAttribute('href','https://www.mmzztt.com/') # 设置属性
  3. aEle.innerText = '好不好看?' # 设置内容文本
  4. document.getElementsByTagName('p')[0].appendChild(aEle) # 动态添加
  5. """一定要明确当前手上是什么对象"""
  6. imgEle.getAttribute('title') # 获取标签属性
  7. imgEle.getAttribute('src')
  8. 'https://img0.baidu.com/it/u=249914639,459556566&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500'
  9. innerText
  10. 不加赋值符号是获取内部文本
  11. 加了赋值符号是设置内置文本
  12. # 不可以识别HTML标签
  13. innerHTML
  14. 不加赋值符号是获取内部标签+文本
  15. 加了赋值符号是设置内置标签+文本
  16. # 可以识别HTML标签

获取值操作

语法:

获取的标签对象.value

适用于以下标签:

  • input
  • select
  • textarea
  1. var iEle = document.getElementById("i1");
  2. console.log(iEle.value);
  3. var sEle = document.getElementById("s1");
  4. console.log(sEle.value);
  5. var tEle = document.getElementById("t1");
  6. console.log(tEle.value);
  7. # 普通的文本数据获取
  8. 标签对象.value
  9. # 特殊的文件数据获取
  10. 标签对象.value '''仅仅获取一个文件地址而已'''
  11. 标签对象.files[0] '''获取单个文件数据'''
  12. 标签对象.files '''获取所有文件数据'''

class的操作

  1. classname 获取所有样式类名(字符串)
  2. classList 查看所有的类(列表)
  3. classList.remove(cls) 删除指定类
  4. classList.add(cls) 添加类classList.contains(cls) 存在返回true,否则返回false
  5. classList.toggle(cls) 存在就删除,否则添加

指定CSS操作

  1. obj.style.backgroundColor="red"

JS操作CSS属性的规律:

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如:

  1. obj.style.margin
  2. obj.style.width
  3. obj.style.left
  4. obj.style.position

2.对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可。如:

  1. obj.style.marginTop
  2. obj.style.borderLeftWidth
  3. obj.style.zIndex
  4. obj.style.fontFamily

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。

常用事件

  1. onclick 当用户点击某个对象时调用的事件句柄。
  2. ondblclick 当用户双击某个对象时调用的事件句柄。
  3. onfocus 元素获得焦点。 // 练习:输入框
  4. onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
  5. onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)
  6. onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
  7. onkeypress 某个键盘按键被按下并松开。
  8. onkeyup 某个键盘按键被松开。
  9. onload 一张页面或一幅图像完成加载。
  10. onmousedown 鼠标按钮被按下。
  11. onmousemove 鼠标被移动。
  12. onmouseout 鼠标从某元素移开。
  13. onmouseover 鼠标移到某元素之上。
  14. onselect 在文本框中的文本被选中时发生。
  15. onsubmit 确认按钮被点击,使用的对象是form

绑定方式:

方式一(基本不用):

  1. <div id="d1" onclick="changeColor(this);">点我</div>
  2. <script>
  3. function changeColor(ths) {
  4. ths.style.backgroundColor="green";
  5. }
  6. </script>

注意:

this是实参,表示触发事件的当前元素。

函数定义过程中的ths为形参。

方式二(常用):

  1. <div id="d2">点我</div>
  2. <script>
  3. var divEle2 = document.getElementById("d2");
  4. divEle2.onclick=function () {
  5. this.innerText="呵呵";
  6. }
  7. </script>

内置参数this

  1. # this指代的就是当前被操作对象本身
  2. 在事件的函数体代码内部使用
  3. btnEle.onclick = function () {
  4. alert(456)
  5. console.log(this)
  6. }

事件案例

案例1:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>牛逼啊</title>
  6. </head>
  7. <body>
  8. <!--案例1-->
  9. <p>username:
  10. <input type="text" id="d2">
  11. <button id="d1">出来</button>
  12. <button id="d3">结束</button>
  13. </p>
  14. <p>password:
  15. <input type="text" id="pwd">
  16. </p>
  17. <script>
  18. var butEle1 = document.getElementById('d1')
  19. var butEle2 = document.getElementById('d3')
  20. var t = null
  21. function getTime() {
  22. var time = new Date().toLocaleString()
  23. // 获取input标签对象
  24. var inpEle = document.getElementById('d2')
  25. inpEle.value = time
  26. }
  27. // 获取用户动作的信息
  28. butEle1.onclick = function () {
  29. if (t == null) {
  30. t = setInterval(getTime, 1000)
  31. }
  32. }
  33. butEle2.onclick = function () {
  34. clearInterval(t)
  35. t = null
  36. }
  37. </script>
  38. </body>
  39. </html>

案例2:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>牛逼啊</title>
  6. </head>
  7. <body>
  8. //案例2
  9. <p id="d4">username:
  10. <input type="text" id="d1">
  11. </p>
  12. <p id="d5">password:
  13. <input type="text" id="d2">
  14. </p>
  15. <button id="d3">登陆</button>
  16. <script>
  17. var btnEle = document.getElementById('d3')
  18. btnEle.onclick=function (){
  19. var userEle = document.getElementById('d1').value
  20. var pwdEle = document.getElementById('d2').value
  21. if(userEle !== 'jason' && pwdEle !== '123'){
  22. // 创建span标签
  23. var spanEle1 = document.createElement('span')
  24. //添加文本
  25. spanEle1.innerText = '用户名已重复.'
  26. spanEle1.style.color = 'red'
  27. var pEle1 = document.getElementById('d4')
  28. //追加到p标签内
  29. pEle1.append(spanEle1)
  30. var spanEle2 = document.createElement('span')
  31. //添加文本
  32. spanEle2.innerText = '密码错误.'
  33. spanEle2.style.color = 'red'
  34. var pEle2 = document.getElementById('d5')
  35. pEle2.append(spanEle2)
  36. }
  37. }
  38. </script>
  39. </body>
  40. </html>

案例3:

聚焦事件(元素对象.onfocus)

失焦事件(元素对象.onblur)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>牛逼啊</title>
  6. </head>
  7. <body>
  8. <p id="d4">username:
  9. <input type="text" id="d1">
  10. </p>
  11. <p id="d5">password:
  12. <input type="text" id="d2">
  13. </p>
  14. <button id="d3">登陆</button>
  15. <script>
  16. var inp1Ele = document.getElementById('d1')
  17. inp1Ele.onfocus=function (){
  18. this.style.backgroundColor = 'red'
  19. }
  20. inp1Ele.onblur=function (){
  21. alert('我离开了input框')
  22. }
  23. </script>
  24. </body>
  25. </html>

案例4:

文本域变化事件(元素对象.onchange)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>牛逼啊</title>
  6. </head>
  7. <body>
  8. <p id="d4">username:
  9. <input type="text" id="d1">
  10. </p>
  11. <p id="d5">password:
  12. <input type="text" id="d2">
  13. </p>
  14. <button id="d3">登陆</button>
  15. <script>
  16. var inpEle = document.getElementById('d1')
  17. inpEle.onchange=function (){
  18. console.log(this.value)
  19. }
  20. </script>
  21. </body>
  22. </html>

案例4:

文本域变化事件(元素对象.onchange)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>牛逼啊</title>
  6. </head>
  7. <body>
  8. <p>省:
  9. <select name="" id="d1">
  10. </select>
  11. </p>
  12. <p>市:
  13. <select name="" id="d2">
  14. </select>
  15. </p>
  16. <script>
  17. var data = {"河北": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
  18. var sel1Ele = document.getElementById('d1')
  19. var sel2Ele = document.getElementById('d2')
  20. for (let i in data){
  21. var opt1Ele = document.createElement('option')
  22. opt1Ele.innerText = i
  23. opt1Ele.value = i
  24. sel1Ele.appendChild(opt1Ele)
  25. }
  26. sel1Ele.onchange=function (){
  27. //1.先获取opt1里的信息
  28. //2.根据信息获得对应字典里的值
  29. //3.添加值
  30. var valuList = data[this.value]
  31. //先清理之前的文本
  32. sel2Ele.innerHTML = ''
  33. for (let i=0;i<valuList.length;i++){
  34. var opt2Ele = document.createElement('option')
  35. opt2Ele.innerText = valuList[i]
  36. opt2Ele.value = valuList[i]
  37. sel2Ele.append(opt2Ele)
  38. }
  39. }
  40. </script>
  41. </body>
  42. </html>

前端javascript之BOM、DOM操作、事件的更多相关文章

  1. 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  2. javascript系列之DOM(三)---事件

    原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...

  3. 前端--javaScript之BOM和DOM

    BOM和DOM概述 BOM(Browser Object Model):是指浏览器对象模型,它使js有能力和浏览器进行"对话". DOM(Document Object Model ...

  4. javascript (BOM DOM)

    BOM对象 window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使 ...

  5. JavaScript之BOM+DOM

    BOM 浏览器对象模型, 用于把浏览器相关的组件封装为对象进行操作. BOM是包含了DOM的. window对象 弹出框相关 确认: 取消: 与打开关闭window有关的方法 定时器相关 暂停选老婆 ...

  6. 原生JavaScript常用的DOM操作

    之前项目一直都是用JQuery或者Vue来做的,确实好用,毕竟帮我们解决了很多浏览器兼容问题,但是后面发现大公司面试题都是要原生Javascript来做,然后我就一脸懵逼哈哈哈,毕竟大公司需要的框架或 ...

  7. javascript教程2:---DOM操作

    1.DOM 简介 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有 ...

  8. JavaScript笔记——BOM的操作和浏览器的检测

    BOM的操作 BOM 也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,就可能存在浏览器不兼容的情况,那么浏览器共有对象就成了事实的 ...

  9. BOM DOM Event事件笔记....

    js//获取文件标题 document.body //body document.title //网页标题 document.doctype//文档对象 document.url//路径 //服务器相 ...

随机推荐

  1. sublime settings

    { "font_face": "Monaco", // 编辑器的字体 "font_size": 13, // 字号 "highli ...

  2. python练习册 每天一个小程序 第0004题

    1 #-*-coding:utf-8-*- 2 __author__ = 'Deen' 3 ''' 4 题目描述:任一个英文的纯文本文件,统计其中的单词出现的个数. 5 参考学习链接: 6 re ht ...

  3. 七天接手react项目 系列 —— 尾篇(antd 和 mobx)

    其他章节请看: 七天接手react项目 系列 尾篇 前面我们依次学习了 react 基础知识.react 脚手架创建项目.react 路由,已经花费了不少时间,但距离接手 spug_web 项目还有一 ...

  4. Java 实现汇总排序

    排序在系统中经常能用到,一般可以在数据库做排序,也可以在服务端做排序.在数据库一般使用 order by 排序.而服务端也是使用快排.本期使用汇总排序. 问题 统计销售数据,每个销售员都有对应的部门和 ...

  5. synchronized底层实现原理及锁优化

    一.概述 1.synchronized作用 原子性:synchronized保证语句块内操作是原子的 可见性:synchronized保证可见性(通过"在执行unlock之前,必须先把此变量 ...

  6. 实验:zk master宕机后,临时节点在新的master上是否存在,结果出人意料

    一.实验 实验说明:3台zk集群,主要验证:master上的客户端,在master上建立临时节点,当master宕机时,其他follower选为主后,临时节点是否存在. 主要是通过此来验证,基于zk的 ...

  7. 七牛云简单实用-uploadManager.put(..)抛出异常

    描述: 本人小白,最近在写一个仿头条的项目,其中有用到七牛云做为图片的存储以代替本地服务其存储,按照视频教程配置服务器端的简单上传功能,总是报错: 参照官方文档:https://developer.q ...

  8. Java 语言如何进行异常处理,关键字:throws、throw、 try、catch、finally 分别如何使用?

    Java 通过面向对象的方法进行异常处理,把各种不同的异常进行分类,并提供了良好的接口.在 Java 中,每个异常都是一个对象,它是 Throwable 类或其子类的实例.当一个方法出现异常后便抛出一 ...

  9. 什么是 Spring 配置文件?

    Spring 配置文件是 XML 文件.该文件主要包含类信息.它描述了这些类是如何 配置以及相互引入的.但是,XML 配置文件冗长且更加干净.如果没有正确规划 和编写,那么在大项目中管理变得非常困难.

  10. vue中基于sortablejs与el-upload实现文件上传后拖拽排序

    今天做冒烟测试的时候发现商品发布有一个拖拽图片排序功能没做,赶紧加上 之前别的同事基于 vuedraggable 实现过这个功能,我这里自己深度封装了 el-upload ,用这种方式改动很大,而且感 ...