Javascript - DOM - A List Of Dom Methods

javascript-dom

// createElement and insertBefore
// Dynamically load additional JavaScript files
var sNew = document.createElement("script");
sNew.async = true;
sNew.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js";
var s0 = document.getElementsByTagName('script')[0];
s0.parentNode.insertBefore(sNew, s0);

var el = document.createElement("input");
var el = document.createElement("<input type='text' value='...'/>");

For some version of IE, if we create an element by specifying just the tag 
name as above, we cannot use setAttribute (it does not give any error, but it 
just won't set the desired attribute).  Therefore, you should specify all the 
attributes when you invoke document.createElement.

To insert a style node:

var head = top.frmMain.window.document.getElementsByTagName("head")[0];
var style = top.frmMenu.oCFMenu.frameString;
var ss1 = document.createElement('style');
ss1.setAttribute("type", "text/css");
head.appendChild(ss1);
if (ss1.styleSheet) {   // IE
  ss1.styleSheet.cssText = style;
} else {                // the world
  var tt1 = document.createTextNode(style);
  ss1.appendChild(tt1);
}

It's important for IE that you append the style to the head before setting its 
content. Otherwise IE678 will *crash* is the css string contains an @import. 
Go figure!

getAttribute and setAttribute are not reliable. Instead, assign the property 
of the element object directly: 

obj.property = value

Furthermore, some attributes are actually reserved words, so instead of class
use className and instead of for use HTMLfor. 

Real DOM compliant browsers will return linebreaks as text nodes in the 
childNodes collection, make sure to either remove them or test for the nodeType.
  • element.firstChild
  • element.lastChild
  • element.childNodes
  • element.children
  • element.parentNode
  • element.hasChildNodes
  • element.previousSibling
  • element.nextSibling
  • element.localName
  • element.tagName
  • element.nodeType
  • element.nodeName
  • element.nodeValue
  • element.cloneNode: newNode = node.cloneNode(bool) // Create newNode as a copy of node. If bool is true, the clone includes clones of all the child nodes of the original
  • element.ownerDocument
  • element.textContent
  • document.createEventObject
  • document.createEvent
  • element.fireEvent
  • element.dispatchEvent
  • element.addEventListener()
  • frameElement.contentDocument
  • frameElement.contentWindow
  • iframe.contentWindow.document.body.innerHTML
  • self.document.body.innerHTML
  • iframe.document.body.innerHTML
  • iframe.contentDocument.body.innerHTML
  • document.getBoxObjectFor
  • element.getBoundingClientRect()
  • document.elementFromPoint(x,y)
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License