Dom&bom

JavaScript consists of:

1. ECMAScript basic syntax.

2. BOM (Browser object model)

3. DOM (Document Object model)

On the origin of the concept of Dom&bom

The Document Object model, or Dom, is the standard programming interface recommended by the Organization for the processing of extensible flag languages. On a Web page, objects that organize pages (or documents) are organized in a tree structure that represents the standard model for objects in a document called the DOM. Document Object model can be traced back to the late 1990 's "browser Wars" between Microsoft and Netscape, both in order to make life and death in JS and JScript, so large-scale to give the browser a powerful function. 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.

A BOM (Browser object model) 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 a 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.

Methods&content&application

A) BOM (Borwser Object Model)

Browser Object model: Uses objects to describe the contents of various parts of the browser.

1) window: the current window

Window Common methods:

Open () opens a new resource.

MoveTo () Moves the screen position in the upper-left corner of the window to the specified x and Y positions.

Moveby () moves the specified x and Y offset values (upper-left corner) relative to the current window.

SetInterval () specifies the specified code every interval of milliseconds specified.

SetTimeout () specifies the specified code one time after the specified number of milliseconds.

A

The open () method receives 4 parameters, which are open resource name, open with, open window size position, resource cannot find whether to use other substitution.

Here is an example:

function Openimage ()

{

window.open ("image.html", "_blank", "height = 500pt,width = 350pt,top = 50pt,left = 450pt", false);

}

Where the third parameter sets various properties, we use commas to separate them.

B) Examples of other methods:

Window.moveto (100,100);

Window.moveby (30,0);

The parameters passed in are all moving values, and the origin of the knowledge reference is different.

C) setinterval () specifies the specified code every interval of milliseconds specified. Loop execution

Example: var id = window.setinterval ("ShowImage ()", 2000);

We can pass Window.clearinterval (ID); To stop the execution loop above.

SetTimeout () specifies the specified code one time after the specified number of milliseconds. Execute only once

Example: Window.settimeout ("ShowImage ()", 2000);

2) Address bar Object

Location (URL address bar object)

Common methods are

HREF: Sets or gets the entire URL as a string.

Reload (): Reload the page address.

Example:

document.write ("Address of the current address bar:" +location.href); Get Address bar Address

Location.href = "http://www.baidu.com"; Set Address bar Address

Location.reload (); Reload Address bar Address

3) Screen Object

Screen object: Gets some data from the computer's screen.

Common methods:

Availheight get the work area height of the system screen, exclude Microsoft? Windows? Task bar.

Availwidth gets the width of the work area of the system screen, excluding the Windows taskbar.

Height gets the vertical resolution of the screen.

Width gets the vertical resolution of the screen.

Example:

document.write ("Exclude taskbar Height:" + screen.availheight+ "<br/>");

document.write ("Exclude taskbar width:" + screen.availwidth+ "<br/>");

document.write ("includes taskbar height:" + screen.height+ "<br/>");

document.write ("includes taskbar height:" + screen.width+ "<br/>");

II) DOM programming (Document Object Model)

Document Object Model: When an HTML page is loaded into the browser, then the browser creates a corresponding object for each tag to describe all the information about the tag, so the page information we see is actually seeing the information of those tag objects, and if we need to manipulate the data on the page, Then we can work with these tag objects.

So now we're going to use the method provided here to get to the node of the page:

var elements = document.all; Get all nodes on a page

for (var index = 0; index<elements.length; index++)

{

Alert ("Node name:" +elements[index].nodename); The name of the NodeName node

}

Returns an array of all the note objects for a page through document.all, and then iterates through the array output node names.

You can also get a collection of nodes for a tag:

var images = document.images; Images gets all the IMG nodes of a page.

A) Several ways to get a tag node: 1) Find a node by its attributes

We can use the following methods:

A) through the ID:document.getElementById of the tag ("HTML element ID")

Example:

var imagenode = document.getElementById ("Iamge1");

IMAGENODE.SRC = "1.jpg";

Get an ID of iamge1 node object and set it to SRC attribute value.

b) by tag name: document.getElementsByTagName ("label name")

Example:

var divs = document.getelementsbytagname ("div"); Find the node based on the tag name, note: An array is returned.

for (var index = 0; index<divs.length; index++) {

divs[index].innerhtml = "I am div". FontColor ("Red");

}

c) through the element's Name property: Document.getelementsbyname ("Name of HTML element")

Example:

var buttons = document.getelementsbyname ("button"); Find an object based on the property value of name, and note that the returned array object is also

for (var index = 0; index<buttons.length; index++) {

Buttons[index].value= "button text";

}

2) Finding nodes through relationships

There are several methods in document that can be used to obtain the nodes that are related to it through a node:

ParentNode Gets the parent node of the current element.

ChildNodes gets all the next-level child elements of the current element

FirstChild Gets the first child node of the current node.

LastChild gets the last child node of the current node.

NextSibling gets the next node of the current node. (Brother node)

PreviousSibling gets the previous node of the current node. (Brother node)

The following HTML code is available:

<form id= "MyForm" ><input type= "text" id= "username"/><input type= "text" id= "pass"/><br/>< /form>

Note the label and label are not left blank.

To derive a node from a relationship:

