Dom and BOM

Labels: windows must be organized to be compatible with multiple LAN win wiki padding

This is two different concepts in the browser runtime.

1. Bom browser Object Model

Provides objects that interact with browser windows independently of the content. Describes the methods and interfaces for interacting with the browser. You can access and operate the browser window. For example, you can pop up a new window, change the text in the status bar, and support cookies, IE also extends Bom, adds the activexobject class, And instantiates ActiveX objects through JS scripts)

2. Dom Document Object Model

Dom is a tree-based API for XML. Describes the methods and interfaces for processing webpage content. It is an HTML and xml api. Dom plans the entire page as a document composed of node levels. Dom itself is a language-independent API that is not bound to Java, JavaScript, or other languages.

Background:

DOM = Document Object Model, Document Object Model. Dom can access and modify the content and structure of a document in a way independent of platform and language. In other words, this is a common way to represent and process an HTML or XML document. Dom is very important. Dom is designed based on the specification of Object Management Organization (OMG), so it can be used in any programming language. At first people thought of it as a method that allowed JavaScript to be transplanted between browsers, but Dom applications are far beyond this scope. DOM technology allows users to dynamically change pages, such as dynamically displaying or hiding an element, changing their attributes, and adding an element. DOM technology greatly enhances page interaction. [1] Dom is actually an object-oriented document model. Dom defines the objects required to represent and modify documents, the behavior and attributes of these objects, and the relationship between these objects. Dom can be considered as a tree representation of data and structure on the page, but the page may not be implemented in this way. Javascript allows you to refactor the entire HTML document. You can add, remove, change, or rearrange projects on the page. To change something on the page, JavaScript needs to obtain an entry to access all elements in the HTML document. This entry, along with the methods and attributes for adding, moving, changing, or removing HTML elements, is obtained through the Document Object Model (DOM ). In 1998, W3C released the first level DOM specification. This specification allows access and operation of each individual element in an HTML page. All browsers have implemented this standard, so the compatibility of Dom is hard to find. Dom can be used by JavaScript to read and change HTML, XHTML, and XML documents. Dom is divided into different parts (core, XML and HTML) and levels (DOM Level 1/2/3): Domdom follows W3C standards. Dom defines the criteria for accessing HTML and XML documents: "The W3C Document Object Model (DOM) is an interface neutral to the platform and language, it allows programs and scripts to dynamically access and update the content, structure, and style of a document. "W3C Dom standards are divided into three different parts:

• Core dom-Standard Model for any structured document
• Xml dom-Standard Model for XML documents
• HTML dom-Standard Model for HTML documents

The XML domxml Dom is: [1]

• Standard Object Model for XML
• Standard programming interface for XML
• Neutral in platform and language
• W3C Standard

The xml dom defines the objects and attributes of all XML elements and the methods (interfaces) for accessing them ). In other words, xml dom is the standard used to obtain, modify, add, or delete XML elements. The HTML domhtml Dom is: [2]

• Standard HTML Object Model
• Standard HTML programming interface
• W3C Standard

