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);
js学习之BOM和DOM的更多相关文章
- javascript学习笔记 BOM和DOM详解
js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W ...
- [转] JavaScript学习：BOM和DOM的区别和关联
BOM 1. BOM是Browser Object Model的缩写,即浏览器对象模型. 2. BOM没有相关标准. 3. BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系 ...
- 细看JS中的BOM、DOM对象
DOM对象模型 DOM(Document Object Model),是指文档对象模型,是W3C组织推荐的处理可扩展标志语言的 ...
- JS 学习（三）DOM
HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).HTML DOM 模型被构造为对象的树. HTML DOM树: Java ...
- js中的BOM和DOM常用事件方法
笔记: window对象 ● window.innerHeight - 浏览器窗口的内部高度 ● window.innerWidth - 浏览器窗口的内部宽度 ● window.open() - 打开 ...
- js学习笔记----JavaScript中DOM扩展的那些事
什么都不说,先上总结的图~ Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...
- js 学习笔记---BOM
window对象 1. window 对象是Global对象,在全局作用域中声明的变量和函数都可以通过window.来访问.跟直接在window上添加属性效果一样.唯一的区别就是delete时,如果是 ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- day 52 js学习 DOM 和BOM
前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
随机推荐
- 二、robotframework接口测试-常用关键字介绍
1.常用关键字介绍: a. 打印:log 用法:log 打印内容 ---------------- ...
- vim系统剪切板
原文地址 1.vim常用复制粘贴命令 Vim的复制粘贴命令无疑是y (yank),p(paster),加上yy,P PS: vim有个很有意思的约定(我觉得是一种约定),就是某个命令的大小写都是实现某 ...
- Win7下使用TortoiseGit设置保存密码
1. 打开 TortoiseGit 设置,编辑 .gitconfig 文件,如图: 2. 添加下面两行配置,如图: [credential] helper = store 3. 保存退出即可
- python-又来练习题--输出一个字符串中最长的子字符串及其长度
一.有个字符串 str= '$sd1#111$svda123!!!221&eSSDSyyyyyyDG^svda121^svda124^1111111111111' 包含特殊字符.数字和字母,输 ...
- PHP 数组函数 内部指针
current( &$arr ) 每个数组的当前单元,初始值的 数组的第一个单元next ( &$arr ) 返回数组中的下一个单元 , 如果没值则返回falshprev ( & ...
- text获取元素的文本
1断言 代码 # -*-coding:utf-8-*-from selenium import webdriverimport time as tdriver = webdriver.Chrome() ...
- vue组件化编程应用
写几个小案例来理解vue的组件化编程思想,下面是一个demo. 效果图示: 功能: Add组件用于添加用户评论,提交后右边评论回复会立马显示数据.Item组件点击删除可以删除当前用户评论.当List组 ...
- 【Qt笔记】QAction与QToolButton的关联
QAction可以理解为一个动作数据,包含了这个同坐相关的图标.文本.是否可用等数据和状态,以及连接对应的槽函数,用于执行这个动作. QToolButton则可以使用QAction对象作为后端,显示这 ...
- Codeforces 1262F Wrong Answer on test 233（组合数）
E1:设dp[i][j],表示在第i个位置的当前新状态超过原状态j分的方案数是dp[i][j],那么对于这种情况直接进行转移即可,如果a[i]==b[i]显然k种选择都可以,不影响j,如果不一样,这个 ...
- python中输入某年某月某日，判断这一天是这一年的第几天？
输入某年某月某日,判断这一天是这一年的第几天?程序分析 特殊情况,闰年时需考虑二月多加一天: 直接上代码 #定义一个函数,判断是否为闰年 def leapyear(y): return (y % 40 ...