从浏览器架构认识BOM和DOM

2022-01-29 21:32:34 阅读：134 来源： 互联网

标签：divEl console log DOM 元素 window BOM 浏览器 document

浏览器架构

JavaScript运行在浏览器，BOM就是连接JavaScript代码和浏览器的桥梁，而DOM就是用来操作各种标签元素的。

BOM包括 window、history、location、document ...
DOM包括 Document（整个文档）、Element（标签元素）、CharacterData（字符数据）、Attr（属性），这些元素又可以继续往下划分。

其中DOM元素、window对象都继承自EventTarget，所以它们都有EventTarget上的实例方法，而document是HTMLDocument的实例对象

console.log(window.__proto__);
console.log(window.__proto__.__proto__);
console.log(window.__proto__.__proto__.__proto__);

console.log(document.__proto__);
console.log(document.__proto__.__proto__);
console.log(document.__proto__.__proto__.__proto__);
console.log(document.__proto__.__proto__.__proto__.__proto__);

EventTarget

EventTarget有三个原型方法，在window和DOM元素上都可以使用

addEventListener 给元素绑定事件
removeEventListener 移除元素绑定的事件
dispatchEvent 派发事件

给window对象绑定 "click" 点击事件

window.addEventListener('click', (event)=>{
 console.log('屏幕被点击啦')
})

BOM

BOM主要包括以下几个对象

window：包括全局、控制浏览器窗口相关的属性、方法
history：浏览器曾经的会话历史记录
location：访问的URL的信息
document：当前窗口操作的文档对象

window

window在浏览器端有两个作用

一、作为全局对象

作为全局对象时，它主要有两个用途

通过var定义的变量将被挂载到window上
提供了全局方法 setTimeout、Math、Date

var user = "alice";
console.log(window.user);

window.setTimeout(() => {
  console.log(window.setTimeout);
}, 0);

二、作为浏览器的窗口对象

作为浏览器的窗口对象承担着非常多的功能

包含大量的属性，localStorage、console、location、history、screenX、scrollX ...
包含大量的方法，alert、close、scrollTo、open ...
包含大量的事件，focus、blur、load、hashchange ...
包含从EventTarget继承 addEventListener、removeEventListener、dispatchEvent方法

window 的属性/方法/事件，可以省略window，直接使用其属性/方法/事件

console.log(window.screenX);
console.log(console);

scrollTo(200, 200);
window.onload = function () {
  console.log("onload事件");
};

location

location中有大量关于url的信息，常用的是这些

hash：锚点，url上#号后面的内容，可以用于页面中定位
host：主机+端口号
hostname：主机
href：完整url链接
pathname：路径
port：端口号
protocol：协议

在控制台上直接输入 location，可以获取到 location 对象的信息

location还有三个方法，也和url相关

assign：跳转一个新的url页面
replace：替代当前页面，不会被保存到历史记录中，表示不能通过后退按钮回到该页面
reload：重新加载当前url的资源

history

history用来保存浏览器会话记录，可以通过history的方法跳转上、下一个页面

它有两个属性

length：history栈的长度，表示保存了几条数据
state：通过pushState/repleaceState 方法跳转保留的状态值

还有五个方法

pushState：跳转某一地址，三个参数分别为保存的state，页面的title，跳转的url地址
replaceState：替换当前地址
go：前进/后退指定页，传入数字
back：后退一页，相当于 go(-1)
forward：：前进一页，相当于go(1)

window.addEventListener("click", () => {
  history.pushState({ name: "alice" }, null, "/home");
  console.log(history.length);
  console.log(history.state);
});

用一张图来总结BOM的用法

DOM

浏览器中有很多标签，DOM就是用来操作它们的。DOM元素都继承自EventTarget，所以它们都有实例上的属性方法，也继承自Node，同样具有Node的属性和方法。

Node再往下划分，就是各个DOM元素，它们有各自的特征

