JavaScript DOM

 

•Node

–-Retrieving nodes

§document.getElementById(id)

§document.getElementsByName(name)

§node.getElementsByTagName(tagName)

 

•Node

–Document tree structure

 

•Node

–-child, sibling, parent

 

•Walk the DOM

–-Using recursion, follow the firstChild node, and then the nextSibling nodes.

§function walkTheDOM(node, func) {

§ func(node);

§ node = node.firstChild;

§ while (node) {

§ walkTheDOM(node, func);

§ node = node.nextSibling;

§ }

§}

 

•Style

–-node.className

–-node.style.stylename

–-node.currentStyle.stylename Only IE

–-document.defaultView(). getComputedStyle(node, ""). getPropertyValue(stylename);

§var oDiv = document.getElementById("div1");

§var nHeight = document.defaultView.getComputedStyle(oDiv, null).getPropertyValue("height");

 

Style names

CSS

•background-color

•border-radius

•font-size

•list-style-type

•word-spacing

•z-index

JavaScript

•backgroundColor

•borderRadius

•fontSize

•listStyleType

•wordSpacing

•zIndex

 

•Making elements

–-document.createElement(tagName)

§var hr = document.createElement("hr");

§document.body.appendChild(hr);

–-document.createTextNode(text)

§var txt = document.createTextNode("Hello!");

§document.body.appendChild(txt);

–-node.cloneNode(deep);

§cloneNode(true) clones the whole subtree rooted at the node

§cloneNode(false) only the node itself (and any attributes if it is an element) is cloned

–curr_node = root.firstChild;

–var new_node = curr_node.cloneNode(true);

–root.appendChild(new_node);

 

•Linking elements

–-node.appendChild(new)

–-node.insertBefore(new, sibling)

–-node.replaceChild(new, old)

–-old.parentNode.replaceChild(new, old)

•Removing elements

–-node.removeChild(old)

–-old.parentNode.removeChild(old)

 

•innerHTML

–-The W3C standard does not provide access to the HTML parser.

–-All A browsers implement Microsoft's innerHTML property.