Qindex Programming Tips
54 [Quick Reference] DOM
written by Qindex at 2006-10-27 09:34 /

----- Access an Element --------------------------------------------------------
objct = document.getElementById("id attribute value");
arry  = document.getElementsByTagName("element");
arry  = document.getElementsByTagName("*");
http://www.pageresource.com/dhtml/ryan/part4-2.html



----- Access the family members ------------------------------------------------
objct.parentNode
objct.childNodes
objct.childNodes.item(0)
objct.childNodes[0]
objct.firstChild
objct.lastChild
objct.childNodes.item(objct.childNodes.length)
objct.childNodes[objct.childNodes.length]
objct.previousSibling
objct.nextSibling
http://www.pageresource.com/dhtml/ryan/part4-1.html



----- Node Properties and Methods ----------------------------------------------
objct.nodeType        (element:1, attribute:2, text:3)
objct.nodeValue       (1:null,    2:value,     3:text)
objct.nodeName        (1:element,              3:#text)
objct.tagName         (1:element,              3:undefined)
objct.hasChildNodes() (                        3:false)
http://www.pageresource.com/dhtml/ryan/part4-3.html



----- Get, Set, and Remove Attribute Values ------------------------------------
objct.getAttribute("attribute")
objct.setAttribute("attribute","value")
objct.removeAttribute("attribute")
http://www.pageresource.com/dhtml/ryan/part4-4.html



----- New Nodes ----------------------------------------------------------------
objct = document.createElement("element");
objct = document.createTextNode("text");
objct_1.appendChild(objct_2)
objct_1.insertBefore(objct_2,objct_3)
objct_1.removeChild(objct_2)
objct_1.replaceChild(objct_new,objct_old)
objct_2 = objct_1.cloneChild(boolean)  (default:false)
http://www.pageresource.com/dhtml/ryan/part4-5.html



----- Range --------------------------------------------------------------------
var rng = document.createRange();

rng.startContainer
rng.startOffset
rng.endContainer
rng.endOffset
rng.commonAncestorContainer
rng.collapsed

rng.setStart(node,offset);
rng.setEnd(node,offset);
rng.setStartBefore(node);
rng.setEndAfter(node);
rng.selectNode(node);
rng.selectNodeContents(node);
rng.collapse(boolean);

rng.extractContents();
rng.deleteContents();
rng.cloneContents();
rng.insertNode(node);
rng.surroundContents(parent);

rng_1.compareBoundaryPoints(how,rng_2); (how:START_TO_END,END_TO_END,END_TO_START)
rng_2 = rng_1.cloneRange();
rng.detach();
strng = rng.toString();

http://www.dotvoid.com/view.php?id=11
http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html



----- From Here to There -------------------------------------------------------
function Q_replaceHTML(node,strng){
    var rng = document.createRange();
    rng.selectNodeContents(node);
    rng.deleteContents();
    var html = rng.createContextualFragment(strng);
    node.appendChild(html);
}

http://www.pageresource.com/dhtml/ryan/part4-6.html



----- Table by Dom -------------------------------------------------------------
var tbl,tbdy,tr,td,txt;
tbl = document.createElement('table');
tbl.className = 'c_tbl';
tbdy = document.createElement('tbody');
    tr = document.createElement('tr');
        td = document.createElement('td');
        td.className = 'c_td';                        
            txt = document.createTextNode("text");
            td.appendChild(txt);                        
        tr.appendChild(td);
    tbdy.appendChild(tr);
tbl.appendChild(tbdy);


 [post]
[permission] read:Anonymous, comment:Anonymous, write:Webmaster, upload:Webmaster, manage:Webmaster
Qindex.info