HTML Dom defines the objects and attributes of all HTML elements and the methods (interfaces) for accessing them ). In other words, HTML Dom is a standard for getting, modifying, adding, or deleting HTML elements. According to W3C Dom standards, Dom is an application programming interface (API) between HTML and XML. Dom maps the entire page into a file composed of hierarchical nodes. There are three levels: Level 1, level 2, and level 3. Level 1 dom1 Dom became W3C proposal in October 1998, which consists of two modules: Dom core and Dom HTML. The Dom core can map the XML-based document structure, allowing you to obtain and operate any part of the document. Dom HTML extends the DOM core by adding HTML-specific objects and functions. Level 2 Domdom given that level 1 Dom only targets the ing document structure, level 2 Dom is more oriented. Through the extension of the original Dom, level 2 Dom adds mouse and user interface events through the object interface (DHTML supports mouse and user interface events for a long time) range, traversal (repeatedly executing Dom documents), and Cascading Style Sheets (CSS. The core of Dom 1 is also extended to support XML Namespaces. Level 2 Dom introduces several new Dom modules to handle new interface types: Dom view: Describes the interfaces used to track various views of a document (before and after CSS style design documents); DOM events: interface for describing events; DOM style: interface for describing and processing CSS-based styles; DOM traversal and range: interface for describing traversal and Operation Document tree; level 3 dom3 dom further expands DOM by introducing a unified method of loading and saving documents and document verification methods. dom3 contains a new module named "dom loading and saving, dom core Extensions support all content of xml1.0, including XML infoset, XPath, and XML base. Level 0 Dom when reading dom-related materials, you may encounter reference level 0 Dom. Note that there is no standard called level 0 Dom, it is only a reference point in Dom history (Level 0 Dom is considered the earliest DHTML supported in Internet Explorer 4.0 and Netscape navigator4.0 ). Each component in the HTML document is a node based on the Dom. Dom is as follows: the entire document is a document node. Each HTML Tag is an element node. The text contained in the HTML element is a text node. Each HTML attribute is an attribute node. Comments belong to the annotation node. node levels have different levels of nodes. link. All nodes in the HTML document form a document tree (or node tree ). Each element, attribute, and text in an HTML document represents a node in the tree. The tree begins with the document node and continues to expand until all text nodes at the lowest level of the tree. The following figure shows a document tree (node tree): See the following HTML document for the document tree: <HTML> Link. Each node except the document node has Parent node. For example, the parent nodes of Subnode. For example, a Peer (peer node). For example, Descendant, Descendant refers to all the subnodes of a node, or the subnodes of these subnodes, and so on. For example, all text nodes are the descendants of the <HTML> node, and the first text node is the descendant of the Advanced generation. The first generation is the parent node of a node, or the parent node of the parent node, and so on. For example, all text nodes can use the <HTML> node as the origin node. You can find the elements you want to operate on by using getelementbyid () and getelementsbytagname () by using the parentnode, firstchild, and getelementbyid () and getelementsbytagname () attributes of an element node, you can find any HTML element in the entire HTML document. The two methods ignore the structure of the document. If you want to find all the <p> elements in the document, getelementsbytagname () will find them all, no matter which level the <p> element is in the document. At the same time, the getelementbyid () method returns the correct element, no matter where it is hidden in the document structure. These two methods will provide you with any HTML elements you need, regardless of their location in the document! Getelementbyid () can return the element through the specified ID: getelementbyid () syntax document. getelementbyid ("ID"); Note: getelementbyid () cannot work in XML. In the XML document, you must search by Attributes With the type ID, And this type must be declared in the xml dtd. The getelementsbytagname () method returns all elements (as a node list) using the specified tag name. These elements are the descendants of the elements when you use this method. Getelementsbytagname () can be used for any HTML element: getelementsbytagname () syntax document. getelementsbytagname ("tag name"); or: document. getelementbyid ('id '). getelementsbytagname ("tag name"); instance 1 the following example returns a list Of all <p> elements in the document: document. getelementsbytagname ("p"); instance 2 in the following example, a node list of all <p> elements is returned, and these <p> elements must be the descendant of the element whose ID is "maindiv": document. getelementbyid ('maindiv '). getelementsbytagname ("p"); node list when we use a node list, we usually need to save this list in a variable, like this: var x = Document. getelementsbytagname ("p"); now, variable X contains a list of all <p> elements on the page, and we can access these <p> elements through their index numbers. Note: The index number starts from 0. You can use the Length attribute to traverse the node list cyclically: var x = document. getelementsbytagname ("p"); For (VAR I = 0; I <X. length; I ++) {// do something with each paragraph} You can also access a specific element through the index number. To access the third <p> element, you can write as follows: var y = x [2]; the three attributes parentnode, firstchild, and lastchild can follow the structure of the document and perform "short-distance travel" in the document ". See the following HTML snippet: [1] <Table> <tr> <TD> JOHN </TD> <TD> Doe </TD> <TD> Alaska </TD> </tr> </table> in the preceding HTML code, the first <TD> is the first child element (firstchild) of the <tr> element, and the last <TD> is the last child element (lastchild) of the <tr> element ). <Tr> is the parent node of each <TD> element ). The most common use of firstchild is to access the text of an element: var x = [A paragraph]; var text = x. firstchild. nodevalue; The parentnode attribute is often used to change the structure of a document. Assume that you want to delete a node with the ID "maindiv" from the document: var x = document. getelementbyid ("maindiv"); X. parentnode. removechild (x); first, you need to find the node with the specified ID, then move it to its parent node and execute the removechild () method. Advantages and disadvantages the advantage of Dom editing is mainly manifested in: ease of use, when using Dom, all XML document information will be stored in the memory, and traversal is simple, supports XPath, enhanced ease of use. The disadvantages of Dom are as follows: low efficiency, slow resolution, and high memory usage, which is almost impossible for large files. In addition, low efficiency also results in a large amount of time consumption, because when Dom is used for parsing, an object will be created for each element, attribute, processing-instruction, and comment of the document, in this way, the creation and destruction of a large number of objects used in the DOM mechanism will undoubtedly affect its efficiency.

Bom: (Browser Object Model (browserobjectmodel ))

Browser Object Model (BOM) is a browser object model used to describe the hierarchical relationship between objects, the browser object model provides an object structure independent of content that can interact with browser windows. Bom consists of multiple objects, which indicate that the window object in the browser window is the top-level object of BOM, and other objects are sub-objects of this object. [1]

Chinese Name:

Browser Object Model

Foreign Name:

Browser Object Model

Write down:

BOM

Overview:

Describe the hierarchical relationship model between objects

Edit main functions 1. the ability to pop up a new browser window; 2. ability to move, close, and change the browser window size; 3. navigation Objects that provide detailed information about Web browsers; 4. provides a browser to load local objects with detailed page information; 5. provides screen objects with detailed information about the user's screen resolution. 6. supports cookies. 7. internet Explorer extends BOM to include ActiveX object classes. ActiveX objects can be implemented through JavaScript.

Dom has the following advantages: ease of use. When using Dom, all XML document information is stored in the memory, which is simple in traversal and supports XPath, enhancing ease of use.
The disadvantages of Dom are as follows: low efficiency, slow resolution, and high memory usage, which is almost impossible for large files. In addition, low efficiency also results in a large amount of time consumption, because when Dom is used for parsing, an object will be created for each element, attribute, processing-instruction, and comment of the document, in this way, the creation and destruction of a large number of objects used in the DOM mechanism will undoubtedly affect its efficiency.

 

 

Dom and BOM