"JavaScript DOM Programming Art" (second edition) reading notes (iii)

The sixth chapter case study: Picture Library improvement Edition

This chapter will improve the image library according to the content mentioned in chapter fifth.

First check whether the DOM method is supported by the browser

if (!document.getelementbyid)  return false ; if (!document.getelementsbytagname)  return false ; if (!document.getelementbyid ("placeholder")) // ....... A similar test

Here's a key point: share the onload event

JavaScript often needs to be executed after the HTML document has finished loading, or some DOM methods will not find the object, which is why jquery

The author gives an interesting method for loading multiple functions, which seems to be simple, but the thought needs to be carefully understood, and the ideas of several methods in the book are similar

addloadevent function

function Addloadevent (func) {    var oldonload=window.onload;     if (typeof window.onload! = ' function ') {        window.onload=func    ; Else {        window.onloadfunction  () {            oldonload ();            Func ();     }}}

1. Put the existing Window.onload event handler function into the variable oldonload.

2. If no function is bound on this handler, add the function to it as usual.

3. If some functions are already bound on this handler, append the new function to the end of the existing function.

Ternary operator

Variable (variable) = condition (condition)? if true:if else;

We can see that the ternary operator is a variant of If/else

NodeName Property

Returns the label name of an element, always returning an HTML tag such as an uppercase letter such as Img,p,a

Seventh chapter dynamic Creation of tags

The document.write () method makes it easy to insert a string into a document, but it does not allow JavaScript to be completely separated from HTML and must be <script> put into

InnerHTML Property

This property is widely supported by the browser and can be used for both reading and writing .

Using this technique, you cannot differentiate between "inserting a piece of HTML content" and "writing a piece of HTML content." Once the innerHTML is used, all its contents will be replaced.

<div id= "Test" >  <p> This is <em>my</em> content.</p></div>var text= document.getElementById ("test"//  <p>this is <em>my</em> content. </p><div id= "test" ></div>document.getElementById ("test"). InnerHTML = "<p> This is <em>my</em> content.</p> "  // browser will see the corresponding effect

Introduction to DOM methods

1.createelement method

Document.createelement (nodename);

Creates an element node, which is only a document fragment, which is not part of the DOM node tree and needs to be added to the DOM tree fragment.

2.AppendChild method

Parent.appendchild (Child)

Insert the newly created node into the node tree of a document and make it a child of an existing node in the document.

3.createTextNode method

Document.createnode (text)

Create a text node and note the difference between it and the createelement.

Now the innerHTML method can be implemented with several DOM parties.

4.insertbefore () method

Parentelement.insertbefore (newelement,targetelement)

Inserting a new element in front of an existing element must tell it the parent element (parentelement), the new Element (newelement), the target element (targetelement).

5.InsertAfter () function (this method is not in the DOM)

function InsertAfter (newelement,targetelement) {    var parent=Targetelement.parentnode;     if (parent.lastchild==targetelement) {        parent.appendchild (newelement);     Else {        parent.insertbefore (newelement,targetelement.nextsibling);    }}

ParentNode Property: parent node; nextsibling attribute: Next sibling element node;

This function is very simple, but it works very well.

Ajax

This is a skill that must be mastered at the front end, and now the page is inseparable from the Ajax effect, and developers generally use jquery to deal with this behavior, the author introduces the Javasciprt method

Get the XMLHttpRequest object, the author provides a compatible method, write it down.

functionGethttpobject () {if(typeofXMLHttpRequest = = "undefined") XMLHttpRequest=function(){        Try{return NewActiveXObject ("msxml2.xmlhttp.6.0");} Catch(e) {}Try{return NewActiveXObject ("msxml2.xmlhttp.3.0");} Catch(e) {}Try{return NewActiveXObject ("Msxml2.xmlhttp");} Catch(e) {}return false; }    return NewXMLHttpRequest ();}

The author provides an example:

functiongetnewcontent () {varRequest =Gethttpobject (); if(Request) {Request.open ("GET", "Example.txt",true); Request.onreadystatechange=function(){            if(request.readystate==4){                varPara = document.createelement ("P"); varTXT =document.createTextNode (Request.responsetext);                Para.appendchild (TXT); document.getElementById (' New '). AppendChild (para);        }        }; Request.send (NULL); } Else{alert (' Sorry,your browser doesn\ ' t support XMLHttpRequest '); }}addloadevent (getnewcontent);

When the page load is complete, the above code initiates a GET request to load the Exemple.txt file

Request.open ()

The onreadystatechange in the code is a time-processing function that is triggered when the server sends back a response to the XMLHttpRequest object

Request.onreadystatechange = dosomething

Then you can send the request

Reequest.send (NULL)

The browser updates the ReadyState property at different stages to 0 for uninitialized 1 for the load 2 for the load complete and 3 for the interaction 4 for completion.

When readystate=4 in this example, it gets requesttext content from the requst.

This is where the Ajax content will have a more detailed example in the last chapter.

"JavaScript DOM Programming Art" (second edition) reading notes (iii)