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

Then formally into the DOM study

Chapter III DOM

D represents document (document), O stands for Object (object), M represents model (model), and the DOM simply says that a file is represented as a "tree" (mathematical concept).

node (node), which represents a connection point for a network. A network is a collection of nodes. The same is true for DOM, where a document is a collection of nodes.

1. element Node

The names of

2. text node General text node is contained within the element node

3. attribute nodes (attribute node) attribute nodes are also included in the element nodes, such as the most common class,id

Each node is an object

Methods to get elements

1.document.getelementbyid

2.document.getelementsbytagname

3.document.getelementsbyclassname

The first method is relatively simple, the second method needs to be noted is that the result is an array, the third method is newer, the old browser version is not supported, but can be implemented in the original method, the code is as follows

functionGetelementsbyclassname (node,classname) {if(Node.getelementsbyclassname) {//if the browser supports native methods, the native method is used directly        returnnode.getelementsbyclassname (classname); }Else{        varResults =NewArray (); varElems = Node.getelementsbytagname ("*");  for(vari = 0; i < elems.length; i++){            if(Elems[i].classname.indexof (ClassName)!=-1) {Results[results.length]=Elems[i]; }        }        returnresults;
}

Tips: TheindexOf () method returns the position of the first occurrence of a specified string value in a string. No, then-1.

Get and Set properties ( both can be used for element nodes only)

1.getattribute method:Object.getattribute (attribute)

2. How to use SetAttribute:object.setattribute (attribute,value)

Fourth. Case study: JavaScript picture library

1.setAttribute can be replaced by other methods, directly set:Element.value = "The new value", equivalent to element.setattribute ("value", "the new Value ")

2.ChildNodes Properties

On a node tree, the ChildNodes property can be used to get all the child elements of any one element, which is an array that contains all the child elements of the element.

The ChildNodes property returns the elements of all types of nodes, not just the element nodes. almost everything becomes a node, and even spaces and line breaks are interpreted as nodes.

3.NodeType Properties

You can use Node.nodetype to get the NodeType property of a node

Nodety of ELEMENT nodes The PE property value is 1, the property , the text note < Span style= "color: #000000;" The NodeType property value for the node is 8, document < Span style= "color: #000000;" The NodeType property value for the node is 9

< Span style= "color: #000000; Font-family:microsoft Yahei; font-size:14px; " >4. nodevalue properties

< Span style= "color: #000000; Font-family:microsoft Yahei; font-size:14px; " >

< Span style= "color: #000000; Font-family:microsoft Yahei; font-size:14px; " >5. firstchild and lastchild properties

corresponding to childnodes[0] and childnodes[childnodes.length-1 respectively)

< Span style= "color: #000000; Font-family:microsoft Yahei; font-size:14px; " > 5th   Best practices

< Span style= "color: #000000; Font-family:microsoft Yahei; font-size:14px; " >

< Span style= "color: #000000; Text-decoration:underline; " > < Span style= "color: #000000; Text-decoration:underline; " > < Span style= "color: #000000; Text-decoration:underline; " > high performance.

Read it carefully and use it in your usual projects.

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