DOM & BOM

DOM: The full name of Dom is Document Object Model, which is the Document Object Model. Dom is the W3C standard.

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

 

1. Dom origin (recourse): 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.

2. DOM method:

HTML Dom can be accessed through JavaScript (and other programming languages.

All HTML elements are defined as objects, while programming interfaces are object methods and object attributes.

Actions that you can perform (such as adding or modifying elements ).

Attribute is the value that you can obtain or set (such as the name or content of a node ).

3. Dom content: From w3school

1. Through HTML Dom, JavaScript can access every element in the HTML document.

2. With HTML Dom, you can access style objects of HTML objects.

3. html Dom allows you to execute code when an event occurs.

When an HTML element "SoMething happens", the browser generates an event:

• Click on the element
• Load page
• Change input field

 

4. Dom applications:

---------------------

Zhaoke_930325

Source: csdn

Original: 75635179

Copyright Disclaimer: This article is an original article by the blogger. For more information, see the blog post link!

Search for elements and change html

Style, use event (click on the element, load the page, and change the input field)

 

1. You can use 'javascript:; 'to delete a subnode:

 

For (VAR I = 0; I <AA. length; I ++ ){

AA [I]. onclick = function (){

Oul. removechild (this. parentnode );

};

}

2. childnodes only supports IE6-8 and includes text nodes and element nodes, while children only includes elements, not text nodes.

3. a subnode is a node of the first layer, but an inner node.

4. parentnode: The current parent node, which is used to locate the parent node.

5. Add the specified attribute in the setattribute (name, value) method and assign the specified value to it.

If the specified property already exists, only set/change the value. Getattribute is used to obtain attributes.

 

Document. getelementsbytagname ("input") [0]. setattribute ("type", "button ");

6. Method for Retrieving Element attributes:

 

Function getstyle (oparents, sclass)

{

VaR AELE = oparents. getelementsbytagname ('*');

VaR aresult [];

For (VAR I = 0; I <AELE. length; I ++ ){

If (AELE [I]. classname = sclass)

{

Aresult. Push (AELE [I]);

}

}

Return aresult;

};

7. Parent-level calling methods include:

. Appendchild adds a child node. The process is to delete the element from the original parent level and then add it to the new parent level ;. insertbefore (subnode, before whom );. removechild removes the child node.

8. In the DOM document, you can use document. createdocumentfragment (); To create a table, by calling. tbodies [I] takes the body ,. rows [I] Fetch rows ,. cells [I ,. tolowercase () is converted to lowercase, Which is case insensitive for search ,. the search ('str') value is a location. If the value is-1, it is not found (fuzzy search ),. split ('str') Splits a string.

9. The. Sort () method is unique to the ARR array. It is used for verification when the focus is lost during input. onkeyup onblur,

Submit onsubmit for checking.

 

Bom:

Bom is the browser object model, which is the browser object model. To put it simply, Bom is the same as Dom, but Dom operates on elements in HTML. Bom is the API of the browser and operates on the browser (that is, controlling browser behavior)

All browsers support window objects. It indicates the browser window. All JavaScript global objects, functions, and variables are automatically members of the window object. The global variable is the property of the window object. Global functions are the methods of window objects. Even the Document Object (html dom) is also the property of the window object: some common window Methods: You can use two attributes to determine the size of the browser window. Both attributes are returned in pixels:

• Window. innerheight-the internal height of the browser window (in pixels)
• Window. innerwidth-the internal width of the browser window (in pixels)
• Other methods:
• Window. open ()-open a new window
• Window. Close ()-close the current window
• Window. moveTo ()-Move the current window
• Window. resizeTo ()-indicates the current window

1. The window. Screen Object contains information about the user's screen.

2. The screen. Width attribute returns the width (in pixels) of the visitor's screen ).

3. The screen. Height attribute returns the height of the visitor's screen (in pixels)

4. The screen. availwidth attribute returns the visitor's screen width (in pixels), minus Windows taskbar and other interface functions.

5. The screen. availheight attribute returns the height (in pixels) of the visitor's screen, minus Windows taskbar and other interface functions.

6. The screen. colordepth attribute returns the number of digits used to display a color. All modern computers use 24-bit or 32-bit hardware for color resolution. 24-bit = 16,777,216 different "True Colors ". 32-bit = 4,294,967,296 different "dark colors"

7. The screen. pixeldepth attribute returns the pixel depth of the screen.

8. The window. Location object can be used to obtain the current page address (URL) and redirect the browser to the new page.

DOM & BOM