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 ...

随机推荐

http-server 建立 HTTPS 服务
1. 创建证书进入要建立 HTTPS 服务的目录 openssl genrsa -out key.pem 1024 openssl req -new -key key.pem -out csr.pe ...
delphi 进程通讯之WM_COPYDATA 发送程序（SendData.exe）可用
http://www.delphitop.com/html/wangluo/1529.html delphi 进程通讯之WM_COPYDATA 发送程序(SendData.exe) 作者:admin ...
Java中字母大小写的转换
例:String str = "AbC"; 把字符串所有字母变成小写: System.out.println(str.toLowerCase()); 把字符串所有字母大写: Sys ...
unsigned char bcd串乱码问题解决
unsigned char bcd[13]; ...... string bcdstr; for(int i=0;i < 12;i++) { bcdstr=FormatString(" ...
MySQL-快速入门（9）视图
1.什么是视图视图是一个虚表.视图可以进行查询.增加.修改.删除.进行修改.增加.删除,将影响基本表中的数据. 2.视图相对基本表的优势 1>简单化:看到的就是想要的字段列,可以简化后续查询. ...
linux 获取目录中详细信息 -rw-r--r--详解
-rw-r–r– 1 root root 1313 Sep 3 14:59 test.log详解查询目录中的内容命令 ls [选项] [文件或目录] 选项: -a 显示所有文件.包括隐藏文件 -l ...
CAS单点登录系统--进阶
2.CAS服务端数据源设置 2.1需求分析我们现在让用户名密码从我们的优乐选的user表里做验证 2.2配置数据源 (1)修改cas服务端中web-inf下deployerConfigContext ...
Pycharm2019.1.3破解
搬运: T3ACKYHDVF-eyJsaWNlbnNlSWQiOiJUM0FDS1lIRFZGIiwibGljZW5zZWVOYW1lIjoi5bCP6bifIOeoi+W6j+WRmCIsImFzc ...
创建MySQL数据库账号
为本项目创建数据库用户(不再使用root账户) create user 账号 identified by '密码'; grant all on 数据库.* to '用户'@'%'; flush pri ...
01：django基础篇
Django其他篇目录: 1.1 django初探 1.2 第一个django项目 1.3 django render/redirect/HttpResponse 和 request.GET req ...

js学习之BOM和DOM

js学习之BOM和DOM的更多相关文章

随机推荐

热门专题