js学习之BOM和DOM
1. 浏览器的原理
1.1 浏览器的多线程
(1) 解析js引擎线程
(2) UI渲染线程
(3) 事件发起线程
(4) 发起请求的线程
(5) 定时器的线程
1.2 同步异步
(1) 前面事情的干完才能干后面的事情,例如吃完饭才能喝水。
(2) 前面的事情可以不干完,就干后面的事情,然后后面的事情干一半,可以回到前面的事情接着干,例如吃一口饭,喝一口水,然后再吃饭,再喝水。
1.3 浏览器执行JS的过程
第一阶段 载入阶段 默认:同步
(1) 获取html的内容进行解析
(2) 生成DOM树,将html文件转化为html的结构树(DOM树)放到浏览器执行的内存环境中。
DOM树:
html
head
meta title script
body
(3) 从html---> head---> meta---> title----> script(把js文件从服务器下载到浏览器本地来,下载完成后开始使用js解释器,进行解析,解析完成后进行执行,执行完成后)---> body
(4) 解析完成
(5) 渲染:下载图片,下载图标
(6) 载入阶段结束
第二阶段 事件阶段 默认:异步 onload
(1) js中访问DOM树:通过document对象进行访问 var n = document.getElementById("div1")
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="13js的基本类型.js"></script> </head> <body> <div id = "d1">div1</div> <div id = "d2">div2</div> </body> </html>
// 使用document对象来访问DOM树 var a = document.getElementById("d1"); // 操作DOM获取节点 console.log(a); var b = document.getElementById("d2"); console.log(b);
原因是:当js在head里面,而获取div在body里面,按照载入阶段的同步执行原理,当执行到head里面,发现js,解析js的时候,会执行js代码,根本就获取不到元素,因此都是null。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- <script src="13js的基本类型.js"></script> --> </head> <body> <div id = "d1">div1</div> <script src="13js的基本类型.js"></script> <div id = "d2">div2</div> </body> </html>
// 使用document对象来访问DOM树 var a = document.getElementById("d1"); console.log(a); var b = document.getElementById("d2"); console.log(b);
原因是:html中移动js代码到body中,加载完div1后执行js代码,所以div1能显示,div2不能显示
如果js还是写在head中,还想让js能获取body里面所有的东西,可以使用延迟加载和异步加载的形式
2. js操作浏览器信息
window可以操作全局变量
// DOM BOM 操作浏览器元素 // windows对象来操作:全局对象 全局的方法 console.log(window.age); var age = 12; console.log(window.age); # 一般用法就是省略windows,其实全局变量都是存储在windows对象里面,当做一个属性 console.log(age)
2.1 DOM操作
(
2.2 BOM操作
(1) 弹窗操作 alert() 同步执行
alert("这里就是弹窗显示的内容");
(2) 弹窗操作 confirm() 带有返回值的弹窗
// 这种方式的弹窗会有返回值 var v = confirm("confirm弹窗,有个返回值"); console.log(v);
(3) 弹窗操作 prompt() 输入值的弹窗
// 这种方式的弹窗会有返回值 var v = prompt("输入你的姓名:"); console.log(v);
(4) 获取浏览器导航栏的信息,输入网址的地方
window.location
window.location.reload(); 刷新页面的功能
window.location.href; 获取页面的url
window.replace(); 跳转界面
跳转页面例子
var v = confirm("是不是想跳转到百度"); if(v == true){ window.location.reload(); window.location.replace("http://www.baidu.com") };
修改代码顺序,就跳转不成功了。点击确定,一直加载弹窗
var v = confirm("是不是想跳转到百度"); if(v == true){ // window.location.reload(); window.location.replace("http://www.baidu.com"); window.location.reload(); };
这种写法也是,点击确定跳转到百度页面,取消则一直弹窗
var v = confirm("是不是想跳转到百度"); if(v == true){ // window.location.reload(); window.location.replace("http://www.baidu.com"); } else{ window.location.reload(); }
原因是:刷新页面后,就要重新走一遍,页面加载,同步执行一遍,所以会出现这种持续弹窗的情况。
加载到新的界面后,就无法回退到原来的界面,window.location.replace()
(5) 控制浏览器的前进和后退
window.history.go() 快速的前进和后退 1 前进一个 -1 后退一个 2 前进两个 -2 后退两个 跳转前的页面数据还在
history 浏览器
window.history
window.history.forward() 前进
window.history.back() 后退
跳转后原来页面的数据不在,就是一个页面
(6) 获取浏览器的信息
window.navigator
window.navigator.userAgent
(7) 获取浏览器的分标率
window.screen
(8) 计时器
js代码
function get_name(){ alert("我是魔鬼") } # 时间默认值是毫秒,一秒等于3000毫秒:setInterval是循环执行,表示每隔3000毫秒,执行一次get_name函数 var t1 = setInterval(get_name,3000);
# 退出的语句是 clearsetInterval(t1)
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="12计时器.js"></script> </head> <body> </body> </html>
效果
function get_name(){ alert("我是魔鬼") } # setTimeout()表示从加载出网页后,直到3000毫秒执行一次get_name函数,不循环,只执行一次 var t1 = setTimeout(get_name,3000);
# 退出的语句是 clearsetTimeout(t1)
js代码:每隔3秒钟,控制台执行一次函数
var num = 0; function get_name(){ console.log("num=" + ++num) } var t1 = setInterval(get_name,3000);
效果:
++a 和 a++的区别,++a是先自增,假设 int a = 1, int b = ++a + 1,那么 a=2,b=3 假设 int a = 1, int b = 1 + a++,那么a=2,b=2
++a 是先增后,再执行表达式,++a是先执行表达式,再自增
先循环执行10s,到了10s停止函数
var num = 0; function get_name(){ console.log("num=" + ++num) }; var t1 = setInterval(get_name,1000); function end(){ clearInterval(t1) }; var t2 = setTimeout(end,50000);