Javascript DOM Programming Art

Chapter 0

Why are you reading this book? As JS Primer Book, fill the foundation, because this book code demo is simple, and no code, only to record some of their own knowledge points to note and code scripts

A brief history of Chapter 1:javascript

The DOM full name is the Document Object model, which assumes that the document is an object, and that DOM is the standard for manipulating and controlling the object using HTML and XML.

　　1.2 AJAX (Asynchronous transfer technology) has sparked a boom in learning DOM scripting:　　

Traditional Web application interaction by the user to start an HTTP request to the server, the server to process it to return a new HTML to the client, and then each time the service processing requests, the client can only wait, and the use of AJAX asynchronous processing mechanism, you can not update the entire page without the premise of maintaining the data, This feature is mainly based on XMLHTTP and XMLHttpRequest

　　1.3 HTML5 new Features:

<audio> and <video> Control media
<canvas> has the perfect drawing ability
Browser local storage is beyond the limits of cookies:
COOKIE:4KB, each request for a new page needs to send the past, can not be called across domains
Localstorage: Always valid, storage size is 5MB

Chapter 2:javascript Syntax

　2.1 Data types

JavaScript is a weakly typed language that allows programmers to change the data type of a variable at any stage
var = ' China ';
Age = 26;
If you want to use single or double quotation marks in a variable, you must use \ to escape the string
var mood = ' don\ ' t ask '; Don ' t ask

　　2.2 Arrays

definition of the array:
var arrs = Array ();
var arrs = Array (4);

Associative arrays:
var arrs = Array ();
arrs[' name '] = ' Carlton ';
Arrs[' age '] = ' 26 ';
arrs[' living ') = true;

　2.3 Objects

What the 2.3.1 object is: An unordered collection of properties and methods that, when this attribute is a function, is called the object's method, not a function, which is called the object's property (Proporty)

var obj1 = Object ();

obj.name = ' Carlton ';

obj.age = ' 26 ';

obj.living = function () {

alert (true);

}

var obj2 = {
Name: "Carlton",
Age: "26",
Living:function () {
Alert (TRUE);
}
}

　　What are the 2.3.2 objects:

Built-in objects: Array,date,math, etc.

Host object: Form,image (accessible img tag), element,document

Chapter 3:dom

　　3.1 Dom Overview

The DOM is taken apart to see document, object, model
In the case of HTML, the document in the DOM is HTML, and object is something for JS to manipulate the DOM, which is a model of the HTML document that is presented in the form of a tree.
The HTML document is the equivalent of a tree, composed of different nodes, about the node:
The entire document is a document node
Each HTML tag is an element node
Text that is contained in an HTML element is a text node
Each HTML attribute is an attribute node
Comments belong to note nodes

　3.2 Getting elements

document.getElementById (ID);//Get a node for a specific ID
Document.getelementbytagname (tagName);//Gets a collection of nodes for a specific label
Document.getelementsbyclassname (classname);//Gets a collection of nodes for a specific class name
Get and Set properties:
Object.getattribute (attr);//Gets the value of the property attr, object is a node
Object.setattribute (attr, value);//Set the appropriate value for the property attr

Chapter 4:javascript Pictures Gallery

This chapter code demo is relatively simple, here is not detailed, I only listed some of the points I need to pay attention to

Q: When clicking on a link, stay on this page rather than go to another window
A: By adding a "placeholder" image on this homepage to reserve a browse area for the picture
Q: When you click the link, you see the picture on the current page
A: Use return False to cancel page default behavior
<a href= "#" onclick= "Showpic (this); return false" ></a>
Another default action is the <input type= "submit" in form form >

The ChildNodes property can get all the child elements of any one element

Document.getelementbytagname ("Body") [0]. childnodes;//gets all the child elements of the body

NodeType can let us know which node we're dealing with.

ELEMENT nodes, attribute nodes, text nodes are NodeType, respectively

Node.nodevalue can change the value of a text node

Node.firstchild is equivalent to node. Childnodes[0]

Node.lastchild is equivalent to node. Childnodes[node. CHILDNODES.LENGTH-1]

Chapter 5: Best Practices


Chapter 6: Photo Gallery improvements

　　6.1 Structured programming

One

