"Dry" JavaScript DOM programming Art Learning Note 7-9

Vii. Dynamic creation of tags

In the document does not write placeholder pictures and text code, in the case can invoke JS dynamic creation, document support is better.

Add function Prepareplaceholder on the basis of the original addloadevent preparegallery showpic

Last Call of Prepareplaceholder and preparegallery two functions

function Prepareplaceholder () {

Object detection

if (!document.createelement) return false;

if (!document.creattextnode) return false;

if (!document.getelementbyid) return false;

if (!document.getelementbyid ("Imagegallery")) return false;

Create placeholder picture elements

var placeholder=document.createelement ("img");

Placeholder.setattribute ("id", "placeholder");

Placeholder.setattribute ("src", "images/placeholder.gif");

Placeholder.setattribute ("Alt", "My Image gallery");

Create a text Segment element node

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

Description.setattribute ("id", "description");

Create a text node

var destext=document.createtextnode ("Choose an image");

Description.appendchild (Destext);

var Gallery=document.getelementbyid ("Imagegallery");

After inserting the placeholder into the gallery

InsertAfter (Placeholder,gallery);

After inserting the description into the placeholder

InsertAfter (description,placeholder);    

}

function InsertAfter (newelement, targetelement) {

Remove the parent element of the target element

var Parent=targetelement.parentnode;

If the target element is the last child node of the parent element, append to the parent element and finally

if (parent.lastchild==targetelement) {

Parent.appendchild (newelement);

}

If it is not, it is inserted before the next sibling element of the target element

else{

Parent.insertbefore (newelement, targetelement.nextsibling);

}

}

Note:

InnerHTML: Need to insert a large piece of content, such as testdiv.innerhtml= "<p>i insert <em>this</em> content</p>"; Can be placed in the external JS with the document separation. is a private HTML attribute and is not supported by other markup languages.

Document.createlement (NodeName): Adds an element node.

Document.creattextnode (text): Adds a text node.

Parent.appendchild: Causes the child element to become the last node of the parent element.

TargetElement.parentNode.insertBefore (Newelement, targetelement): Before inserting newelement into targetelement.

The next sibling element of the targetElement.nextSibling:targetElment element.

Ajiax and Hijax are talking behind.

Viii. enrich the contents of the document

Present the existing information in the document with another structure, such as a list of acronyms, links to source documents, and a list of shortcut keys. The basic step is to create a collection of nodes consisting of a specific element (such as an abbreviation), then iterate through the collection, create some tags in each loop, and finally insert the newly created tag into the document.

List of abbreviations:

In the document is <p>the <ABBR title= "World Wide Web Consortium" >w3c</abbr></p> marked with abbr, the title content is not displayed, Show Text Only

function Displayabbreviations () {

if (!doucument.getelementsbytagname| |! Document.createelement| |! document.createTextNode) return false;

Get all the abbreviation elements

var abbreviations=document.getelementsbytagname ("abbr");

if (abbreviations.length<1) Returen false;

Creating a Storage array

var defs=new Array ();

Traversing the abbreviation element

for (i=0; i<abbreviations.length; i++) {

var current_abbr=abbreviations[i];

If it's empty, continue to the next loop.

if (current_abbr.childnodes.length<1) continue;

Store the corresponding key and defination

var Key=current_abbr.lastchild.nodevalue;

var defination=current_abbr.getattribute ("title");

Defs[key]=definition;

}

Create a definition list

var dlist=document.createelement ("DL");

Iterating through an array of abbreviations defs

For (key in defs) {

Create a definition title for each dt corresponding key

var dtitle=document.createelement ("DT");

var dtitle_text=document.createtextnode (key);

Dtitle.appendchild (Dtitle_text);

Create definition description DD correspondence defination

var ddesc=document.createelement ("DD");

var ddesc_text=docuement.createtextnode (defination);

Ddesc.appendchild (Ddesc_text);

Add each set of DT DD to the list DL

Dlist.appendchild (Dtitle);

Dlist.appendchild (DDESC);       

}

if (dlist.childnodes.length<1) return false;

To add a definition list to a page

Document.body.appendChild (dlist);

}

Document Source Connection table:

