7th Week Blog

Source: Internet
Author: User


The file object model (Documentobjectmodel, referred to as DOM) is a standard programming interface recommended by the Organization for the processing of extensible superscript languages. Documentobjectmodel's history dates back to the late 1990 's "browser Wars" between Microsoft and Netscape, with both sides giving the browser a powerful feature in order to make a life-and-death decision in JavaScript and JScript. Microsoft has added a number of proprietary things to Web technology, including VBScript, ActiveX, and Microsoft's own DHTML format, making it impossible for many Web pages to be displayed using non-Microsoft platforms and browsers. Dom is the masterpiece of the time.


getElementById (ID)


Returns a reference to the specified node.

getElementsByTagName (name)


Returns a collection of all matching elements in the document

createelement (name)



createTextNode (text)


Create a plain text node



Point to the document to which this node belongs



Returns an HTML node



Returns the Body node

element Method:

GetAttribute (AttributeName)


Returns the value of the specified property

SetAttribute (Attributename,value)


Assigning a value to a property

RemoveAttribute (AttributeName)


Removes the specified property and its value

getElementsByTagName (name)


Returns a collection of all matching elements within a node.

node Method:

AppendChild (Child)


Adds a new child node to the specified node

RemoveChild (Child)


Remove a child node from a specified node

ReplaceChild (Newchild,oldchild)


Replace a child node of a specified node

InsertBefore (Newchild,refchild)


Insert a new node in front of a node at the same level

HasChildNodes ()


Returns true if the node has a child node.

node Properties:



Holds the name of the node in the form of a string



Types of nodes that are stored in an integer data format



Store the value of the node in the available format



Reference to the parent node of the node



A collection of references to child nodes



Reference to the first child node in a child node union



A reference to the last child node in a child node union



Point to the previous sibling node, or null if the node is a sibling node



Point to the latter sibling node, or null if the node is a sibling node


Dom= Document Object Model, which provides a platform-and language-independent way to access and modify the content and structure of a document. In other words, this is a common way of representing and working with an HTML or XML document. It is important to note that Dom design is based on the protocol of the Object Management Organization (OMG) and therefore can be used in any programming language. It was originally thought of as a way to allow JavaScript to be portable between browsers, but Dom's application has gone far beyond this range. Dom technology allows the user page to dynamically change, such as the ability to dynamically display or hide an element, change their properties, add an element, and so on, Dom technology makes the page interactivity greatly enhanced. [1]

The DOM is actually a document model that is described in an object-oriented manner. The DOM defines the objects that are required to represent and modify the document, the behavior and properties of those objects, and the relationships between those objects. You can think of the DOM as a tree representation of the data and structure on the page, although the page may not be implemented in this way.
With JavaScript, you can refactor the entire HTML document. You can add, remove, change, or rearrange items on a page.


The DOM represents a document (in HTML, for example) as a tree. As shown in the following:

In the DOM, the document is a collection of nodes, and the nodes are divided into different types. element node, text node, attribute (attribute) node.
ELEMENT nodes: such as

Node,<body> is the sibling node of Text nodes: such as "My title", "My Link" and so on.
Attribute nodes: such as "href" in, and "class", "title", etc., which we often use in HTML.
The DOM is meant to manipulate elements in the HTML.


The BOM (Browser object mode) is a model of browser objects that describes the hierarchical relationship between objects and objects, and the browser object model provides a content-independent object structure that can interact with the browser window. A BOM consists of multiple objects, which represent the window object of the browser windows as the top-level object of the BOM, and the other objects are child objects of that object.


Moveby (x, y)-Moves the form's x pixels horizontally from the current position, moves the form y pixels vertically, X is negative, moves the form to the left, Y is negative, and moves the form up
MoveTo (x, y)-Moves the upper-left corner of the form to the (x, y) point relative to the upper-left corner of the screen, and when a negative number is used as a parameter, the form moves out of the visible area of the screen
Resizeby (w,h)--relative to the current size of the form, the width adjusts to w pixels and the height of h pixels. If the argument is negative, the form is scaled down, and the form is enlarged instead
Resizeto (w,h)--Adjust the form width to w pixels and height to h pixels
Form Scroll Axis control
ScrollTo (x, y)--if there is a scroll bar in the form, move the horizontal scroll bar to a position relative to the form's width of x pixels, and move the vertical scroll bar to a position relative to the form's Y-pixel height
Scrollby (x, y)-if there is a scrollbar, move the horizontal scroll bar to the position of x pixels relative to the current horizontal scroll bar (that is, move the X-pixel to the left), and move the vertical scroll bar to a position relative to the current vertical scrollbar height of y pixels (that is, move the Y-pixel down)
Form Focus Control
Focus ()--Causes the form or control to get focus
Blur ()--in contrast to the focus function, causes the form or control to lose focus
New Form
Open ()--Opens (pops up) a new form
Close ()--Close the form
Opener Property--a reference to the parent form in a new form, meaning "opener" in Chinese

Back () load the previous URL in the history list
Forward () load the next URL in the history list
Go (num) loads a specific page in the history list

Assign () loads the new document, which is the same as the HREF attribute that assigns a URL directly to the Location object.
Reload () reloads the current document, if the method does not specify a parameter, or if the parameter is False, it uses the HTTP header if-modified-since to detect whether the document on the server has changed. If the document has changed, reload () will download the document again. If the document does not change, the method will load the document from the cache. This is exactly the same as when the user clicks the browser's Refresh button. If the parameter of the method is set to true, it bypasses the cache and re-downloads the document from the server, regardless of the last modification date of the document. This is exactly the same as when the user presses the refresh button of the browser while holding down shift.
Replace () replaces the current document with a new document, and the Replace () method does not generate a new record in the history object. When you use this method, the new URL overwrites the current record in the history object.


A BOM consists of multiple objects, which represent the window object of the browser windows as the top-level object of the BOM, and the other objects are child objects of that object.


1. Pop up the new browser window, move, close the browser window and resize the window;

2. A navigation object that provides detailed information about the Web browser;

3. Locate objects that provide detailed information about the pages loaded into the browser;

4. Screen object that provides user screen resolution details;

5. Support for cookies.

7th Week Blog

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.