of the principles is that the function should have only one exit and entry
If a function has multiple exits, the exits should be concentrated at the beginning, which is acceptable, for example:
function Preparegallery () {
if (!document.getelementbytagname) return false;
if (!document.getelementbyid) return false;
if (!document.getelementbyclassname) return false;
}

　　6.2 Sharing onload Events

The Addloadevent function will complete the operation:
The value of the existing Window.onload event handler function is stored in the variable oldload
If no function is bound on this handler, add the function to it as usual
If some functions are already bound on this handler, append the new function to the end of the existing instruction
function Addloadevent (func) {
var oldonload = window.onload;
if (typedef window.onload! = ' function ') {
Window.onload = func;
} else {
Window.onload = function () {
Oldonload ();
Func ();
}
}
}

this creates the functions that were executed when the page was loaded as a queue, such as
Addloadevent (firstfunction);
Addloadevent (secondfunction);

6.3 Using ternary operators

if the function format is as follows
if (Whichpic.getattribute ("title")) {
var text = Whicpic.getattribute ("title");
} else {
var text = "";
}
You can do this with the ternary operator
var text = Whichpic.getattribute ("title")? Whichpic.getattribute ("title"): "";

Chapter 7: Dynamically Creating tags

　　7.1 Document.Write and InnerHTML

The

write method of the Document object makes it easy to insert a string into the document
document.write ("<p>this is a test</p>")
innerHTML property: Used to read or write HTML content within a specified element
<div id= "Testdiv" >
<p>this is a test</p>
</div>
At this point the contents of testdiv.innerhtml are <p>this is a test</p>

　7.2 Dom Method

7.2.1 CreateElement method

Dynamically Create script reference

var head= document.getelementsbytagname (' head ') [0];   

var script= document.createelement (' script ');   

script.type= ' text/javascript '/script.setattribute ("type", "Text/javascript");   

script.src= ' call.js '/script.setattribute ("src", "call.js");

head.appendchild (script);

　7.2.2 createTextNode Method

var para = document.createelement ("P");

document.getElementById ("Testdiv"). Appchilid (para);

var txt = document.createtextnode ("Hello World");

para.appendchild (TXT);

　7.2.3 InsertBefore Method

Parentelement.insertbefore (newelement, targetelement)

newelement: The element you want to insert

targeteleme NT:

The parent element of the parentelement:targetelement element

before you want to insert newelement into which element, that is, Targetelement.parentnode

　　

　　7.2.4 Custom InsertAfter Method

function inertafter (newelement, targetelement) {var parent = Targetelement.parentnode;　　if (Parent.lastchild = = targetelement) {parent.appendchild (newelement); } else {parent.insertbefore (newelement, targetelement.nextsibling);//The next sibling element of the target element }}    

　　

　　7.3 AJAX

previously want to see a page changes, even a small part, you have to resend the request, refresh the entire page, while using AJAX can only update a small part of the page, where the content is not required to update, the loaded page only a small part will be updated, without having to load the entire page

The most advantage of Ajax is that the request to the page is sent asynchronously to the server, so that it does not need to wait for the server to return the request data and can continue to browse the Web page, not greatly enhance the user experience

　　7.3.1 XMLHttpRequest

var request = new ActiveXObject ("msxml2.xmlhttp.3.0"); IE Browser Creation Object
var request = new XMLHttpRequest ();//other Browsers create objects
Sample code
function Getnewcontent () {
var request = XMLHttpRequest ();
if (request) {
Request.open ("GET", "Example.txt", true);
Request.onreadystatechange = function () {
The XMLHttpRequest object is executed when the response is sent back
if (request.readstate = = 4) {//4 indicates request complete
Some operations
}
};
Request.send (NULL);
} else {
Alert ("fail");
}
}

Chapter 8: Enrich the content of the document

　　8.1 DOCTYPE

Before the advent of HTML5, we generally used XHTML document rules rather than HTML, because HTML has a lot of inconvenient places
HTML rules allow lowercase (<a>) to use uppercase letters (<A>), or omit end tags (</p>,</li>)
Using XHTML rules
<! DOCTYPE HTML Public "..." "https://." >
Using HTML5 rules
<! DOCTYPE html> also supports HTML and XHTML rules

Javascript DOM Programming Art