In the page is the cite property of the blockquote: <blockquote cite= "Http://www.w3.org/DOM" ><P></P></BLOCKQUOTE> Want to add the contents of cite to the end of P. Wrapped in a SUP element on the page and displayed as superscript.

function Displaycitations () {

if (!document.getelementsbytagname| |! Document.createelement| |! document.createTextNode) return false;

Get all references

var quotes=document.getelementsbytagname ("blockquote");

Traversal reference

for (i=0; i<quotes.length; i++) {

If no cite attribute enters the next loop

if (!quotes[i].getattribute ("cite")) continue;

Remove cite property

var url=quotes[i].getattribute ("cite");

Get all ELEMENT nodes in a reference

var quotechildren=quotes[i].getelementsbytagname ("*");

If there are no element nodes in the reference, continue looping

if (quotochildren.length<1) continue;

Gets the last element node in the reference

var elem=quotechildren[quotechildren.length-1];

Create a tag

var link=document.createelement ("a");

var link_text=document.createtextnode ("source");

Link.appendchild (Link_text):

Link.setattribute ("href", url);

Encapsulated in the SUP element

var superscript=document.createelement ("Sup");

Superscript.appendchild (link);

Added to the last element of the reference

Elem.appendchild (superscript);

}

}

To display a list of shortcut keys:

The accesskey attribute of a element, such as <a href= "index.html" accesskey= "1" >HOME</A>

Nine, Css-dom

1. Style Property

The DOM style property gets the style: elem.style.fontFamily, the shorthand attribute is recognized, and the property name of the connection line is represented in the DOM using the Hump method.

However, this approach can only get property declarations embedded in HTML code, external linked style sheets, and the style attributes declared in the document head, which are not extracted by this method.

Set the style in this way: para.style.font= "2em ' Times ', serif";

2. When to use DOM to set properties

In general, the style should be set with CSS, only if the CSS can not find the target element to be processed, or the method of using CSS to find the target element has not been widely supported, the use of the DOM method, and the DOM method as far as possible not directly set the Style property, Instead, update the ClassName property.

(1) Set the style according to the position of the element node styleheadersiblings

(2) Traverse a node collection to set the style of the element stripetables

(3) Set the style of the element when the event occurs highlightrows

(1): style is set according to the position of the element in the node tree

function Styleheadersiblings () {

Object detection

if (!document.getelementsbytagname) return false;

Select the H1 element

var headers=document.getelementsbytagname ("H1");

var Elem;

for (var i=0; i

Locate an element node behind the header

Elem=getnextelement (headers[i].nextsibling);

Add an attribute to the element instead of changing the property

AddClass (Elem, "Intro");

}

}

function getnextelement (node) {

Gets the next element node instead of the next node

if (node.nodetype==1) return node;

if (node.nextsibling) {

Return getnextelement (node.nextsibling);

}

}

function AddClass (element,value) {

if (!element.classname) Element.classname=value;

else{

element.classname+= "Intro";

}

}

Finally, set the properties of the intro class in CSS:. intro{font-weight:bold; Font-size:1.4em};

(2): set a pattern repeatedly according to a certain condition

function Stripetables () {

if (!document.getelementsbytagname) return false;

Remove all Lists

var tables=document.getelementsbytagname ("table");

var odd,rows;

Traverse List

for (var i=0; i<tables.length; i++) {

Odd=false;

Remove all rows from the list

Rows=tables[i].getelementsbytagname ("tr");

for (var j=0; j<rows.length; J + +) {

Set properties based on the parity of rows

if (odd==true) {

AddClass (Rows[j], "odd");

Odd=false;

}

else{

Odd=true;

}

}

}

}

Then set the odd class style in the CSS:. Odd{background-color: #ffc};

(3): Set style according to corresponding event

function Highlightrows () {

if (!document.getelementsbytagname) return false;

var rows=document.getelementsbytagname ("tr");

for (var i=0; i<rows.length; i++) {

Rows[i].onmousover=function () {this.style.fontweight= "bold";}

Rows[i].onmouseout=function () {this.style.fontweight= "normal";}

}

}

"Dry" JavaScript DOM programming Art Learning Note 7-9