var a = document.getElementById ("MyImage");

var B = a.previoussibling;

Alert ("PreviousSibling is:" + b.nodename);

The above example uses the PreviousSibling method, note: When looking for a child node, the browser will be empty text content also as a child node.

So if you are looking for a child node, if you want only the label node, the other nodes do not need to, then you can filter by the type of the node.

Type of node:

The type of the label node is 1.

Node type for empty text: 3

Node type of note: 8

So how to judge a node type, we can use the NodeType method.

For the above code if we want to <form> all the tag nodes, we can write this:

var a = document.getElementById ("MyForm");

var B = a.childnodes;

for (var index = 0; index < b.length; index++)

{

if (B[index].nodetype = = 1)

{Alert ("Name:" + b[index].nodename+ "type:" + B[index].nodetype)};

}

B) Create, delete, insert nodes

We can do this in the following ways: (Elt is a node object)

Document.createelement ("tag name") Create a new element node

Elt.setattribute ("Property name", "property value") to set the properties of the node

Elt.appendchild (e) Adding elements to the last position in the ELT

Elt.insertbefore (NewNOde, child); Added to ELT, before child.

Note: The ELT object must be the immediate parent node of the child node

Elt.removechild (echild) deletes the specified sub-section

Note: The ELT must be a child's immediate parent node

Example:

Create a TR Object

var trnode = document.createelement ("tr");//Create TR Tag node

var tdNode1 = document.createelement ("TD");

var tdNode2 = document.createelement ("TD");

tdnode1.innerhtml = "<input type= ' file '/>";//Set properties within TD tag

tdnode2.innerhtml = "<a href= ' # ' onclick= ' Delfile (this) ' > Remove Attachments </a>"

Add TD to TR

Trnode.appendchild (TDNODE1);

Trnode.appendchild (TDNODE2);

var tbody = document.getElementsByTagName ("tbody") [0]; Note: The Direct parent node of TR is tbody instead of table.

var lasttr = document.getElementById ("lasttr");

Tbody.insertbefore (Trnode, lasttr); The first parameter is the new node, and the second parameter is a node that already exists.

var trnode = ANode.parentNode.parentNode;

var tbody = document.getElementsByTagName ("tbody") [0];

Tbody.removechild (Trnode);//delete the target node

III) Use of nodes to achieve the interaction between tags

To achieve the interaction between tags, we can add a time in a tag and then change the time to trigger a function that modifies the properties or contents of other notes internally.

Here is an example implementation: When selecting the contents of a year drop-down bar, the month drop-down bar appears with options for our selection.

HTML code, registering a onchange event for the year, triggering the Getmymouth () function.

<select id= "Myyear" onchange= "Getmymouth ()" ><option> Please select the year </option></select>

<select id= "Mymouth" ><option> Please select month </option></select>

Use the tag node to add a selection:

function Getmymouth ()

{

var Mymouth = document.getElementById ("Mymouth");

Delete month information

var oldmouth = mymouth.childnodes;

for (var i = 1; i < oldmouth.length;)

{

Mymouth.removechild (Oldmouth[i]);

}

MyMouth.options.length = 1;//One of the remaining default options

Add month information

for (var i = 1; i <; i++)

{

var newoption = document.createelement ("option");

newoption.innerhtml = i;

Mymouth.appendchild (newoption);

}

}

(iv) manipulating CSS code with nodes

After we get the node of the target tag, we can also modify its CSS style through the Style property. Here are some examples:

var span =document.getelementbyid ("code");

The CSS style for manipulating spans.

Span.style.color= "Red";

Span.style.fontsize= "30px";

Span.style.fontweight= "Bold";

Span.style.backgroundcolor= "Gray";

Span.style.textdecoration= "Line-through";

(v) Regular expressions

In Javascrip, the method of regular creation is:

Mode 1:

Re =/Regular code .../mode

Mode 2:

Re = new REGEXP ("Regular Code", "mode");

The commonly used patterns are:

G (Full text lookup for all occurrences of pattern)

I (ignoring case)

Common methods for regular objects:

Test () determines whether the contents of a string conform to the rules defined by the regular

EXEC () finds the specified string if there is a rule-compliant substring

Example one:

var str = "HEllo123";

var reg =/^[a-z0-9]+$/i; Note: If JavaScript does not add a boundary match, it returns true as long as there is a string that matches the rule in the full text.

document.write ("Conforms to the rules?") "+reg.test (str));

The result is: true

If you want to accurately judge the entire string, you need to add the boundary match to the beginning ^ with the end $.

Example two:

var str = "Jin Wang Yao Tuo tang da Jia Gao Xing ma";

To find a three-letter word.

var reg =/\b[a-z]{3}\b/gi; If no pattern g is added, each time it is searched from the beginning of the string

var line = "";

while (line = reg.exec (str))) {

document.write (line+ ",");

}

The results were: Jin,yao,tuo,jia,gao,

\b Represents the middle of the word and the invisible thing, such as here is a word so, there are several \b in this sentence, there is a \b before and after each word.

The Exec method will continue to re-start the first word lookup, the first mismatch, and will re-start the search, this will go into the dead loop, only when the regular mode to add the G mode, will be a head-to-tail search. So the Exec method is often used in conjunction with G mode.

Dom&bom