HTML DOM

  • document.getElementById(...)
  • document.getElementsByTagName(...)
  • document.getElementsByName(...)
  • There's no built-in function for getElementsByClassName

Safe times to access the DOM

  • <body onload="...">
  • window.onload=...
  • Prototype: document.observe("dom:loaded", function() {...});
  • IE: defer attribute
  • <script ... defer="defer">...</script>
  • Defers the execution of the script until after the page has loaded
  • Order of script execution
  1. All non-deferred scripts in order of occurrence
  2. Deferred inline scripts in order of occurrence
  3. Deferred external scripts in order of occurrence

Tree traversal

// Traversing childNodes
for (var i = 0; i < obj.childNodes.length; i++) {
    var child = obj.childNodes[i];
}

Attributes

  • elem.attributes[attributeName].value - Value of the specified attribute

HTML forms

  • mySelect.selectedIndex - Set or get the index of the selected option (<form><select><option>...)
  • document.forms[formName].elements[name][n]

Page dimensions and coordinates

  • document.height - Height of the overall rendered page (not including any deadspace at the bottom of the browser window)
  • window.innerHeight - Height of the visible page (including any deadspace at the bottom of the browser window)
  • window.pageYOffset - How far within the overall page the visible page starts
// Get the y-position of the element within the overall rendered page
// (not affected by what portion of the page is visible)
function getPageY(obj) {
    var y = 0;
    if (obj.offsetParent) {
        do {
            y += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return y;
}