BOM和DOM的详解

前言

很多同学在面试的时候被问到BOM和DOM是什么，其实我们写代码的时候无时无刻不在使用BOM和DOM，但是被问到时却不知道怎么回答，今天一篇文章教会你什么是BOM，什么是DOM~

---

一、JS是什么组成的？

我们在讲BOM和DOM之前，不得不先说一下JS是有哪几部分组成的
JS是由三部分组成的：
1、ECMAscript：描述了该语言的语法和基本对象
2、BOM：浏览器对象模型，描述了与浏览器进项交互的方法和接口
3、DOM：文档对象模型，描述了处理网页内容的方法和接口

二、什么是BOM？

1.BOM的含义

BOM是浏览器对象模型，和网页内容无关，由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window。
Window：window有双重角色，既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAscript规定的全局对象，

2.Window下的内置对象和方法（BOM）

给大家用一张图理清思路~

3.BOM事件

1、window.onload事件：页面加载完成后触发的事件
window.οnlοad=function(){ }

2、window.onscroll事件：拖动浏览器滚动条事件（高频事件）
window.οnscrοll=function(){ }

3、window.onresize事件：浏览器窗口（可视窗口）缩放事件（高频事件）
window.οnresize=function(){ }

二、什么是DOM？

1.DOM的含义

DOM是文档对象模型，用来描述一个层次化的节点数，允许开发人员获取、添加、移除、修改页面中的某一部分元素

2.DOM的操作

给大家用一张图理清思路~

2.DOM节点的创建、添加、删除、克隆、替换

方法名称	功能
document.createElement(元素节点)	创建一个元素节点，参数是创建的元素。
父节点.appendChild(子节点)	把子节点插入到父节点的内部最后的位置
父节点.insertBefore(新的节点,存在节点)	在父节点内,把新的元素节点插入到已经存在的元素节点的前面
父节点.removeChild(子节点)	删除父节点内部的子节点 remove
obj.cloneNode( true）	克隆(复制)obj节点，可以传一个布尔值为参数，如果参数为true，连同obj子元素一起克隆
父节点.replaceChild(新添加的节点 , 被替换的节点)	替换子节点

总结

在面试中有关于DOM和BOM的问题还是很容易被问到的，希望可以帮助到你~