JavaScript Learning notes Dom Basics Usage

. Dom:document object model is an application for HTML and XML documents API.DOM provides structured document representations.
Allows the program to modify the document's content and visual representation. Essentially, it connects web pages to scripts or programming languages.

2. For scripts in the window, the default reference is the Window object for the current Windows. If you need to access the DOM contents of another frame or window, you should explicitly
The calling window object.
Eg: for the following pages:

The code is as follows	Copy Code
The call is as follows: Window.parent.frames[1].document.write ("Hutia"); Parent.frame2.document.getElementById ("Hutia"). Value;

The child objects of the Window object have "clientinfomation" (Client information), "Clipboarddata" (clipboard), "Document", "event", "Location",
"Navigator (browser)" And so on, each object has its own properties, methods, events and child objects collection. For example, a Document object has
As a child object, the body object has individual elements in the page as child objects, similar to the layers contained in HTML markup,
The Document Object model tree that forms the HTML page.

The 3.document object is the root node of all HTML content in an HTML page. All the elements in an HTML page are object-instantiated in the DOM.
The objects in the contents of the DOM model are grouped by Category:
A.html element Object. For example

.. B. Property object. For example

The href= "Www.111cn.net" in the form of an object. C. Annotation object, that is, 4. An object that represents an HTML element is also called a node, and in the DOM model, there are two types of nodes: element nodes and text nodes. NetEase where a element formed an element node. NetEase is a text node.

5. Get the browser information--"Navigator" object.
Familiar with the various properties of the "Navigator" object: Navigator.appname ....

6. Operation of the clipboard------"Clipboarddata" object.
This object has no attributes, only 3 methods:
ClearData is used to empty the Clipboard data: Clipboarddata.cleardata ([Sdataformat]);
Where Sdataformat is the Clipboard data type that needs to be emptied.
GetData is used to get data from the Clipboard: Sretrievedata=object.getdata (Sdataformat);
SetData is used to place data on the Clipboard: Sretrievedata=object.setdata (Sdataformat);

7. Manipulating the browser's history---history objects
The history object has only one property: Length, which is the length that returns the current history. The methods for History objects are: Back,forword,go.
The first two without parameters, the go syntax is: history.go (vlocation); vlocation can be either a string or an integer.
Eg: you have entered the wrong information, please

Go back to the previous page and fill it out.

8. Gets the URL---Location object for the current page.
Location objects have methods:
The Assign method jumps the page to a new URL address: location.assign (strURL);
Reload method User Refresh page: location.reload ();
Replace method The user jumps the page to a new URL address: location.replace (strURL);

9. Read the user's screen resolution----screens object.
eg

The code is as follows	Copy Code
Maximizes the window. function Maximizewindow () { Window.moveto (0,0); Window.resizeto (Screen.availwidth,screen.availheight); } Centers the window relative to the screen. function CenterWindow (width,height) { Window.moveto ((screen.availwidth-width)/2, (Screen.availheight-height)/2); Window.resizeto (Width,height); }

10. Using the DOM's Documnt object
A.document Object-specific properties.
The most important thing is that cookies have been talked about before.
The DocumentElement property returns the object that the HTML represents, so Window.document.documentElement.outerHTML to get all the content of the entire HTML document.
Domain property returns the name of the document
The ReadyState property returns the current load state of the document.
The referrer property can get a reference page for the current page.

B.document object's Method
1.open method
Open ([Uurl][,sname][,sfeatures][,breplace]);
Uurl defaults to "text/html". Sname is the window that contains the document you want to open. Other parameters are similar to the open method in Windows. The
2.close method is used to close the document flow object.
3.writeln, like write, writes the corresponding HTML content to the current document stream, except that Writeln attaches a carriage return.
4.execCommand Methods---Perform printing, and all----provide an interface to control browser behavior.
bsuccess = Object.execcommand (Scommand [, Buserinterface] [, Vvalue])
Scommand is the name of the command that needs to be executed. Buserinterface defaults to False to indicate whether the user interface interface is displayed when this command is executed.

The code is as follows	Copy Code
eg Select All Page contents function SelectAll () { Document.execcommand ("SelectAll", false); } Pop-up Save As dialog box function SaveAs () { Document.execcommand ("Savaas", True, "c:\sample/htm"); }

