On BOM and DOM (1): overview of BOM and DOM

JavaScript The implementation of includes the following 3 Parts of ：

• ECMAScript( The core )： It describes JS The grammar and basic objects of .
• Browser object model （BOM）： Methods and interfaces for interacting with browsers
• Document object model （DOM）： Methods and interfaces for handling web content

DOM- Document object model

DOM（ Document object model ） yes  HTML  and  XML  The application program interface of , Operation document appears API, It is to operate the interface of the document .DOM Represents the current web page loaded into the browser window ： The browser provides us with a map of the current web page （ Or the model ）, And we can js Go read this map .

• D（ file -document） It can be understood as the whole Web Loaded web documents
• O（ object -object） It can be understood as similar window Objects only come from things , You can call properties and methods , What we're talking about here is document object ,
• M（ Model -model） It can be understood as the tree structure of Web documents ,DOM A tree is made up of nodes

BOM- Browser object model

BOM yes Browser Object Model, Browser object model ,BOM  It mainly deals with browser windows and frames , But usually browser specific  JavaScript  Extensions are seen as BOM Part of . These extensions include ：

• Pop up a new browser window ：alert、confirm、prompt
• Move 、 Close and resize browser windows ：scrollTo、moveTo、resizeTo etc.
• Provide Web Anchor object for browser details ：Navigator、History
• Screen object that provides user screen resolution details ：Screen
• Yes cookie Support for ：cookie
• IE Expanded BOM, Joined the ActiveXObject class , Can pass JavaScript Instantiation ActiveX object

window Object corresponds to the browser window itself , The properties and methods of this object are often referred to as BOM

DOM contain ：window

• Window Object contains properties ：document、location、navigator、screen、history、frames
• Document The root node contains child nodes ：forms、location、anchors、images、links

from window.document It can already be seen that ,DOM The most fundamental object of is BOM Of window A child of an object .

difference ：DOM Describes the methods and interfaces for handling web content ,BOM Describes the methods and interfaces for interacting with browsers .

according to W3C DOM standard ,DOM yes HTML And XML Application programming interface （API）,DOM Map the entire page to a file consisting of hierarchical nodes . Yes 1 level 、2 level 、3 Grade in total 3 A level .

BOM And DOM Comparison of

• BOM To handle browser windows and frames
• DOM Interfaces that appear in order to manipulate documents , yes HTML and XML The application program interface of （API）.
• DOM yes W3C Standards for ; [ The standards that all browsers follow ]
• BOM yes Each browser manufacturer according to DOM Implementation on their browsers ;[ Different browser definitions are different , Different ways of implementation ]
• window yes BOM object , Instead of js object ;

javacsript By accessing BOM（Browser Object Model） Object to access 、 control 、 Modify the client ( browser ), because BOM Of window Contains document,window The properties and methods of an object are directly available and perceived , So you can use window Object's document attribute , adopt document Properties are accessible 、 retrieval 、 modify XHTML Document content and structure . because document The object is DOM（Document Object Model） The root node of the model . so to speak ,BOM Contains DOM( object ), The browser provides access to BOM object , from BOM Object access to DOM object , thus js It can operate the browser and the documents read by the browser . among DOM contain ：window

BOM and DOM Structural relationship diagram of

Reference article ：

ECMAScript、BOM、DOM（ The core 、 Browser object model and document object model ）https://www.cnblogs.com/best/p/8028168.html

JavaScript Learning summary （ 3、 ... and ）BOM and DOM Detailed explanation https://segmentfault.com/a/1190000000654274

Javascript operation BOM and DOM Detailed explanation （1） https://blog.csdn.net/openbox2008/article/details/85260063

JavaWeb Learning summary ：JavaScript（BOM and DOM） https://blog.csdn.net/weixin_42384085/article/details/99807198

HTML DOM Event object https://www.w3school.com.cn/jsref/dom_obj_event.asp

XML DOM - Element object https://www.w3school.com.cn/xmldom/dom_element.asp

JAVAScript in DOM And BOM The difference analysis of https://www.cnblogs.com/fjner/p/5892325.html

Reprint This station article 《 We can talk BOM and DOM(1):BOM And DOM summary 》, Please indicate the source ：https://www.zhoulujun.cn/html/webfront/SGML/xml/2020_0317_8346.html