DOM

From Pigbert Wiki

tutorial (http://www.howtocreate.co.uk/tutorials/javascript/dombasics)

Node Properties

• name = node.nodeName (read-only)
  • node is Element Node: return the name of the element. This is equivalent to the tagName property
  • node is "Attribute Node: return the name of the attribute
  • node is Text Node: return the string "#text".

• integer = node.nodeType (read-only)
  1. ELEMENT_NODE
  2. ATTRIBUTE_NODE
  3. TEXT_NODE
  4. CDATA_SECTION_NODE
  5. ENTITY_REFERENCE_NODE
  6. ENTITY_NODE
  7. PROCESSING_INSTRUCTION_NODE
  8. COMMENT_NODE
  9. DOCUMENT_NODE
  10. DOCUMENT_TYPE_NODE
  11. DOCUMENT_FRAGMENT_NODE
  12. NOTATION_NODE

• value = node.nodeValue (read-write)
  • node is Element Node: return null
  • node is "Attribute Node: return the value of the attribute
  • node is Text Node: return the content of the text node.

Element nodes

• Navigation:
  • element = document.getElementById('id')
  • array[] = parent.getElementsByTagName('tag') (could use wildcard (*) in place of the tagName)
  • parent = elementObject.parentNode;
  • sibling = element.nextSibling; (read-only)
  • sibling = element.previousSibling; (read-only)
  • child = elementObject.childNodes[i];
  • element.firstChild == element.childNodes[0];
  • element.lastChild == element.childNodes[element.childNodes.length-1];
  • booleanValue = element.hasChildNodes

• Structure Modification:
  • reference = document.createElement('tagName');
  • reference = document.createTextNode('text');
  • reference = node.cloneNode(boolean deep);
    • The boolean parameter specifies whether or not the newly created node contains the same child nodes as the copied node.
    • If you clone an element that has a unique id, you should always change the value of the new element's id.
  • element.appendChild(newChild);
  • parentElement.insertBefore(newElement,targetElement)
  • parentElement.insertAfter(newElement,targetElement) (self-defined)
  • element.removeChild(node)
  • element.replaceChild(newChild,oldChild)

• Content Modification:
  • element.event = action... elementObject.onmousedown=functionname;
  • elementObject.style.width=..' (change css style)
  • element.innerHTML
  • target.value
  • target.data

Attribute nodes

• attributeValue = element.getAttribute('attributeName');
• element.setAttribute('attributeName','value');

Text nodes

• textNode.nodeValue => the text
• textNode.data => the text
• document.createTextNode("text");

HTML DOM

HTML-DOM provides properties to represent attributes of elements.

• Replacing document.getElementByTagName("tag") with document.tagS
  • document.getElementByTagName("form") <=> documeng.forms
  • document.getElementByTagName("image") <=> documeng.images
• Replacing element.getAttribute("attr") with element.attr
  • element.getAttribute('src') <=> element.src
  • element.className

CSS DOM

• The Style" object: element.style.property.
• The scope of the object is inline only - CSS defined in other includes or blocks cannot be picked up by CSS DOM.

• List of peoperties: all the CSS attributes, with the minus sign replaced by the capitalization of the letter following.
  • element.style.color
  • element.style.fontFamily/fontSize/fontWeight
  • element.style.position/left/top

References

DOM Reference @ JavaScript Kit (nice and succint) (http://www.javascriptkit.com/domref/).