11. Inserts and deletes elements.
A. Inserts the element---AppendChild method at the end of the container element.
Container.appendchild (objsub);//objsub must be selected as a child element to be inserted. This method inserts the Objsub element at the end of the container element that called the method.
Note: After the element is generated, you can modify its properties. When you insert a document, some properties become read-only, and assigning to them can result in an error.
Applying: Adding new Links

The code is as follows	Copy Code
function Insertlink () { var NewLink = document.createelement ("a"); newlink.innerhtml = $ ("Txtdesc"). Value; Newlink.href = $ ("txtaddr"). Value; $ ("Div1"). AppendChild (NewLink); }

B. Inserting elements before the specified element---insertbefor method
Container.insertbefore (Objsub [, Ochildnode]);//objsub for child elements that need to be inserted. Ochildnode is the element after which the child element needs to be inserted.
Effect: Inserts the element objsub before the child element ochildnode of the container element.

C. Delete Node---removechild method

code is as follows	copy code
container.removechi LD (OBJSUB);

To take another example, note that the node depth under the body is 2.
<title>never-online ' s website</title>
<script>
function Changedivtext (strText) {
var node = document.getElementById ("NodeTest");
var mynode = node.getelementsbytagname ("DIV");
mynode[0].innerhtml = StrText;
}
</script>
<body>
<div id= "NodeTest" >
<div>tutorial of DHTML and JavaScript programming</div>
<input onclick= "Changedivtext (' Change? ')" type= "button" value= "Change"/>
</div>
</body>

2. Create and INSERT nodes dynamically
1), create the Node object. Document.createelement (tagname), tagname refers to a tag, such as a Div, is document.createelement ("div"),

It returns the reference to this node.
2, in the body of the tail insert node with Document.body.appendChild (object), in order to easily understand, the following example, I used IE proprietary properties

object.outerhtml, get an HTML tag for the element (including itself), which makes it easier to see the effect.

The code is as follows

Copy Code

<title>never-online ' s website</title> <script>    function Insertnode (strText) {      alert ("Body HTML before inserting elements:" +document.body.outerhtml);      var node = document.createelement ("DIV");      node.innerhtml = StrText;       document.body.appendChild (node);       alert ("Body HTML after inserting elements:" +document.body.outerhtml); } </script> <body>  <div>tutorial of DHTML and JavaScript PR Ogramming</div>  <input onclick= insertnode (' Change? ') ' type= ' button ' value= ' Change '/> </body>

3), insert the node at the element point. Object.insertbefore (Onewnode [, Ochildnode]), Onewnode for a node we created, Ochildnode is optional, a child node under object. Similarly, in order to see the effect, I also used the outerhtml. Example

The code is as follows

Copy Code

<title>never-online ' s website</title> <script> function Insertnode (strText) {    alert ("Body HTML before inserting elements:" +document.body.outerhtml);     var node = document.createelement ("DIV");     var mynode = document.getElementById ("Textnode");     node.innerhtml = StrText;      Document.body.insertBefore (Node,mynode);    alert ("Body HTML after inserting elements:" +document.body.outerhtml); } </script> <body> <div id= "Textnode" >tutorial of DHTML and Javas Cript programming</div> <input onclick= insertnode (' Change? ') ' type= ' button ' value= ' Change '/> </body>

3, remove the node.
1) object.parentNode.removeChild (Ochildnode), this is the syntax, see the example below.

The code is as follows

Copy Code

<title>never-online ' s website</title> <script> function Insertnode (strText) { Alert ("Body HTML before inserting elements:" +document.body.outerhtml); var node = document.createelement ("DIV"); var mynode = document.getElementById ("Textnode"); node.innerhtml = StrText; Document.body.insertBefore (Node,mynode); Alert ("Body HTML after inserting elements:" +document.body.outerhtml); } function Removecreatenode () { Alert ("Body HTML before removing elements:" +document.body.outerhtml); var node = document.getElementById ("Textnode"); Node.parentNode.removeChild (node); Alert ("Body HTML before removing elements:" +document.body.outerhtml); } </script> <body> <div id= "Textnode" >tutorial of DHTML and JavaScript programming</div> <input onclick= "Insertnode (' Change? ')" type= "button" value= "Insert"/> <input onclick= "Removecreatenode ()" type= "button" value= "Remove"/> </body>

Like ParentNode and parentelement functions, childnodes and children function as well. But ParentNode and childnodes are consistent with the standard of the Global Consortium, which can be said to be more generic. While the other two are only IE support, not the standard, Firefox does not support