Document：文档，包含HTMLDocument（html文档）、XMLDocument（xml文档）
Element：标签元素，包含HTMLElement，HTMLElement又包含HTMLDivElement（div元素），HTMLImageElement（img元素）
CharacterData：字符数据、文本，包含Text（标签中的内容）、Comment（注释）
Attr：属性，比如 name，class

node

node是其它元素的父类，它所拥有的属性，子元素都有，以下几个属性和方法比较常见

nodeName：节点名称
nodeType：节点类型
nodeValue：节点的值
childNodes：所有子节点
appendChild：方法，用于添加子元素

 <div class="box">我是一个盒子</div>

const divEl = document.querySelector("div");
console.log(divEl.nodeName);
console.log(divEl.nodeType);
console.log(divEl.nodeValue);
console.log(divEl.childNodes);
console.log(divEl.childNodes[0].nodeValue);

console.log(document.nodeName);
console.log(document.nodeType);
console.log(document.nodeValue);
console.log(document.childNodes);

每一种元素类型有对应的nodeType，比如 element_node 对应type为1，text_node 对应type为3，comment_node对应type为8，document_node对应type为9；而nodeValue只有文本类型的数据有。

document

document 是Document的实例对象，代表整个html页面，当页面被浏览器解析完成，就会创建一个document对象。

document 中有非常多的标签，当我们创建一个html页面时，至少会有以下内容。

所以它的属性和方法都和标签元素有关

body：获取body标签
title：获取文档标题
head：获取head标签
children：获取所有子元素，HTMLCollection
location：和window.location一样，拿到的是url信息

常用方法包括了创建、删除、获取元素

createElement：创建元素
removeElement：移除元素
appendChild：继承自Node的属性，添加子元素
querySelector：通过id/name/tagName获取单个元素
querySelectorAll：通过id/name/tagName获取多个元素
getElementById：通过Id获取元素
getElementsByName：通过Name获取元素
getElementsByTagName：通过TagName获取元素

// html 代码
<body>
    <p></p>
    <p></p>

// js代码
<script type="text/javascript">
  const divEl = document.createElement("div");
  const pEl = document.getElementsByTagName("p")[0];
  const divTags = document.querySelectorAll("div");

  document.body.appendChild(divEl);
  document.body.removeChild(pEl);

  console.log(pEl);
  console.log(divTags);
</script>
</body>

element

element与单个标签元素有关，指的是具体的dom元素，它有这些常用属性和方法

chidren：子元素
childNodes：继承自Node的属性，子节点
tagName：标签名
id：id属性
className：类名
classList：由类名组成的数组
clientWidth：元素宽度
clientHeight：元素高度
clientLeft：边框宽度
clientTop：边框高度
offsetWidth：距离左侧边距
offsetTop：距离右侧边距
getAttribute：方法，用于获取元素的某个属性
setAttribute：方法，用于设置元素的某个属性

// html代码
<div id="element" class="box content"></div>

// css代码
 .box {
    height: 200px;
    width: 200px;
    border: 10px solid #000;
}

// js代码
const divEl = document.querySelector("div");
console.log(divEl.children);
console.log(divEl.childNodes);
console.log(divEl.tagName);
console.log(divEl.id);
console.log(divEl.className);
console.log(divEl.classList);
console.log(divEl.clientWidth, divEl.clientHeight);
console.log(divEl.clientLeft, divEl.clientTop);
console.log(divEl.offsetLeft, divEl.offsetTop);
console.log(divEl.getAttribute("id"));
divEl.setAttribute("name", "alice");

用一张图来总结DOM的用法

从浏览器架构角度去了解BOM和DOM就能更好的掌握，从而自如使用，以上就是BOM和DOM相关内容，关于js高级，还有很多需要开发者掌握的地方，可以看看我写的其他博文，持续更新中~

标签：divEl,console,log,DOM,元素,window,BOM,浏览器,document
来源： https://www.cnblogs.com/vigourice/p/15855875.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9