DOM model for javascript Learning (1)

1. Access related nodes
Var ohtml = document.doc umentElement;
\\\\\ Method 1
Var ohead = ohtml. firstChild;
Var obody = ohtml. lastChild;
Method 2
Var ohead = ohtml. childNodes [0]
Var obody = ohtml. childNodes [1];
GetElementsByTagname ("xxx ")
Obtains the Element Set of tags named xxx.
GetElementsByName ("xxx ")
Obtains a set of elements named xxx.
Element. getAttribute ("") setAttribute ("xx", newvalue) removeAttribute ("xx ")
Add, delete, modify, and query attributes
GetElementById ("ddd ")
Get the element with the id of ddd
2. add, delete, modify, and query nodes
Add
Var op = document. createElement ("p ")
Var otext = document. createTextNode ("Helloworld ")
Op. appendChild (otextf)
Document. body. appendChild (op)
Delete
Var op = document. getElementById ("aa ")
Document. body. removeChild (op)
However, it is best to use the parent node to ensure that the parent node of the target node is accessed each time to avoid confusion as follows:
Op. parentNode. removeChild (op );
Change
Var onew = new node
Var old = document. body. getElementById ("aa ")
Old. parentNode. replaceChild (onew, old)
Insert
Var onew = new node
Var old = document. body. getElementById ("aa ")
Old. parentNode. insertBefore (onew, old)

3. Document fragmentation
When you need to create multiple contents at a time and insert them into the page, because each insert operation will cause a page update, you need
Create a document fragment, insert the new document, and add it to the page at one time.
Var frag = document. createDocumentFragment ();
For (var I = 0; I <10; I ++ ){
Var op = document. createElement ("p ")
Var otext = document. createTextNode ("oh! Shit! ")
Op. appendChild (otext );
Frag. appendChild (op );
}
Document. body. appendChild (frag );

Author: carmazhao