Dom manipulation of JavaScript

Dom manipulation of JavaScript

The basic concept of DOM
Dom is the Document Object model, which is a tree model; a document refers to a label document; An object is a document; A model refers to something that is abstracted.
Windows Object Operations
Properties and Methods
Property (value or sub-object)
Opener: Opens the source window of the current window, or Opener is null if the current window is open for the first time the browser is started.
Dialogargument: The return value of the dialog box;
Sub-objects: history,location,document, status, menubar, toolbar, etc.
Method (function): event (pre-Set program, triggered).
window.open ("Part I", "second part", "Part Three", "Part IV")
Characteristic parameters of window.open:
The first part: write the page address;
The second part: _blank//Open mode, _blank opens in a new window, _self opens in its own window.
The third part: Control the Open Window format, you can write multiple, separated by a space, as follows
Toolbar = no; The newly opened window has no toolbars.
menubar = no; no menu bar
Status = No, no status bar
width:100; heigth:100; width/height
left = 100; How far is the open window
resizable = no; window size is not adjustable
scrollbars = yes; Scroll bar appears
Location = yes; Have address bar

Window.Open also has a return value whose return value is a newly opened window object, such as
The simplest open window: window.open ("untitled-6html");
Open a window and save it in the variable: var w = window.open ();
You can save multiple open windows in the array W:
Function Openw ()
{
W[i++]=window.open ();
}
4, Window.close (); Close the current window

W.close (); Close the window that you saved in the variable W

Close multiple child windows, save the open window in an array, and turn it off by loop.

Window.opener.close (); Close the source window that opens the current window

5. Interval and delay
Window.setinterval ("Code to execute", number of milliseconds in interval)
Window.clearinterval (interval ID), clear interval execution, loop once to clear the interval execution of code;
Window.settimeout ("Code to execute", number of milliseconds to delay), delay the execution of a piece of code (function) for a period of time;
Window.cleartimeout (delayed ID); clear delay;
Window.settimeout (deferred ID);

6. Adjust the page
Window.navigate ("url") jumps to the target page, there is a bug under Google Chrome;
Window.moveto (x, y) moves the page to a location that is determined by x, y;
Window.resizeto (wide, high) adjusts the width and height of the page
Window.scrollto (x, Y) scrolls the page to where Y represents the vertical scroll.

7. Modal dialog box and non modal dialog box
Modal dialog box (Modal dialogue box), which means that the dialog box must first be responded to when the user wants to work with an application other than the dialog box. If you click the OK or Cancel button to close the dialog box, it is always pinned to the non-modal dialog box, and the difference is whether the user is allowed to manipulate other objects while the dialog box is open.

Open Modal Dialog: window.showModalDialog ("url", "Value passed to target dialog box", "window feature parameter");
Feature parameters: separated by semicolons, pixel size with px. Dialogheight, dialogwidth, center.
Open the Non-modal dialog box: Window.showmodallessdialog ("url", "Value passed to target dialog box", "window feature parameter")

Var a = window.dialogargument; You can use a parameter to get the values passed by modal or non-modal dialog boxes.

Windows.history Object
Window.history.back (); Page to Rewind
Window.history.forward (); Page forward
Window.history.go (n;) n if a positive number represents the forward N table page; n is a negative number that represents a Back N table page, which is generally used.

Window.location Object
Location Bar
var s= window.location.href; Get the address of the current page
window.location.href=http://www.baidu.com; Change page address, will jump page
Window.location.hostname: Host name, domain name, url name, available variables accepted.
Window.location.pathname: path name, available variable receive

Window.status Object
Status bar, you can add the text you want to display to the status bar
Window.status= "What to display in the status bar"; Set the status bar text, for example:
function S ()
{
Window.status = "Go ahead, just walk";
}

Window.document Object
Find element
document.getElementById ("id"); Search by ID, find at most one
var a = document.getElementById ("id"); Place the found element in a variable
Document.getelementbyname ("name";) according to name, find out the array
Document.getelementbytagname ("name";) according to the tag name, find out the array
Document.getelementbyclassname ("name";) according to ClassName, find out the array

Action Content
Non-form elements:
Get content
Alert (a.innerhtml); tags in the HTML code and text beans obtained, such as:
There is such a div in the body:
<div id= "Me" ><b> try it </b></div>
In script, get the contents of the DIV using innerHTML:
Var A=document.getelementbyid ("Me";
Alert (a.innerhtm);
Alert (A.innertext); Just take the words inside
Alert (a.outhtml); Include the contents of the label itself (simply understand the line)
Set content
InnerHTML = "<font color= red>hello world</font>
If you use the Set content code result, the content in the Div is replaced;

InnerText will present the things that are assigned.
Empties the content, assigning an empty string.
Form elements
There are two ways to get content:
Var t = document.fl.tl; The form ID is the input of the TL inside the FL ID.
Var t = document.getElementById ("id"); Get directly with ID.

Alert (T.value); Gets the value in input;
Alert (t.innerhtml); Get <textarea> value here </textarea>;

2) Set content: t.value= "content changes".

Small knowledge points
<a Href=www.baidu.comonclick = "return flase" > turn to Baidu </a>;j add return flase will not jump, the default is return true will jump. The button is the same, if the button is set to return flase will not be submitted, this can be used to control the commit jump.
Action Properties
This element is first found using the ID of the element and stored in a variable:
Var a = document.getElementById ("id");
You can then manipulate the attributes of the element:
A.setatrribute ("attribute name", "attribute value"); Set a property, add or change all can;
A.getatrribute ("attribute name"); Gets the value of the property;
A.removeattribute ("attribute name"); Remove an attribute.
④ Action Style
This element is first used with the ID of the element and stored in a variable:
Var a = document.get.ElementById ("id");
You can then manipulate the attributes of the element:
A.style. style = ""; Manipulate the properties of this ID style;
Styles are styles in CSS, and all styles can be manipulated in code.

Dom manipulation of JavaScript