7th Week Blog

Dom:

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.

Method:

getElementById (ID)	Node	Returns a reference to the specified node.
getElementsByTagName (name)	NodeList	Returns a collection of all matching elements in the document
createelement (name)	Node	Node
createTextNode (text)	Node	Create a plain text node
Ownerdocument	Document	Point to the document to which this node belongs
DocumentElement	Node	Returns an HTML node
Document.body	Node	Returns the Body node
element Method:
GetAttribute (AttributeName)	String	Returns the value of the specified property
SetAttribute (Attributename,value)	String	Assigning a value to a property
RemoveAttribute (AttributeName)	String	Removes the specified property and its value
getElementsByTagName (name)	NodeList	Returns a collection of all matching elements within a node.
node Method:
AppendChild (Child)	Node	Adds a new child node to the specified node
RemoveChild (Child)	Node	Remove a child node from a specified node
ReplaceChild (Newchild,oldchild)	Node	Replace a child node of a specified node
InsertBefore (Newchild,refchild)	Node	Insert a new node in front of a node at the same level
HasChildNodes ()	Boolean	Returns true if the node has a child node.
node Properties:
NodeName	String	Holds the name of the node in the form of a string
NodeType	String	Types of nodes that are stored in an integer data format
NodeValue	String	Store the value of the node in the available format
ParentNode	Node	Reference to the parent node of the node
ChildNodes	NodeList	A collection of references to child nodes
FirstChild	Node	Reference to the first child node in a child node union
LastChild	Node	A reference to the last child node in a child node union
PreviousSibling	Node	Point to the previous sibling node, or null if the node is a sibling node
NextSibling	Node	Point to the latter sibling node, or null if the node is a sibling node

Content:

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.

Application:

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.

Bom:

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.

Method:

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.

Content:

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.

Application:

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