Javascript组成
- ECMAScript(核心):js的语法和基本对象
- DOM (文档对象模型):处理网页内容的方法和接口
- BOM(浏览器对象模型):与浏览器交互的方法和接口
DOM 是为了操作文档出现的 API,document 是其的一个对象;
BOM 是为了操作浏览器出现的 API,window 是其的一个对象。
DOM
DOM全称:Document object Model (文档对象模型)。是针对XML的基于数的API。描述了处理网页内容的方法和接口,是HTML和XML的API,DOM把整个页面规划成由节点层级构成的文档。
BOM
BOM全称:Browser object Model (浏览器对象模型)。BOM其实就是为了控制浏览器的行为而出现的接口。
浏览器可以做什么呢?比如跳转到另一个页面、前进、后退等等,程序还可能需要获取屏幕的大小之类的参数。
所以 BOM 就是为了解决这些事情出现的接口。比如我们要让浏览器跳转到另一个页面,只需要
location.href = “http://www.xxxx.com”;这个 location 就是 BOM 里的一个对象。
DOM 、BOM网页展示
BOM是浏览器对象模型,DOM是文档对象模型,前者是对浏览器本身进行操作,而后者是对浏览器(可看成容器)内的内容进行操作,下图例:
归DOM管:E
E区(是document。里面有html,CSS和JS,部署在服务器上,我们可以通过浏览器的地址栏输入URL然后回车将这个document加载到本地,浏览,右键查看源代码等。
归BOM管:A、B、C、D
A区(浏览器的标签页,地址栏,搜索栏,书签栏,窗口放大还原关闭按钮,菜单栏等等)
B区(浏览器的右键菜单)
C区(document加载时的状态栏,显示http状态码等)
D区(滚动条scroll bar)
虚拟DOM (Virtual DOM)
vuejs 将DOM抽象成一个以JavaScript对象为节点的虚拟DOM树,再以Vnode节点模拟真实的DOM,可以对这颗抽象树进行创建节点,删除节点,修改节点的操作,经过diff算法得出需要修改的最小单位,再更新视图,大大提升的性能。
注:不是页面的真实DOM,是专门给vue或react操作的DOM,没放在页面上,是放在电脑的运行内存里。加上diff算法。为了是尽量减少与真实DOM的交互。
原文链接:https://blog.csdn.net/qq877507054/article/details/51395830