BOM和DOM

2019-06-16

BOM

BOM 的概念
提供了独立于页面内容而与浏览器进行交互的对象，其核心对象是 window
在浏览器中，window 对象（注意，w 为小写）指当前的浏览器窗口。它也是所有对象的顶层对象。
“顶层对象”指的是最高一层的对象，所有其他对象都是它的下属。JavaScript 规定，浏览器环境的所有全局变量，都是 window 对象的属性。

1 2	var a = 1; window.a; // 1

上面代码中，变量 a 是一个全局变量，但是实质上它是 window 对象的属性。声明一个全局变量，就是为 window 对象的同名属性赋值

浏览器代理检测，可以检测出来用户使用的浏览器类型，也可以检测浏览器所在的操作系统
navigator.userAgent
判断浏览器类型

var t = navigator.userAgent;
if (t.indexOf("Trident") != -1) {
  console.log("ie内核");
} else if (t.indexOf("Presto") != -1) {
  console.log("欧朋");
} else if (t.indexOf("Chrome") != -1) {
  console.log("chrome ");
} else if (t.indexOf("Safari") != -1) {
  console.log("Safari ");
} else {
  console.log("其他");
}

判断是移动端还是 PC（重要）

//移动端
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("mobi") != -1) {
  // 手机浏览器
  console.log("手机");
} else {
  // 非手机浏览器
  console.log("非手机");
}

并且判断是安卓还是苹果

var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("mobi") != -1) {
  // 手机浏览器
  console.log("手机");
  if (ua.indexOf("android") != -1) {
    console.log("移动端 安卓");
  } else if (
    ua.indexOf("ipod") != -1 ||
    ua.indexOf("iphone") != -1 ||
    ua.indexOf("ipad") != -1
  ) {
    console.log("移动端  苹果手机");
  }
} else {
  // 非手机浏览器
  console.log("非手机");
}

location 对象

location 对象包含有关当前 URL 的信息。
location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

属性：hash、host、hostname、href、pathname、port、protocol、search
href：设置或返回完整的 URL。（常用）
hash：设置或返回从井号 (#) 开始的 URL（锚）。
search：设置或返回从问号 (?) 开始的 URL（查询部分？id=1&name=abb）。（常用）

host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。

location 对象
方法：assign(url), replace(url) , reload()
assign() 加载新的文档。
reload() 重新加载当前文档。
replace() 用新的文档替换当前文档。

window.open();
打开一个新的浏览器窗口。
window.close();
关闭浏览器窗口。

alert(arg1)
显示带有一段消息和一个确认按钮的警告框。

prompt(arg1,arg2)
显示可提示用户输入的对话框。

confirm(arg1) （偶尔）
显示带有一段消息以及确认按钮和取消按钮的对话框。

history 对象：

history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.
后退一页 history.go(-1) history.back()
前进一页 history.go(1) history.forward()
前进两页 history.go(2)

window.onload

load 事件发生在文档在浏览器窗口加载完毕时。window.onload 属性可以指定这个事件的回调函数。

1
2
3

window.onload = function () {
  console.log("页面加载完毕");
};

定时器和延时器

JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由 setTimeout()和 setInterval()这两个函数来完成。

延时器
setTimeout 函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。
var timerId = setTimeout(func, delay);
上面代码中，setTimeout 函数接受两个参数，第一个参数 func 是将要推迟执行的函数名，第二个参数 delay 是推迟执行的毫秒数。

console.log(1);
//推迟执行
setTimeout(function () {
  console.log(2);
}, 1000);
console.log(3);

setInterval 函数的用法与 setTimeout 完全一致，区别仅仅在于 setInterval 指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。

1
2
3

var timer = setInterval(function () {
  console.log(2);
}, 1000);

上面代码中，每隔 1000 毫秒就输出一个 2，会无限运行下去，直到关闭当前窗口。

清除定时器
setTimeout 和 setInterval 函数，都返回一个整数值，表示计数器编号。将该整数传入 clearTimeout 和 clearInterval 函数，就可以取消对应的定时器。

var id1 = setTimeout(f, 1000);
var id2 = setInterval(f, 1000);
clearTimeout(id1);
clearInterval(id2);

上面代码中，回调函数 f 不会再执行了，因为两个定时器都被取消了。

window.onscroll

可以监听页面的滚动

1
2
3

window.onscroll = function () {
  console.log("页面滚动");
};

一旦页面滚动就会触发 onscroll 函数

DOM

document.scrollingElement

document.scrollingElement 属性返回文档的滚动元素。也就是说，当文档整体滚动时，到底是哪个元素在滚动。
这个属性返回的文档的根元素 document.documentElement（即<html>）。
获取可视区域距离页面顶部的距离
document.scrollingElement.scrollTop;
设置滚动条的距离页面顶面的距离
document.scrollingElement.scrollTop = 0
或者也可以像下面
获取

1 2	scrollTop = document.scrollingElement.scrollTop; scrollTop = document.documentElement.scrollTop \|\| document.body.scrollTop;

设置

1 2	document.documentElement.scrollTop = 0 document.body.scrollTop = 0；

DOM 的概念及作用

DOM 是 JavaScript 操作网页的 api 接口，全称为“文档对象模型”（Document Object Model）。
它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。

浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。

DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。后面介绍的就是 JavaScript 对 DOM 标准的实现和用法。
节点树
一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树。

浏览器原生提供 document 节点，代表整个文档。

DOM 的基本操作(查询、创建、添加，修改，删除)

document.getElementById方法返回匹配指定 id 属性的元素节点。如果没有发现匹配的节点，则返回 null。
document.getElementsByClassName方法返回一个类似数组的对象（HTMLCollection 实例），包括了所有 class 名字符合指定条件的元素
document.getElementsByTagName方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象（HTMLCollection 实例）
document.querySelector方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回 null。

1	var el1 = document.querySelector(".myclass");

document.querySelectorAll方法与 querySelector 用法类似，区别是返回一个 NodeList 对象，包含所有匹配给定选择器的节点。

1	elementList = document.querySelectorAll(".myclass");

document.createElement方法用来生成元素节点，并返回该节点。

1	var newDiv = document.createElement("div");

createElement 方法的参数为元素的标签名，即元素节点的 tagName 属性，对于 HTML 网页大小写不敏感，即参数为 div 或 DIV 返回的是同一种节点

oDiv.appendChild(newDiv);把 newDiv 添加到 oDiv 内部的最后面
Element.innerHTML属性返回一个字符串，等同于该元素包含的所有 HTML 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<HTML>和<body>元素。
如果将 innerHTML 属性设为空，等于删除所有它包含的所有节点。
box.replaceChild(newNode,oldNode)

1 2	var el = document.getElementById("mydiv"); el.remove();

DOM 节点类型(元素和文本)

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

Element：网页的各种 HTML 标签（比如<body>、<a>等）

Text：标签之间或标签包含的文本（创建 Text）

注释也是节点

通过 nodeType 属性可以查看类型
如果节点是一个元素节点，nodeType 属性返回 1。
如果节点是属性节点, nodeType 属性返回 2。
如果节点是一个文本节点，nodeType 属性返回 3。
如果节点是一个注释节点，nodeType 属性返回 8

文档碎片 document.createDocumentFragment() 作为容器使用，可以避免频繁操作 dom

本文作者：人模人样的搬砖老段
本文链接：BOM 和 DOM
如有错误，请及时评论或者知乎私信或者 B 站私信哦~

最后更新于:2020/02/02